The Avogadro Project

The Avogadro Project - named after an experiment to re-define the kilogram by creating the smoothest large sphere in known existence, which also happen to be very reflective - is a continually changing effort to create meta versions of the canvas on itself.

Project 1 - CtrlZ's family on Canvas 3

The first Avogadro Project was a hyperbolic reflection of the canvas with an overlay of CtrlZ and his family.
This project was kept up-to-date manually by irregularly taking snapshots of the canvas, and using it as a texture map in a 3D graphics program.

The resulting image was, at that time, manually corrected to the palette colors as the pxlsFiddle Template utility was not yet capable of doing so automatically. This often led to changes in dithering, requiring any update to be carefully masked off to prevent having to redraw a lot more pixels than necessary.


Check out the Canvas 3 archives for canvas context and full timelapse

Project 2 - CtrlZ's family on Canvas 10

The second Avogadro Project was a minor update to the first, with inverted colors and an update to CtrlZ's appearance.
It was also the first to have to contend with limited space, not having started at the beginning of the canvas, necessiating overlap from a project neighboring to the west. This was handled by adding their art to the project overlay.

Unlike the first Avogadro Project, this was the first project to actually use the canvas mapping technique explained in the Technical Stuff section below, performed server-side. Due to advances in the pxlsFiddle Template utility, colors could now finally be mapped consistently, making the process semi-automated.

The apparent change in inner shape is due to a difference in location on the canvas, and the size of the canvas itself. Canvas 10 was much smaller than Canvas 3, meaning that the edges and corners were reflected in they hyperboloid much more closely.


Check out the Canvas 10 archives for canvas context and full timelapse

Project 3 - Bob Ross on Canvas 11

After Discord user Natsuki#3620 posted a picture of Bob Ross with Canvas 5 on a literal canvas, work quickly began to make this a reality for Canvas 11.

The Bob Ross project was the first to eventually use the pxlsFiddle template tool to automatically refresh the images and perform the mapping on the client (in browser javascript code) directly, allowing anyone to easily collaborate and even create their own Avogadro Project-style projects.


Check out the Canvas 11 archives for canvas context and full timelapse

Project 4 - The Great A'tuin - the Giant Space Turtle from Discworld - on Canvas 13

Following a suggestion from Discord user, and long-time Avogadro Project-builder, nerfarrow#7531, the fourth project was a toss-up between an MST3K screen, The Simpsons' TV, a YouTube video player, The Great A'tuin from Discworld, and - from CtrlZ - a puzzle box.
It was soon decided that The Great A'tuin would be the next project as it garned great support from those who weren't necessarily intested in the meta-canvas aspect, but loved the tur7tle with its four elephants.

This was the first project that was automatically updated by the pxlFiddle tool from start to end. Through its use, many browser-specific quirks were all but eliminated, yet finally resulting in going back to handling the mapping server-side to ensure that everybody would be building on the exact same template.
It also added intentional semi-transparent elements (the clouds) to the overlay, which partially affect the pixel colors of the canvas before being mapped to canvas colors in the pxlsFiddle template tool.


Check out the Canvas 13 archives for canvas context and full timelapse

Project 5 - Tiny YouTube Player - on Canvas 14

Though originally a puzzle box was planned for Canvas 14 - which would have fit in nicely with the original game board theme of the canvas, a happy coincident - finding space for this larger project proved difficult despite advance heads-up.
As a result, the YouTube Player project, suggested by Discord user @Yuligan#5029 - much smaller in dimension after drawing the interface by hand - was selected instead. It depicts a modern YouTube player window with the central rectangle of the canvas depicted as the video being played back.

On the last day (roughly) of the canvas, the interface was changed to being in a playback mode, with the play button removed, and play shortcut replaced with pause. A suggestion was offered to actually update the timeline interface as well, but was not integrated directly into the project files.


Check out the Canvas 14 archives for canvas context and full timelapse

