AMC #8 - Pictures with All Colours
***************************************
Images with All Colours. Pictures with All Colors. Images with All Colors.

The last forum posts for AMCs (Advanced Maths Challenges) were posted in December 2017 for AMC #11 and AMC #12.
There never was an AMC #8, AMC #9 or AMC #10, so this challenge may help fill the gap.

The “Pictures with All Colours” challenge is to make interesting 256 x 128 (=32,768) pixel pictures with 32,768 different evenly spaced colours.


32 x 32 x 32 = 32,768 so our 32,768 colours are made up of all combinations of three colour components each with 32 possible values.

You can use either the hsb colour model (hue, saturation, brightness) or the RGB colour model (Red, Green, Blue).

hsb - use the 32 colour values to set the Color, Saturation and Brightness components.
RGB - use the 32 colour values to set the Red, Green and Blue components.

hsb - use 3,6,9,12 … 90,93,96 as your 32 evenly spaced values. (as Pen Color, Saturation and Brightness range from 0 to 100 in Scratch).
RGB - use 0,8,16,24 … 232,240,248 as your 32 evenly spaced values. (as Red, Green and Blue components of RGB colours range from 0 to 255).

You can store your 32 values as 0-31 or 1-32 and only convert them to either their hsb or RGB values in your “set pen color to …” block.


Notes
*******
- Please add your projects and any resources to the Pictures with All Colours studio: https://scratch.mit.edu/studios/13731433/
- The hsb colour spectrum produced is significantly darker than the RGB colour spectrum produced with the above “evenly spaced” component values.
- I would like a special category for projects that don't have any lists in them!
- You may wish to try forkphorus to run your projects faster while testing: https://forkphorus.github.io/forkphorus/
- Can Scratch become the best repository on the internet for Pictures with All Colours projects and code?


History and Internet Examples
***********************************
The original “Images with all colors” challenge was posted on the website stackexchange.com in 2014 and any programming language could be used.
There were no entries in Scratch
I highly recommend that you look at the website which includes the entries and more images added later:
https://codegolf.stackexchange.com/questions/22144/images-with-all-colors

You may make Scratch versions of any projects on the websites.

The winning entry, “Rainbow Smoke” by Jozsef Fejes, was so good that it featured in the New Scientist magazine:
https://www.newscientist.com/article/dn25167-computer-paints-rainbow-smoke-with-17-million-colours/
The image was 4096 x 4096 = 16,777,216 pixels and colours.

Here is a picture of “Rainbow Smoke”:




There is a website for Images with all colours: https://allrgb.com/
“The objective of allRGB is simple: To create images with one pixel for every RGB color (16777216); not one color missing, and not one color twice”.


Scratch Example Projects with 32,768 Pixels and 32,768 Colours
**************************************************************************

The studio https://scratch.mit.edu/studios/13731433/ includes a few simple example projects:


A project with all 32,768 hsb colours: A project with all 32,768 RGB colours:



A project with all hsb colours shuffled randomly: A project with all RGB colours shuffled randomly:




It is sometimes hard to believe that the colours are the same in two projects when they are arranged differently.
For example, if all white pixels are mixed with red pixels we only see pink, but if the white pixels are grouped separately in another project we see them as white.

The default and random projects for RGB (or hsb) above have the same coloured pixels arranged differently.
Arranging the colours is the essence of this challenge.


A project with all RGB colours and no lists used:



More Notes
*************
- In my projects, I display my 256 x 128 pixel pictures at double the size, ie. 512 x 256 pixels.
This makes pictures larger for better viewing.
As 512 pixels don't fit on a 480 pixel wide stage, 8 pixels of the original picture (before resizing) are lost off either side.

- You may make Scratch versions of any projects on internet websites.
I would particularly like to see if anyone can make a “Rainbow Smoke” project with “flowers” of colour (as opposed to radiating lines).
(See the “Rainbow Smoke” picture above).
- I would also like to see smooth colour gradients or colour wheel type projects - maybe other Scratchers could then use these resources.

- You may preload some lists in your projects to save execution time, but please include the code that produced the lists.
This would be especially useful if you presort colour lists as sorting 32,768 items can be slow.
Time estimates to produce such lists would be nice. The code to produce the lists could be in a separate sprite.
Sorted lists could be used as resources by other Scratchers.


Why 256 x 128 pixel images with 32,768 colours?
********************************************************
hsb - Each color, saturation, brightness component in Scratch can take values 0-100 which would allow 100 x 100 x 100 = 1,000,000 colors.
RGB - Each red, green and blue component can take values 0-255 which would allow 256 x 256 x 256 = 16,777,216 colors.

