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 pxls.space canvas on pxls.space 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 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 (via an edge detection method) would be drawn in greyscale instead.

+
=


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.

+
=


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 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.
Visit https://pxlsFiddle.com/?avogadro. Once it has finished processing, you'll see an iframe with the pxls.space canvas and template loaded that will automatically update every 15 minutes, so you never have to refresh manually or press any buttons.

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.

+
=

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.
Visit https://pxlsFiddle.com/?avogadro. Once it has finished processing, you'll see an iframe with the pxls.space canvas and template loaded that will automatically update every 15 minutes, so you never have to refresh manually or press any buttons.


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 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.