Project 6 - Etch-A-Sketch - on Canvas 15

Canvas 15, being very eccentric, was not a good match for the Puzzle Box project either. Ultimately the Etch-a-Sketch suggestion by Discord user @nerfarrow#7531 was chosen. The central region of the canvas being captured on the Etch-A-Sketch surface.
An additional twist was added where instead of drawing the canvas in color, art edges would be drawn in greyscale instead.

Art edges were made using a simple edge detection method, tweaked to provide only the strongest of edges.

Toward the end of the canvas, the Etch-A-Sketch itself was highlighted in color in its projection.


Check out the Canvas 15 archives for canvas context and full timelapse

Project 7 - Avocado - on Canvas 16

For Canvas 16, the Avogadro users agreed on a marginally smaller project that also dealt with what many have come to refer to the avogadro project as: Avocado. Using a 3D recreation of the :avocado: emote from Discord, the canvas is mapped onto the avocado's flesh.

After the Avocado was built, the decision was made to remove the Avocado pit to expose more space for showing canvas art, and did so in slices, leaving a shaded hollowed out area. Check out the canvas timelapse to see it in action.

This was the second project, after The Great A'tuin, to use a semi-transparent overlay, used here to provide a gentle shading of the removed pit area.


Check out the Canvas 16 archives for canvas context and full timelapse

Project 8 - Puzzle Box - on Canvas 17

As the runner-up from the last suggestions, the Avogadro Puzzle Box was selected to be the next project for the 5th canvas. Due to a number of issues (too large for canvas, limited space, other new projects) it had to be put on the backburner.
While the A'tuin project already showed that a single pixel could map to multiple locations in The Avogadro Project mapping (the waterfalls over the edge of the world), the Puzzle Box project takes this to a new level by highlighting some areas of the canvas in larger scale on the sides of the box, as well as the 'actual size' puzzle piece on top of the box.


Check out the Canvas 17 archives for canvas context and full timelapse

Project 9 - Escher Waterfall - on Canvas 18

After the puzzle was completed and Canvas 17 headed to an end, a modified version of an older suggestion was selected for Canvas 18; an Escher Waterfall.
Based on pixel art by deviantart user Yittrium39, themselves inspired by the Waterfall work of M.C. Escher, who was in turn inspired by the Penrose Triangle (also drawn by Oscar Reutersvärd), the static part of the canvas shows an impossible figure consisting of multiple Penrose Triangles, with columns appearing to connect disparate levels of a waterfall that paradoxically feeds into itself.

This project was the first, and so far only, project that animated the mapping process to make the canvas appear from the bottom of te waterflow and 'flow' on out back to the top using additional code written specifically for this project to create a special mask image.
This was also the first project where the avocado was fully embraced as more than just a pun on the project name, with an avocado prominently on display on a banister flag, and little avocado mascots added to the structure after the flow was finished.


Check out the Canvas 18 archives for canvas context and full timelapse

Project 10 - Gargoyle on Globe - on Canvas 19

During early construction of the Escher Waterfall, it became apparent that the Gargoyle project by Simius - a frequent contributor - was not going to be made on that canvas due to a lack of space and the co-pixeler's time being taken up by moderation rules.
Shortly after it was suggested that the Gargoyle and Avogadro could collaborate on a Winter/Christmas-themed project by combining the Gargoyle and an ornament or snow globe, with the end result being a combination of both; the canvas is mapped around a sphere as on an ornament, but sits upon a pedestal as with a snowglobe. The pedestal conveys Avogadro and Simius's season's greetings to all.

When Canvas 19 was close to being announced, it became clear that it was going to be an ultrawide canvas, necessitating the canvas to be split in half to be mapped to the sphere without severe horizontal squishing.


Check out the Canvas 19 archives for canvas context and full timelapse

Project 11 - Alignment (D&D) matrix - on Canvas 20