But the Scratch Stage only supports a maximum of 480 x 360 pixels = 172,800 pixels.
That is why this challenge uses evenly spaced colours rather than all colours.

It is easiest to use a power of 2 to easily control RGB colours.

64x64x64 = 262,144 is too many colours for the Scratch stage.
So I chose 32x32x32 = 32,768.

It is fortunate that 32 values can be spread reasonably over component ranges for both hsb 0-100 and rgb 0-255.
We use a 256x128 pixel rectangular picture as a square picture is not possible (the square root of 32,768 is not an integer).


If you wish, you can make a lower resolution 64x64 (4,096 pixel) square picture with 16 values for each colour component. (16x16x16 = 4,096).


The equations below show why you can make a square from 16x16x16 colours but not 32x32x32 colours.
No further explanation provided

32 x 32 x 32 = 32,768 = 256 x 128
(2^5)^3 = 2^15 = (2^8) x (2^7)

16 x 16 x 16 = 4,096 = 64 x 64
(2^4)^3 = 2^12 = (2^6) x (2^6)


How to Implement 32,768 Evenly Spaced Colours for this Challenge
*****************************************************************************
32 x 32 x 32 = 32,768 representing 32,768 colours made up of three components each with 32 possible values.


* Do all programming using values 1-32 (or 0-31).


Then you can add three lines (hsb) or a single line (RGB) to convert these numbers to a Pen color as below:.
In fact, as we use 32 component values in both color schemes, we can change from one to the other just by switching the lines that set the Pen color.

If you are using the values 1-32:
——————————————
hsb:
set pen color to Hue * 3
set pen color to Saturation * 3
set pen color to Brightness * 3

RGB:
set pen color to ((Red - 1) * 8 * 65536) + ((Green - 1) * 8 * 256) + ((Blue - 1) * 8)


If you are using the values 0-31:
——————————————
hsb:
set pen color to 3 + (Hue * 3)
set pen color to 3 + (Saturation * 3)
set pen color to 3 + (Brightness * 3)

RGB:
set pen color to (Red * 8 * 65536) + (Green * 8 * 256) + (Blue * 8)

With my compulsive behaviour, I have made a few of these “Pictures with All Colours” projects while developing the challenge.

Here is a link to one of them called “Rainbow Smoke 2”:

I am interested to see what everyone else will make.

You are welcome to make many projects!

Here is the studio link again: https://scratch.mit.edu/studios/13731433/

Reserved Post

As you might have guessed from my previous entries to your challenges, I not that much into generative art: But even for me this could be an interesting challenge. Here i just brute forced it: If switching 2 random pixels makes the picture look more like the target picture, do it.








As you can see, the black white picture looks much better than the van gogh picture, where all the red had to go into his face (while in the b/w picture the red pixels are randomly distributed, so they cancel out with the greens and blues).
With some clever dithering it should be possible to hide some of the colors you have to much of in the rest of the image. I will think about it.

MartinBraendli wrote:

As you might have guessed from my previous entries to your challenges, I not that much into generative art: But even for me this could be an interesting challenge. Here i just brute forced it: If switching 2 random pixels makes the picture look more like the target picture, do it.

I was intending this to be a challenge in Scratch

It would be nice if you translated one or more of these.
Then everyone will have access to the original picture list of colours too, so they can make variations.

Scratch-Minion wrote:

I was intending this to be a challenge in Scratch

It would be nice if you translated one or more of these.
Then everyone will have access to the original picture list of colours too, so they can make variations.

I intended to redo this in Scratch, however as long as I'm just tinkering i prefer Python, so i don't have to wait ages just to test small changes.

A few examples I have added to the studio https://scratch.mit.edu/studios/13731433/

Another “Rainbow Smoke” type image: A “Rainbow Smoke” Fail:




A colour gradient: An Intereference Pattern:


* Note that I have fixed my links in earlier posts.

NPR Guy has arrived! (by Layzej )

Lots of different interesting arrangements of colours by shuffling bits! (by PutneyCat)

Eye Candy

A few more examples added to the studio https://scratch.mit.edu/studios/13731433/


Hilbert Curve: Newton Cubic:


Circle Packing: Sierpinski Triangles:

As I said in my first post with the challenge, I would like to see if anyone can make a “smooth” colour wheel (or smooth colour gradient).
My colour wheel is only approximate and speckled with black: