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