While work was performed on the Gargoyle, new suggestions came in for a project for the next canvas. Among them, the alignment matrix from Dungeons & Dragons games - and often transformed into a meme - as suggested by nerfarrow#7531 proved to be popular.
As the only true neutral is a copy of the entire canvas, the entire canvas is mapped into the small central slot. The others were filled by the remainder of the pxls community based on their views of factions' behavior.


Check out the Canvas 20 archives for canvas context and full timelapse

Project 12 - Gem heart - on Canvas 21

An idea by Discord user IHaveNoIdea💜#9407 was re-worked into a heart shape for Canvas 21, which would span Valentine's Day. When the canvas shape itself proved to be heart-shaped, this Avogadro project was placed in a central location, copying small parts of the canvas.

Each projection is mirrored horizontally due to the gem refracting the underlying area.

This was the first project to intentionally use a tinting overlay to color the projected parts on each facet of the gemstone, and the second - after the late stages of the Etch-a-Sketch - to explicitly feature crisp copies of its recursions in the overlay to make sure they stand out in the final result.


Check out the Canvas 21 archives for canvas context and full timelapse

Project 13 - Negative - on Canvas 21a

Following the introduction of the 50 Shades of Gray gimmick, with no planned Avogadro Project, a small project measuring only 50x50 which depicts the a negative version of the canvas was built up. Despite its small size, the large number of shades of grey meant even small changes on the canvas would lead to a shade change in the project, keeping builders busy and never quite attaining an update where zero pixels would have to be drawn.

As with the Etch-a-Sketch project, special code was used to provide a negative copy of the canvas as the source for the projection.


Check out the Canvas 21a archives for canvas context and full timelapse

Project 14 - Anniversary Gift - on Canvas 22

An idea by Discord user FlyingSixtySix#4323 was built upon for a gift-wrapped box for's 2nd anniversary. Happy Birthday,!
The box depicts the final result of the first canvas, and the current canvas on its sides, and two select details from the current canvas on its top.


Check out the Canvas 22 archives for canvas context and full timelapse

Project 15 - Avogadro Anniversary - on Canvas 23

For The Avogadro Project's anniversary, the original projection idea was resurrected - with one of the 🥑 mascots holding a cake.


Check out the Canvas 23 archives for canvas context and full timelapse

Project 16 - Portals - on Canvas 24

For the 16th project, two separate but connected pieces were created, showing portals of areas near the other piece.

Shown closer together here for space reasons, the two pieces were placed far apart on the canvas.


Check out the Canvas 24 archives for canvas context and full timelapse

Project 17 - Quicksilver - on Canvas 25

For the 17th project, which didn't start until late into the canvas, options were limited as no specific projects could fit. A small, mostly empty area was chosen to put down a little spill of mercury - or quicksilver - reflecting the surrounding areas.
Because this reflection would largely end up reflecting itself, this is the first Avogadro project that is not mapped in realtime, but rather presented as separate stages.


Check out the Canvas 25 archives for canvas context and full timelapse

Project 18 - Simpsons TV - on Canvas 26

Squeeze yourself onto the couch and tune in to the longest-running TV Show pixel canvas![citation needed]

This project was suggested by nerfarrow#7531 as one of the very first project suggestions.

The mapping was intentionally distorted to resemble a classic CRT TV, and the overlay used not-so-subtle semi-transparent grey lines to make it appear as scanlines in the final result.

The project overlay was a manually reworked version of the original image used in the suggestion.


Check out the Canvas 26 archives for canvas context and full timelapse

Project 19 - ceci n'est pas un haricot - on Canvas 27

This is not a (Chicago) Bean. Reflecting the immediate surroundings of the donut-like canvas in a donut-like shape.

This is the first project where a reverse mapping was attempted; drawing a distorted project outside the Avogadro project, to be mapped un-distorted. This was done with both the Pokéball and the sunbathing Avogadro mascot manually with labor intensive but reasonable success.


Check out the Canvas 27 archives for canvas context and full timelapse

Project 20 - OsteOrb - on Canvas 28

