Metro Cube

Nazheef Rahman

 

Artist statement:

This Generative art is heavily inspired by the DVD screen saver with its diagonal aesthetics. At first, my goals were to have square shapes appear from the middle of the canvas which randomly sets itself to a random x/y towards the edge of the canvas which they are stacked beside each other until the canvas is full or reaches the middle where it resets/refreshes the animation loop. While exploring the code I came to see that while the shapes are moving exponentially it draws a trail, I seem to like the concept/aesthetics so I built onto it where the shape would bounce off the canvases boundaries with different colors and sizes added on to it with each click.

dvd

 

 

HTML: https://pastebin.com/DxqjgMs8

Javascript: https://pastebin.com/W8LYxx3j 

CSS: https://pastebin.com/Z71DSpjM

 

Process:

atprosses2

You will first need your variables, Running which is to follow your mouse cursor, canvas, context, your width and height of the canvas, colors, the initial array + count/er, and finally your shape which in this case is a square. Later on, you will end up adding more variables to your code so this may vary.

atprosses3

This will be your code for the canvas, a touch I did was to apply the border design.

atprosses6

Sometimes you will want to have random variables for many uses such as size or color, this function will help you with choosing its random value.

atprosses5

atprosses4

These functions will be your draw functions, the first one will be for your desired shape or object. The second function will be my core draw function where it basically is telling it to bounce when the square touches the width and height (boundary) of the canvas.

atprosses7

For human interactions, you will need to add ‘listeners’ which in this case is the event listeners. ‘Mousemove’ will be your shape following your mouse cursor and ‘click’ will be your randomly generated shape after everytime you click within the canvas.

Leave a Reply