class generativeArt { //class to generate art on canvas constructor() { this.move_art = -200; this.xRot = 0.01; //rotation speed about the x-axis this.yRot = 0.01;//rotation speed about the y-axis this.drawBox();// } drawBox() { //function to draw rotating intertwined boxes push();//give the box the below properties till it meets pop rotateX(frameCount * this.xRot); //rotate about x-axis rotateY(frameCount * this.yRot); //rotate about y-axis stroke(0); noFill(); box(3, 3, 30); //draw box //second box rotateX(frameCount * this.xRot); rotateY(frameCount * this.yRot); stroke(255, 255, 255); noFill(); box(3, 3, 30); pop(); //resets the box properties to its original properties } art() { //function to create rotating boxes at different locations on the canvas for (let i = 10; i < 1000; i += 50) { for (let j = 20; j < 1000; j += 100) { push(); translate(j - i, i); //translate the box to different positions determined by i and j this.drawBox(); pop(); } } for (let i = 10; i < 1000; i += 50) { for (let j = 20; j < 1000; j += 100) { push(); translate(i, j - i); //translate the box to different positions determined by i and j this.drawBox(); pop(); } } for (let a = -350; a < 350; a += 30) { push(); translate(a + 10, (this.move_art+= 0.001)); //translate the box to different positions determined by a but moves the boxes down the y axis this.drawBox(20, 50, 10); pop(); } } } function setup() { createCanvas(700, 400, WEBGL); background(220); my_art = new generativeArt(); } function draw() { my_art.drawBox(); my_art.art(); } //inspiration //from the previous homework created using boxes in 3D. //challenges faced: //I had a difficulty in navigating the 3D space difficulty in resetting the movement from the top of the canvas. //Also, it was a hustle figuring out how to make sure the boxes stay in a fixed position