Let the dead gaze into your pxsoul (oof) this Spooktacular october!
A crystal ball refracts a large portion of the upper canvas and reflects the immediate surrounding, held up by a skeletal hand.

Reminiscent of Project 10's Gargoyle, this was another Avogadro project that had a lot of extra non-Avogadro art.

A reverse mapping of Gaypu (the rainbow-colored smiley and cousin of Grapu) was automatically generated for this project, and hand-tweaked live on the canvas by the awesome members of the Avogadro Project.

This was also the first project to use a mixture of reflection (immediate surrounding, along the edges), and refraction (a separate, but nearby, location) in the same mapping. To prevent having to make two separate mappings and combining them together, the projection destination map was made extra large, and the mapped reflection 'dithered' onto the refraction. Combined with scaling down for the actual art piece, this still made a smooth blend.


Check out the Canvas 28 archives for canvas context and full timelapse

Project 21 - Chicago Bean / Cloud Gate - on Canvas 29

Similar to the Chicago Bean - officially known as the 'Cloud Gate' - this art reflects the surrounding canvas.

Unlike Projects 1, 2, and 15 where the surrounding was reflected as if seen from a top-down perspective, the bean reflects the canvas from a birds-eye view, with some bending of physics to get the reflection at the top to work.

A sutle darkening of the edges was added to provided greater contrast with the surrounding canvas.

Canvas 29's size necessitated a more fine-grained approach to the Avogadro projection, as the existing sources - a 1024x1024 look up table - would result in blurry reflected pixels. A 4096x4096 table was created in its stead, making the reflection much clearer.


Check out the Canvas 29 archives for canvas context and full timelapse

Project 22 - Ornament - on Canvas 30

An ornate Christmas tree Ornament, double-reflecting the surrounding canvas, to get everyone in the Christmas spirit.


Check out the snapshots for canvas context and timelapse

Want to help build?
Because Avogadro Projects constantly update, there is no single fixed template. Instead, Avogadro-specific code is included in the pxlsFiddle Templating tool which automatically generates images and links every 15 minutes.
While this can be accessed directly, the most convenient route is through a page that loads the resulting image as a template directly into a frame every 15 minutes without any of the pxlsFiddle Templating tool settings getting in the way:

Technical Stuff

Rather than just copying the canvas to a smaller version of itself, this is done by 'projecting' the canvas onto a shape in a manner similar to texture mapping, but without the need for any 3D graphics.
Using texture mapping, a source image can be mapped into different shapes, typically onto 3D objects. Whereas texture mapping in 3D graphics programs uses UV coordinates to determine which pixel in the texture should be used for a given point on that object, here an image with red-to-green gradients and blue blocks is used to deterine which pixel in the source image should be used for a given color in those gradient-blocks.
The gradient-block image can be scaled, rotated, warped, distorted, and even be used as a texture map in a 3D graphics program to make a new image which the source image gets mapped to.
The final result can then be combined with an optional overlay image.

To see how pixels map from the canvas to the The Avogadro project, and vice versa, see: Avogadro Project: Where Am I?

Want to make your own destination image but not sure how? Use the gradient-block image as your source. After scaling/distorting, your image should still consist of only the same color values.
If you are using the image as a texture map in a 3D graphics editor, you may wish to disable any texture tiling and filtering to prevent blocks on the right edge from filtering to blocks on the left edge, and make sure that the shader is fully radiant / self-illuminating (i.e. not affected by lighting/shadows). Render the image not to your final image size, but to 4 times larger, so that the end-result image can be filtered down to the desired size for a higher quality result.

The first Avogadro Project, for example consisted of a plane and a paraboloid of the desired size and position set on that plane, with the gradient-block image texture mapped onto the plane, and the paraboloid made reflective, so that it would reflect the gradient-block which, once mapped, would end up looking like it was reflecting the canvas. This reflective paraboloid was then rendered from straight above out to the destination image.