Creative Coding with JavaScript final works

I created some final works using images and I also experimented with the transformation sketches from earlier in the course by changing values such as the number of lines and the radius.

VS Code
Canvas Sketch
Images

In the final exercise I had learned how to use an image using a Promise in JavaScript so the next aim was to generate the image using the original colour pixels. I was unsure how to do this but had a look at someone else's code and worked it out from there. When I wasn't sure, I researched what each line of code's purpose was to understand how the end result was generated.

Here is an explanation and an image of a snippet of the code:

The pixel data is taken from the image and the colours are stored in RGBA format. Each pixel has values for red, green, blue, and transparency (alpha). The glyphs are generated in terms of brightness, so for example, darker pixels got one type of glyph, lighter ones got another.

To make sure the glyphs matched the original image colors, the red, green, and blue values from the image have to be the same when drawing them. The whole image is broken into a grid of small squares (cells), and each one gets replaced with a colored glyph based on the original pixel’s brightness.

Next I experimented with different images and also changed some values to get different results. I experimented with changing the cell value (which changes the size of the glyphs as it is changing pixel grids). I also changed the canvas size from [1080, 1080] to [2048, 2048] in some instances as sometimes the cell size worked better with a bigger canvas. I also experimented with using different glyphs, and swapped '+' and '/' with each other. I found that '/' worked better with some images and I ended up generating some really cool results. For some of my favourite images I used various album covers such as Of Monsters and Men, BTS, and The Naked and Famous, as well as artworks from Frida Kahlo, Vincent Van Gogh, and M.C. Escher.

I used the source code from sketch-02.js (since I had previously changed values when experimenting earlier and forgot what the original values were). I experimented by changing the values of the width and height (const w and const h), the number of lines (const num), the line width (context.lineWidth = random.range), and the size and angles of the circle (context.arc).

I also experimented with different colours and changed the background to black and the foreground to white (context.fillStyle), which ended up making some really interesting results with everything combined.

Generated circles from experimenting with the number of lines, line width, radius, and angles.