Project-03-Dynamic-Drawing – Page 6 – [OLD FALL 2019] 15-104 • Introduction to Computing for Creative Practice

Mihika Bansal – Project 03 – Dynamic Drawing

/*
Mihika Bansal 
Section E 
mbansal@andrew.cmu.edu
Project-01
*/
var angle1 = 0; //rotates one direction
var angle2 = 0; //rotates the other direction
var rgb1 = 0; //random color generator 1
var rgb2 = 0; //random color generator 2
var dimension = 20; //size of elements
function setup() {
    createCanvas(600, 480);
  }

function draw() {

    rgb1 = random(0, 300); //randomizing here creates the flashing effect 
    rgb2 = random(0,275); 
    dimension = random(5, 60);
    
    if (mouseX < width / 2) { //determine if the mouse is on the left of the canvas 
        background(0, 0, 51);
        push();
        rotate(radians(angle1)); //creating the rows of shapes in the top left corner
        fill(rgb1 * 0.2, rgb2 * 0.5, rgb1 * 0.8); // the multiplication randomizes the color more
        rect(mouseY * 0.8, mouseY * 0.5, dimension, dimension);
        fill(rgb2 * 0.5, rgb2 * 0.3, rgb1 * 0.6); 
        ellipse(mouseY * 0.3, mouseY * 0.2, dimension, dimension); //the distance from the rotation point is dependent on the position of mouse y 
        fill(rgb1 * 0.85, rgb2 * 0.9, rgb1 * 0.7);
        ellipse(mouseY, mouseY, dimension * 1.5, dimension * 1.5); 
        fill(rgb1 * 0.7, rgb2 * 0.65, rgb1 * 0.7);
        rect(mouseY * 1.3, mouseY * 1.3, dimension * 2, dimension * 2);
        pop();
        angle1 += 2; 

        push(); 
        translate(width - 5, height - 5); //creating the line of shapes in the bottom right corner
        rotate(radians(angle2));
        fill(rgb1 * 0.2, rgb2 * 0.5, rgb1 * 0.8);
        rect(mouseY * 0.8, mouseY * 0.5, dimension, dimension);
        fill(rgb2 * 0.5, rgb2 * 0.3, rgb1 * 0.6); 
        ellipse(mouseY * 0.3, mouseY * 0.2, dimension, dimension); 
        fill(rgb1 * 0.85, rgb2 * 0.9, rgb1 * 0.7);
        ellipse(mouseY, mouseY, dimension * 1.5, dimension * 1.5); 
        fill(rgb1 * 0.7, rgb2 * 0.65, rgb1 * 0.7);
        rect(mouseY * 1.3, mouseY * 1.3, dimension * 2, dimension * 2);
        pop(); 
        angle2 -= 2; 
    }
    else { //when mouse is on right of screen
        background(77, 0, 0);
        push();
        rotate(radians(angle1));
        fill(rgb1 * 0.25, rgb2 * 0.4, rgb1 * 0.71);
        rect(mouseY * 0.8, mouseY * 0.57, dimension, dimension);
        fill(rgb2 * 0.5, rgb2 * 0.3, rgb1 * 0.6); 
        ellipse(mouseY * 0.3, mouseY * 0.2, dimension, dimension); 
        fill(rgb1 * 0.8, rgb2 * 0.9, rgb1 * 0.7);
        ellipse(mouseY, mouseY, dimension * 1.5, dimension * 1.5); 
        fill(rgb1 * 0.7, rgb2 * 0.65, rgb1 * 0.7);
        rect(mouseY * 1.3, mouseY * 1.3, dimension * 2, dimension * 2);
        pop();
        angle1 -= 2; 

        push(); 
        translate(width - 5, height - 5);
        rotate(radians(angle2));
        fill(rgb1 * 0.2, rgb2 * 0.54, rgb1 * 0.8);
        rect(mouseY * 0.86, mouseY * 0.5, dimension, dimension);
        fill(rgb2 * 0.5, rgb2 * 0.35, rgb1 * 0.64); 
        ellipse(mouseY * 0.3, mouseY * 0.2, dimension, dimension); 
        fill(rgb1 * 0.85, rgb2 * 0.9, rgb1 * 0.7);
        ellipse(mouseY, mouseY, dimension*1.5, dimension * 1.5); 
        fill(rgb1 * 0.77, rgb2 * 0.65, rgb1 * 0.7);
        rect(mouseY * 1.3, mouseY * 1.3, dimension * 2, dimension * 2);
        pop(); 
        angle2 += 2; // changes angle 
       
    }

}

With this piece I worked with direction of the rotation being dependent on the position of the mouse. I also made the distance of each element dependent on the y position of the mouse. This project was interesting and helpful in understanding the random function and the rotation function.

Emma NM-Project-03(Dynamic Drawing)

Emma’s dynamic drawing

I knew I wanted to create a dynamic drawing with circles so I started there and then moved into changing size, position, translation, and rotation based on mouse position. I added one more feature of if you click the screen you can change between circles and squares.

/* 
Emma Nicklas-Morris
Section B
enicklas@andrew.cmu.edu
Dynamic Drawing
*/

var b = 255;
var r = 200;
var cir = true;

function setup() {
    createCanvas(640, 480);
    
    
}

function draw() {
    background("black");
    b = mouseX/3;
    r = mouseY/2;

    // Changes dot color as you move your mouse
    // Red color is controlled by mouseY and Blue is controlled by mouseX position
    fill(r, 50, b);
    noStroke();

    // Dots increase if mouse moves right or up. 
    // Dot position depends on mouse position from the width or height
    if (cir) {
        ellipse(width-mouseX/2, height-mouseY/2, mouseX/2, mouseX/2); 
        ellipse(width-mouseX, height-mouseY, mouseY/2, mouseY/2);
    }
    else {
        rect(width-mouseX/2, height-mouseY/2, mouseX/2, mouseX/2); 
        rect(width-mouseX, height-mouseY, mouseY/2, mouseY/2);
    }
    
    // Create smaller dots to the left and up on the grid. Follows same principles as above
    push();
    translate(-width/3, -height/3);
    if (cir) {
        ellipse(width-mouseX/2, height-mouseY/2, mouseX/3, mouseX/3);
        ellipse(width-mouseX, height-mouseY, mouseY/3, mouseY/3);
    }
    else {
        rect(width-mouseX/2, height-mouseY/2, mouseX/3, mouseX/3);
        rect(width-mouseX, height-mouseY, mouseY/3, mouseY/3);
    }
    pop();

    // Rotates grid based on mouseX position and follows principles above. Dots are smaller than above
    push();
    translate(-width/3, -height/3);
    rotate(radians(mouseX/3));
    if (cir) {
        ellipse(width-mouseX/2, height-mouseY/2, mouseX/4, mouseX/4);
        ellipse(width-mouseX, height-mouseY, mouseY/4, mouseY/4);
    }
    else {
        rect(width-mouseX/2, height-mouseY/2, mouseX/4, mouseX/4);
        rect(width-mouseX, height-mouseY, mouseY/4, mouseY/4);
    }
    pop();

    // Rotates grid based on mouseY position. Follows same principles as above
    push();
    translate(width/3, 0);
    rotate(radians(mouseY/4));
    if (cir) {
        ellipse(width-mouseX/2, height-mouseY/2, mouseX/4, mouseX/4);
        ellipse(width-mouseX, height-mouseY, mouseY/4, mouseY/4);
    }
    else {
        rect(width-mouseX/2, height-mouseY/2, mouseX/4, mouseX/4);
        rect(width-mouseX, height-mouseY, mouseY/4, mouseY/4);
    }
    pop();

    

}

// By clicking the mouse you switch back and forth between circles and squares
function mousePressed() {
    if (cir == true) {
        cir = false;
    }

    else {
        cir = true;
    }
	
}

Fanjie Jin-Project-03-Dynamic-Drawing

fjin

// Fanjie Mike Jin
// Section C
//fjin@andrew.cmu.edu
//Project-03-Dynamic Drawing

var rgb = 255 / 640;
var rgb2 = 255 / 480;
var angle = 0;
var size = 15;


function setup(){
    createCanvas(640,480);
}

function draw(){
//change the background color
    size = constrain(size, 10, 80)
    background(255 - mouseY * rgb, 255- mouseX * rgb2, 255);
  
//ellipse1
    if (mouseX > width / 2){
      rectMode(CENTER)
      fill(255, 255 - mouseY * rgb2, 255 - mouseX * rgb);
      noStroke();
      push();
      translate(width / 2, height / 2);
      rotate(radians(angle));
      ellipse(150, 0, size, size);
      ellipse(-150, 0, size, size);
      ellipse(0, 150, size, size);
      ellipse(0, -150, size, size);
      ellipse(100, 100, size, size);
      ellipse(-100, 100, size, size);
      ellipse(-100, -100, size, size);
      ellipse(100, -100, size, size);
      pop();
      
//ellipse2       
      fill(255, 255 - mouseY * rgb2, 255 - mouseX * rgb);
      noStroke();
      push();
      translate(width / 4, height / 4);
      rotate(radians(angle));
      ellipse(150, 0, size, size);
      ellipse(-150, 0, size, size);
      ellipse(0, 150, size, size);
      ellipse(0, -150, size, size);
      ellipse(100, 100, size, size);
      ellipse(-100, 100, size, size);
      ellipse(-100, -100, size, size);
      ellipse(100, -100, size, size);
      pop();
      
//ellipse3     
      fill(255, 255 - mouseY * rgb2, 255 - mouseX * rgb);
      noStroke();
      push();
      translate(3 * width / 4, 3 * height / 4);
      rotate(radians(angle));
      ellipse(150, 0, size, size);
      ellipse(-150, 0, size, size);
      ellipse(0, 150, size, size);
      ellipse(0, -150, size, size);
      ellipse(100, 100, size, size);
      ellipse(-100, 100, size, size);
      ellipse(-100, -100, size, size);
      ellipse(100, -100, size, size);
      pop();
      
//ellipse4   
      fill(255, 255 - mouseY * rgb2, 255 - mouseX * rgb);
      noStroke();
      push();
      translate( width / 4, 3 * height / 4);
      rotate(radians(angle)); 
      ellipse(150, 0, size, size);
      ellipse(-150, 0, size, size);
      ellipse(0, 150, size, size);
      ellipse(0, -150, size, size);
      ellipse(100, 100, size, size);
      ellipse(-100, 100, size, size);
      ellipse(-100, -100, size, size);
      ellipse(100, -100, size, size);
      pop();
      
//ellipse5 
      fill(255, 255 - mouseY * rgb2, 255 - mouseX * rgb);
      noStroke();
      push();
      translate(3 * width / 4, height / 4);
      rotate(radians(angle));
      ellipse(150, 0, size, size);
      ellipse(-150, 0, size, size);
      ellipse(0, 150, size, size);
      ellipse(0, -150, size, size);
      ellipse(100, 100, size, size);
      ellipse(-100, 100, size, size);
      ellipse(-100, -100, size, size);
      ellipse(100, -100, size, size);
      pop();
}
  
    if (mouseX < width / 2){
      fill(255 - mouseX * rgb, 255- mouseY * rgb2, 100);
      noStroke();
      push();
      
//rectangle 1     
      translate(width / 2, height / 2);
      rotate(radians(angle));
      rect(150, 0, size, size);
      rect(-150, 0, size, size);
      rect(0, 150, size, size);
      rect(0, -150, size, size);
      rect(100, 100, size, size);
      rect(-100, 100, size, size);
      rect(-100, -100, size, size);
      rect(100, -100, size, size);
      pop();
      
//rectangle 2
      noStroke();
      push();
      translate(width / 4, height / 4);
      rotate(radians(angle));
      rect(150, 0, size, size);
      rect(-150, 0, size, size);
      rect(0, 150, size, size);
      rect(0, -150, size, size);
      rect(100, 100, size, size);
      rect(-100, 100, size, size);
      rect(-100, -100, size, size);
      rect(100, -100, size, size);
      pop();
      
//rectangle 3
      noStroke();
      push();
      translate(3 * width / 4 , height / 4);
      rotate(radians(angle));
      rect(150, 0, size, size);
      rect(-150, 0, size, size);
      rect(0, 150, size, size);
      rect(0, -150, size, size);
      rect(100, 100, size, size);
      rect(-100, 100, size, size);
      rect(-100, -100, size, size);
      rect(100, -100, size, size);
      pop();
      
//rectangle 4
      noStroke();
      push();
      translate(width / 4, 3 * height / 4);
      rotate(radians(angle));
      rect(150, 0, size, size);
      rect(-150, 0, size, size);
      rect(0, 150, size, size);
      rect(0, -150, size, size);
      rect(100, 100, size, size);
      rect(-100, 100, size, size);
      rect(-100, -100, size, size);
      rect(100, -100, size, size);
      pop();
      
//rectangle 5
      noStroke();
      push();
      translate(3 * width / 4, 3 * height / 4);
      rotate(radians(angle));
      rect(150, 0, size, size);
      rect(-150, 0, size, size);
      rect(0, 150, size, size);
      rect(0, -150, size, size);
      rect(100, 100, size, size);
      rect(-100, 100, size, size);
      rect(-100, -100, size, size);
      rect(100, -100, size, size);
      pop();  
//Change the size of the object
}
    if (mouseX < width / 4){
      size += 1.5;  
}
//Change the size of the object  
    if (mouseX > width / 4 & mouseX < width / 2 ){
      size += -1.5;    
}
//Change the size of the object  
    if (mouseX > width / 2 & mouseX < width * 0.75){
      size += 1; 
}
//Change the size of the object 
    if (mouseX > width * 0.75){
      size -= 1;
}
//Change the speed of the object 
   if (mouseY > height / 2){
      angle += 2; 
}
//Change the speed of the object
   if (mouseY < height / 2){
      angle += 6;
}
//Change the speed of the object
   if (mouseX > width / 2){
      angle += 4; 
}
//Change the speed of the object
   if (mouseX < width / 2){
      angle += 2;
}
}

I have been experimenting to create a dynamic drawing that focuses on rotation. When mouse is moved on the canvas, the size and color of the object, as well as the speed and shapes would be changed.

Joanne Chui – Project 03 – Dynamic Drawing

proj3code

/*
Joanne Chui
Section C 
Project 3
*/

function setup(){
	createCanvas(480, 640);
}

var angle = 0;
var elbow = 215;
var wrist = 220;
var height = 20;

function draw(){
	background(204, 166, 149);
	strokeWeight(0);
	//view
	fill(215, 195, 210);
	rect(130, 130, 200, 300);
	fill(240, 220, 235);
	ellipse(155, 190, 20, 20);//cloud1
	ellipse(175, 190, 30, 30);
	ellipse(195, 190, 25, 25);
	ellipse(215, 190, 20, 20);
	ellipse(250, 250, 15, 15);//cloud2
	ellipse(270, 250, 35, 35);
	ellipse(290, 250, 20, 20);
	ellipse(305, 250, 15, 15);
	//blinds
	if(mouseY > 130 & mouseY < 430){
		for(var i = 0; i < 30; i++){
			if(i % 2 == 0){
				fill(200, 186, 183);
			}
			else {
				fill("white");
			}
			rect(130, 130 + i * ((mouseY - 130)/30), 200, (mouseY - 130)/30); 
		}
	}
	//windowsill
	stroke(144, 120, 109);
	strokeWeight(10);
	line(130, 430, 130, 130);
	line(115, 130, 345, 130);
	line(330, 130, 330, 430);
	line(345, 430, 130, 430);
	strokeWeight(0);
	if(mouseY > 430){
		background(144, 120, 109);
		fill(200, 186, 183);
		rect(130, 130, 200, 300);
		fill(150, 140, 140);
		for(var i = 0; i < 30; i += 2){
				rect(130, 130 + i*10, 200, 10);
		}
		//lighton
		fill(252, 247, 187, 80);
		beginShape();
		vertex(360, 317);
		vertex(290, 305);
		vertex(270, 470);
		vertex(375, 470);
		endShape();
		//windowsilldark
		stroke(110, 88, 78);
		strokeWeight(10);
		line(130, 430, 130, 130);
		line(115, 130, 345, 130);
		line(330, 130, 330, 430);
		line(345, 430, 130, 430);
		strokeWeight(0);
	}
	//DESK
	fill("black");
	rect(30, 470, 400, 30, 7);
	rect(40, 500, 30, 140);
	rect(390, 500, 30, 140);
	//LAMP
	fill(170, 125, 125);
	rect(340, 460, 80, 10, 3);
	strokeWeight(13);
	stroke(170, 125, 125);
	line(380, 460, 360, 320);
	strokeWeight(10);
	line(360, 317, 290, 310);
	//GIRL
	//neck
	strokeWeight(0);
	fill(102, 83, 63);
	stroke(102, 83, 63);
	rect(135, 330, 40, 50);
	//sweater
	fill(102, 29, 53);
	stroke(102, 29, 53);
	rect(130, 365, 50, 20, 5);
	rect(90, 380, 130, 40, 20);
	//writing arm
	strokeWeight(30);
	line(210, 395, elbow, 470);
	line(elbow, 470, wrist, 470);
	stroke("black");//pen
	strokeWeight(5);
	line(wrist + 10, 410, wrist + 10, 470);
	fill(102, 83, 63);//hand
	strokeWeight(0);
	ellipse(wrist + 10, 470, 35, 35);
	if (mouseX > 210 & mouseX < 300){
		wrist = mouseX;
		elbow = .5 * (wrist - 215) + 215;
	}
	//chair
	fill(40, 20, 15);
	rect(80, 580, 25, 100);
	rect(205, 580, 25, 100);
	fill(43, 64, 69);
	stroke(43, 64, 69);
	rect(70, 400, 170, 130, 10);
	fill(32, 48, 50);
	rect(70, 525, 170, 60, 10);
	//head
	push();
	translate(157, 315);
	rotate(angle - QUARTER_PI);
	stroke(102, 83, 63);//face
	fill(102, 83, 63);
	ellipse(0, 0, 70, 80);
	strokeWeight(1); //bun
	stroke(60, 38, 33);
	fill(60, 38, 33);
	ellipse(-7, -5, 80, 100);
	fill(84, 53, 45);
	ellipse(-27, -50, 50, 50);
	fill(60, 38, 33);
	strokeWeight(3);
	ellipse(-37, -55, 20, 30);
	noFill();
	arc(-27, -54, 35, 40, PI + HALF_PI, PI);
	fill(102, 83, 63);//ear
	stroke(102, 83, 63);
	ellipse(28, 5, 10, 22);
	noFill();
	stroke(60, 38, 33);
	arc(37, -5, 10, 50, HALF_PI, PI); //hair tendril
	fill(36, 24, 24); //bun
	stroke(36, 24, 24);
	ellipse(-32, -55, 8, 15);
	stroke("white");//airpods
	fill("white");
	ellipse(30, 7, 3, 8);
	line(28, 7, 30, 17);
	//headbob
	if (mouseX > 0 & mouseX < 480){
		angle = mouseX * (1/280);
	}
	pop();


}

I was interested in creating two different scenes, and having different parts of the drawing activated based on if the mouse was moving vertically or horizontally.

Raymond Pai-Project-03

Random shapes and colors in each quadrant. Center circle shows the color pallet of the shapes.

sketch

//Raymond Pai
//Section D
//rpai@andrew.cmu.edu
//Project-03
var angle = 0;
var r = 200
var g = 200
var b = 200

function setup() {
    createCanvas(600, 600);
    background(0);
}

function draw() {
      //Q1
      if (mouseX > 300 & mouseY < 300){
        r = random(100, 200);
        g = random(200, 300);
        b = random(0, 105);
        fill(r, g, b); // control rect color explicitly
        stroke(0);
        strokeWeight(6);
        push();
        translate(mouseX, mouseY);
        rotate(radians(angle));
        ellipseMode(CENTER); // center rect around 0,0
        ellipse(0, 0, 1000, 200);
        pop();
        angle = angle + 5;
      }
      //Q2
      if (mouseX < 300 & mouseY < 300){
        r = random(200, 255);
        g = random(10, 25);
        b = random(200, 255);
        fill(r, g, b); // control rect color explicitly
        stroke(0);
        strokeWeight(6);
        push();
        translate(mouseX, mouseY);
        rotate(radians(angle));
        ellipseMode(CENTER); // center rect around 0,0
        ellipse(0, 0, 40, 200);
        pop();
        angle = angle + 5;
      }
      //Q3
      if (mouseX < 300 & mouseY > 300){
        r = random(100, 255);
        g = random(200, 255);
        b = random(200, 255);
        fill(r, g, b); // control rect color explicitly
        stroke(0);
        strokeWeight(6);
        push();
        translate(mouseX, mouseY);
        rotate(radians(angle));
        ellipseMode(CENTER); // center rect around 0,0
        ellipse(0, 0, 300, 20);
        pop();
        angle = angle + 5;
      }
      //Q4
      if (mouseX > 300 & mouseY > 300){
        r = random(10, 25);
        g = random(10, 250);
        b = random(200, 255);
        fill(r, g, b); // control rect color explicitly
        stroke(0);
        strokeWeight(6);
        push();
        translate(mouseX, mouseY);
        rotate(radians(angle));
        ellipseMode(CENTER); // center rect around 0,0
        ellipse(0, 0, 10, 2000);
        pop();
        angle = angle + 5;
      }
      //Secret Center
      if (mouseX < 600){
        ellipse(300, 300, 200, 200);
      }
    }

Taisei Manheim – 03 – Dynamic Drawing

sketch

//Taisei Manheim
//Section C
//tmanheim@andrew.cmu.edu
//Assignment-03

var angle = 0;

function setup() {
    createCanvas(600, 480);
}

function draw() {
    var speed = 3

    noStroke();
    background(135 - mouseX / 3, 206 - mouseX / 3, 235 - mouseX / 3); //sky color changes as mouse moves

    //stars
    fill("white");
    if (mouseX > width / 2) {
        fill("white"); //white if nighttime
    }
    if (mouseX <= width / 2) {
        fill(135 - mouseX / 3, 206 - mouseX / 3, 235 - mouseX / 3); //color of sky if daytime
    }  
    //stars rotate by their centers
    push();
    translate(30, 40);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(57, 33);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(21, 60);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(67, 71);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(90, 83);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(113, 111);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(113, 47);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(37, 104);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(120 + 30, 40);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(120 + 57, 33);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(120 + 21, 60);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(120 + 67, 71);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(120 +90, 83);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(120 + 113, 111);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(120 + 113, 47);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(120 + 37, 104);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(240 + 30, 40);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(240 + 57, 33);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(240 + 21, 60);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(240 + 67, 71);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(240 +90, 83);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(240 + 113, 111);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(240 + 113, 47);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(240 + 37, 104);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(360 + 30, 40);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(360 + 57, 33);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(360 + 21, 60);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(360 + 67, 71);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(360 +90, 83);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(360 + 113, 111);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(360 + 113, 47);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(360 + 37, 104);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(480 + 30, 40);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(480 + 57, 33);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(480 + 21, 60);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(480 + 67, 71);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(480 +90, 83);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(480 + 113, 111);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(480 + 113, 47);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(480 + 37, 104);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();

    push();
    translate(30, 120 + 40);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(57, 120 + 33);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(21, 120 + 60);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(67, 120 + 71);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(90, 120 + 83);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(113, 120 + 111);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(113, 120 + 47);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(37, 120 + 104);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(120 + 30, 120 + 40);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(120 + 57, 120 + 33);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(120 + 21, 120 + 60);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(120 + 67, 120 + 71);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(120 +90, 120 + 83);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(120 + 113, 120 + 111);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(120 + 113, 120 + 47);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(120 + 37, 120 + 104);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(240 + 30, 120 + 40);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(240 + 57, 120 + 33);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(240 + 21, 120 + 60);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(240 + 67, 120 + 71);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(240 +90, 120 + 83);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(240 + 113, 120 + 111);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(240 + 113, 120 + 47);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(240 + 37, 120 + 104);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(360 + 30, 120 + 40);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(360 + 57, 120 + 33);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(360 + 21, 120 + 60);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(360 + 67, 120 + 71);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(360 +90, 120 + 83);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(360 + 113, 120 + 111);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(360 + 113, 120 + 47);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(360 + 37, 120 + 104);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(480 + 30, 120 + 40);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(480 + 57, 120 + 33);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(480 + 21, 120 + 60);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(480 + 67, 120 + 71);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(480 +90, 120 + 83);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(480 + 113, 120 + 111);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(480 + 113, 120 + 47);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(480 + 37, 120 + 104);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();

    push();
    translate(30, 240 + 40);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(57, 240 + 33);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(21, 240 + 60);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(67, 240 + 71);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(90, 240 + 83);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(113, 240 + 111);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(113, 240 + 47);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(37, 240 + 104);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(120 + 30, 240 + 40);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(120 + 57, 240 + 33);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(120 + 21, 240 + 60);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(120 + 67, 240 + 71);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(120 +90, 240 + 83);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(120 + 113, 240 + 111);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(120 + 113, 240 + 47);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(120 + 37, 240 + 104);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(240 + 30, 240 + 40);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(240 + 57, 240 + 33);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(240 + 21, 240 + 60);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(240 + 67, 240 + 71);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(240 +90, 240 + 83);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(240 + 113, 240 + 111);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(240 + 113, 240 + 47);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(240 + 37, 240 + 104);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(360 + 30, 240 + 40);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(360 + 57, 240 + 33);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(360 + 21, 240 + 60);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(360 + 67, 240 + 71);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(360 +90, 240 + 83);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(360 + 113, 240 + 111);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(360 + 113, 240 + 47);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(360 + 37, 240 + 104);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(480 + 30, 240 + 40);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(480 + 57, 240 + 33);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(480 + 21, 240 + 60);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(480 + 67, 240 + 71);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(480 +90, 240 + 83);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(480 + 113, 240 + 111);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(480 + 113, 240 + 47);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(480 + 37, 240 + 104);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    angle = angle + 5;

    //sun
    //sun moves twice the speed of mouse
    fill('yellow');
    ellipse(mouseX * 2, 50, 200 - mouseX / 3, 200 - mouseX / 3);

    //moon
    //moon moves twice the speed of mouse
    ellipse((mouseX - 300) * 2, 50, 200 - mouseX / 3, 200 - mouseX / 3);
    fill(135 - mouseX / 3, 206 - mouseX / 3, 235 - mouseX / 3); //fill for moon shadow
    ellipse((mouseX - 325) * 2.19, 50, 200 - mouseX / 3, 200 - mouseX / 3);

    //buildings
    //buildings move in inverse direction of mouse
    colorMode(RGB, 255);
    fill(mouseX - 400); //buildings go from black to white as mouse moves
    rect(1100 - mouseX / speed, 480 - 200, 50, 200);
    rect(1050 - mouseX / speed, 480 - 50, 50, 50);
    rect(950 - mouseX / speed, 480 - 150, 50, 150);
    rect(900 - mouseX / speed, 480 - 250, 50, 250);
    rect(850 - mouseX / speed, 480 - 100, 50, 100);
    rect(800 - mouseX / speed, 480 - 200, 50, 200);
    rect(750 - mouseX / speed, 480 - 50, 50, 50);
    rect(700 - mouseX / speed, 480 - 150, 50, 150);
    rect(650 - mouseX / speed, 480 - 300, 50, 300);
    rect(600 - mouseX / speed, 480 - 200, 50, 200);
    rect(550 - mouseX / speed, 480 - 100, 50, 100);
    rect(500 - mouseX / speed, 480 - 250, 50, 250);
    rect(450 - mouseX / speed, 480 - 150, 50, 150);
    rect(400 - mouseX / speed, 480 - 200, 50, 200);
    rect(350 - mouseX / speed, 480 - 300, 50, 300);
    rect(300 - mouseX / speed, 480 - 175, 50, 175);
    rect(250 - mouseX / speed, 480 - 225, 50, 225);
    rect(200 - mouseX / speed, 480 - 100, 50, 100);
    rect(150 - mouseX / speed, 480 - 200, 50, 200);
    rect(100 - mouseX / speed, 480 - 300, 50, 300);
    rect(50 - mouseX / speed, 480 - 175, 50, 175);
    rect(0 - mouseX / speed, 480 - 50, 50, 50);
}

For this project I was inspired by the New York City skyline from the Brooklyn side looking at Manhattan. I tried to show the change in time over the day through multiple changing elements, such as the color of the sky changing, the sun and then moon appearing and changing in size, and the rotating stars appearing at night. The most difficult part was getting the stars to rotate because when I tried putting them in the same push() function they would all rotate around one star so I had to separate them into different functions.

Ghalya Alsanea – Project 03

Align the flowers and be mesmerized!

sketch

//Ghalya Alsanea
//Section B
//galsanea@andrew.cmu.edu
//Project-03

var diameter;   //circle diameter
var diameteri;  //diameter of the inversed circle
var xx;         //mouse X location
var yy;         //mouse y location
var xi;         //inverse of mouxe x loxation
var yi;         //inverse of mouse y location
var angle = 0;  //the angle in which the flower roates
var strokeG;    //what G value the inversed flower color is
var dx;         //distance between x and it's inverse
var dy;         //distance between y and it's inverse

function setup() {
  createCanvas(480, 640);

}
function draw() {
  background(0);

  //if the two flowers are aligned in the center within
  //a tolerance, changed the color of the inversed flower
  dx = xx - xi;
  dy = yy - yi;

  if (dx < 30 & dx > -30 && dy < 30 && dy > -30){
    strokeG = 0
  } else{
    strokeG = 255
  }
  
  //set the variables to depend on the mouse
  xx = mouseX;
  xi = width - mouseX;   //the inverse X location
  yy = mouseY;
  yi = height - mouseY;  //the inverse Y location


  //find diameter that increases as mouseX increases
  diameter = mouseX / 2;

  //find inverse diameter that decreases with mouseX
  diameteri = width / 2 - mouseX / 2;

  //animate the angle to rotate the flower
  angle = angle + 1

  noFill();
  stroke(255);

  //draw simple torus flower
  circle(xx, yy, diameter);
  push();
  translate(xx, yy);
  circle(diameter / 2, 0, diameter);
  rotate(radians(60));
  circle(diameter / 2, 0, diameter);
  rotate(radians(60));
  circle(diameter / 2, 0, diameter);
  rotate(radians(60));
  circle(diameter / 2, 0, diameter);
  rotate(radians(60));
  circle(diameter / 2, 0, diameter);
  rotate(radians(60));
  circle(diameter / 2, 0, diameter);
  pop();

  //if mouse is in the second third of the vertical
  //canvas double the torus flower 

  if(mouseY > height / 3){
    fill(255, 50);
    push();
    translate(xx, yy);
    //animate it to rotate clockwise
    rotate(radians(30 + angle));
    circle(diameter / 2, 0, diameter);
    rotate(radians(60));
    circle(diameter / 2, 0, diameter);
    rotate(radians(60));
    circle(diameter / 2, 0, diameter);
    rotate(radians(60));
    circle(diameter / 2, 0, diameter);
    rotate(radians(60));
    circle(diameter / 2, 0, diameter);
    rotate(radians(60));
    circle(diameter / 2, 0, diameter);
    pop();
  }
  
  //if mouse is in the bottom third of the vertical
  //canvas double the already doubled flower
  if(mouseY > 2 * height / 3){
    fill(255, 50);
    push();
    translate(xx, yy);
    //amimate it to rotate counterclockwise
    rotate(radians(15 - angle));
    circle(diameter / 2, 0, diameter);
    rotate(radians(30));
    circle(diameter / 2, 0, diameter);
    rotate(radians(30));
    circle(diameter / 2, 0, diameter);
    rotate(radians(30));
    circle(diameter / 2, 0, diameter);
    rotate(radians(30));
    circle(diameter / 2, 0, diameter);
    rotate(radians(30));
    circle(diameter / 2, 0, diameter);
    rotate(radians(30));
    circle(diameter / 2, 0, diameter);
    rotate(radians(30));
    circle(diameter / 2, 0, diameter);
    rotate(radians(30));
    circle(diameter / 2, 0, diameter);
    rotate(radians(30));
    circle(diameter / 2, 0, diameter);
    rotate(radians(30));
    circle(diameter / 2, 0, diameter);
    pop();

  }


  //draw it's mirrored version

  noFill();
  stroke(255, strokeG, 0);

  //draw simple torus flower
  circle(xi, yi, diameteri);
  push();
  translate(xi, yi);
  circle(diameteri / 2, 0, diameteri);
  rotate(radians(60));
  circle(diameteri / 2, 0, diameteri);
  rotate(radians(60));
  circle(diameteri / 2, 0, diameteri);
  rotate(radians(60));
  circle(diameteri / 2, 0, diameteri);
  rotate(radians(60));
  circle(diameteri / 2, 0, diameteri);
  rotate(radians(60));
  circle(diameteri / 2, 0, diameteri);
  pop();

  //if mouse is in the second third of the vertical
  //canvas double the torus flower 

  if(mouseY > height / 3){
    fill(255, strokeG, 0, 50);
    push();
    translate(xi, yi);
    //animate it to rotate counterclockwise
    rotate(radians(30 - angle));
    circle(diameteri / 2, 0, diameteri);
    rotate(radians(60));
    circle(diameteri / 2, 0, diameteri);
    rotate(radians(60));
    circle(diameteri / 2, 0, diameteri);
    rotate(radians(60));
    circle(diameteri / 2, 0, diameteri);
    rotate(radians(60));
    circle(diameteri / 2, 0, diameteri);
    rotate(radians(60));
    circle(diameteri / 2, 0, diameteri);
    pop();
  }
  
  //if mouse is in the bottom third of the vertical
  //canvas double the already doubled flower
  if(mouseY > 2 * height / 3){
    fill(255, strokeG, 0, 50);
    push();
    translate(xi, yi);
    //amimate it to rotate clockwise
    rotate(radians(15 + angle));
    circle(diameteri / 2, 0, diameteri);
    rotate(radians(30));
    circle(diameteri / 2, 0, diameteri);
    rotate(radians(30));
    circle(diameteri / 2, 0, diameteri);
    rotate(radians(30));
    circle(diameteri / 2, 0, diameteri);
    rotate(radians(30));
    circle(diameteri / 2, 0, diameteri);
    rotate(radians(30));
    circle(diameteri / 2, 0, diameteri);
    rotate(radians(30));
    circle(diameteri / 2, 0, diameteri);
    rotate(radians(30));
    circle(diameteri / 2, 0, diameteri);
    rotate(radians(30));
    circle(diameteri / 2, 0, diameteri);
    rotate(radians(30));
    circle(diameteri / 2, 0, diameteri);
    rotate(radians(30));
    circle(diameteri / 2, 0, diameteri);
    pop();

  }





  



}

For my dynamic drawing, I was inspired by the torus flower of life (shown below), which is a base for a lot of Arabic art and architecture geometry. I wanted it to be interactive in the sense that when the two flowers are centered together, the flower changed colors. I also thought adding animation to the flower petals as you move up to down would look cool, and it changes in size f you move left to right as well.

Ankitha Vasudev – Project 03- Dynamic Drawing

For this project I wanted to experiment with rotation and changes in color. I tried to create contrasting changes such as the sun color changing as its size decreases and the buildings rising and becoming brighter as the sky gets darker. The most challenging part was getting the rotation of the sun rays.

sketch

// Ankitha Vasudev
// Section B, 10:30 - 11:50
// ankithav@andrew.cmu.edu
// Assignment-03-b

function setup() {
    createCanvas(480, 640);
}

function draw() {
	// Changes background color based on mouse position 
	background(0, 200 - mouseX, 500 - mouseY);
	noStroke();

    //Local variables
    var x = 700; //triangle x coordinate
    var y = 700; //triangle y coordinate 
    var circleW = 30; //sun width
    var circleH = 30; //sun height
    var bwidth = 50; //building width

    //rotating sun rays (triangles)
	push();
	translate(mouseX, mouseY);
	fill(255, 225, 0);
	rotate(mouseY);
	triangle(0, 0, -x/2, y, -x, y+200);
	triangle(0, 0, x/2, -y, x, -y-200);
	triangle(0, 0, x+50, y, y, x+50);
	triangle(0, 0, -x-50, -y, -y, -x-50);
    pop();

    //sun - circle changes size based on mouse position 
    if (mouseX < width/2) {
    circleW = width/2 - mouseX;
    circleH = width/2 - mouseX;
    } else { 
    circleH = 5
    circleW = 5;
    }
    
    //changes sun color and size
    fill(255, 225, mouseX);
    ellipse(mouseX, mouseY, circleW, circleH);

    //building heights based on mouse position 
    fill(mouseX);
    rect(200, 530, bwidth+10, (-mouseY/ 5));
    fill(220);
    rect(160, 570, bwidth-10, (-mouseY / 5));
    fill(150);
    rect(70, 600, bwidth, (-mouseY/5));
    fill(mouseX);
    rect(380, 620, bwidth, (-mouseY/5));
    fill(180);
    rect(355, 550, bwidth/2, (-mouseY/5));
    fill(mouseX);
    rect(20, 660, bwidth/3, (-mouseY/5));

    //green ground - stationary
    fill(0, 220, 70);
    ellipse(width/2, 870, 700, 700);
}

Alice Cai_project03_dynamic drawing

sketch


//Alice Cai
//Section E
//alcai@andrew.cmu.edu
//Project 3

//global variables
var angle = 0


//canvas setup and original background
function setup(){
    createCanvas(640,480);
    background(220);
}

function draw() {
    stroke(mouseX, mouseY);
    strokeWeight(10);
    //color controls changes at half canvas 
    if (mouseX < width / 2){
    fill(mouseY ^ 2, mouseY ^ 2, mouseX ^ 2); 
} else {
    fill(mouseX ^ 2,mouseY ^ 2,mouseY ^ 2); 

}
    
//ellipse positioning
    push();
    translate(mouseX, mouseY);
    rotate(radians(angle) / 100);
    ellipse(0, 0, mouseX, mouseY);


    pop();
    angle = angle + mouseX;

//color controls changes at half canvas for second ellipse
    stroke(mouseX, mouseY);
    if (mouseX > width / 2){
    fill(mouseX / 5,mouseY * 3,mouseY); 
} else {
    fill(mouseX, mouseX, mouseY / 2); 
}
//ellipse2 positioning,not center of mouse, size and position is opposite of original

    push();
    translate(640 - mouseX, 480 - mouseY);
    rotate(radians(angle) / 100);
    ellipse(0, 0, mouseX, mouseY);
    pop();
    angle = angle + mouseX;
    

}

This is my dynamic drawing! It quite literally is dynamic drawing. I started this by using our lab exercises with spinning square moving with the mouse. Then, I changed it to a circle, added another circle, and offset one of them through translate. One of the circles moves opposite of the mouse. I did this by using the previous assignment, with Width/height – mouseX/mouseY. Then, I moved background to set up so that the background doesn’t reset and you can see all the circles that are drawn. The colors of the stroke weight and the circle fills are all controlled by mouseX and mouseY coordinates, as well as the speed of the spinning.

lee chu – project 03

lrchu

// lee chu
// section c
// lrchu@andrew.cmu.edu
// project - 03


function setup() {
    createCanvas(640, 480);
}

function draw() {
    var topX = 0;
    var topY = 0;
    var widthE = width/12;
    var heightE = height/7 - 30;
    var topR = widthE/2;
    var topH = heightE/2;

    var top1X = topX;
    var top2X = topX + widthE/2;
    var top3X = topX;
    var top4X = topX - widthE/2;
    var top1Y = topY - heightE/2;
    var top2Y = topY;
    var top3Y = topY + heightE/2;
    var top4Y = topY;

    var spacingX = width/12;
    var spacingY = height/7;

    var color1 = 45 + (mouseX / width) * 30;
    var color2 = 125 + (mouseY / height) * 50;
    var color3 = 0;

    background(color2);

    // control
    if (0 <= mouseX & mouseX <= width) {
        top1X += sqrt(mouseX/width) * topR;
        top1Y += pow(mouseX/width, 2) * topH;
        top2X -= pow(mouseX/width, 2) * topR;
        top2Y += sqrt(mouseX/width) * topH;
        top3X -= sqrt(mouseX/width) * topR;
        top3Y -= pow(mouseX/width, 2) * topH;
        top4X += pow(mouseX/width, 2) * topR;
        top4Y -= sqrt(mouseX/width) * topH;
    }

    for (var i = 0; i < 641; i += spacingX) {

        //used this as reference
        //ellipse(topX, topY, widthE, heightE);
        strokeWeight(0.5);
        stroke('red');

        // cube side 1
        fill('white');
        beginShape();
        vertex(top1X, top1Y);
        vertex(top4X, top4Y);
        vertex(top4X, top4Y + 30);
        vertex(top1X, top1Y + 30);
        endShape(CLOSE);

        // cube side 2
        fill(107, 37, 50);
        beginShape();
        vertex(top1X, top1Y);
        vertex(top2X, top2Y);
        vertex(top2X, top2Y + 30);
        vertex(top1X, top1Y + 30);
        endShape(CLOSE);

        // cube side 3
        fill(212, 75, 99);
        beginShape();
        vertex(top4X, top4Y);
        vertex(top4X, top4Y + 30);
        vertex(top3X, top3Y + 30);
        vertex(top3X, top3Y);
        endShape(CLOSE);

        // cube side 4
        fill(40, color1, 99);
        beginShape();
        vertex(top3X, top3Y);
        vertex(top2X, top2Y);
        vertex(top2X, top2Y + 30);
        vertex(top3X, top3Y + 30);
        endShape(CLOSE);

        // cube top
        fill(239, 240, 235);
        beginShape();
        vertex(top1X, top1Y);
        vertex(top2X, top2Y);
        vertex(top3X , top3Y);
        vertex(top4X, top4Y);
        endShape(CLOSE);

        for (var k = 0; k < 481; k += spacingY) {
            translate(0, spacingY);

            // cube side 1
            fill('white');
            beginShape();
            vertex(top1X, top1Y);
            vertex(top4X, top4Y);
            vertex(top4X, top4Y + 30);
            vertex(top1X, top1Y + 30);
            endShape(CLOSE);

            // cube side 2
            fill(107, 37, 50);
            beginShape();
            vertex(top1X, top1Y);
            vertex(top2X, top2Y);
            vertex(top2X, top2Y + 30);
            vertex(top1X, top1Y + 30);
            endShape(CLOSE);

            // cube side 3
            fill(212, 75, 99);
            beginShape();
            vertex(top4X, top4Y);
            vertex(top4X, top4Y + 30);
            vertex(top3X, top3Y + 30);
            vertex(top3X, top3Y);
            endShape(CLOSE);

            // cube side 4
            fill(40, color1, 99);
            beginShape();
            vertex(top3X, top3Y);
            vertex(top2X, top2Y);
            vertex(top2X, top2Y + 30);
            vertex(top3X, top3Y + 30);
            endShape(CLOSE);

            // cube top
            fill(239, 240, 235);
            beginShape();
            vertex(top1X, top1Y);
            vertex(top2X, top2Y);
            vertex(top3X , top3Y);
            vertex(top4X, top4Y);
            endShape(CLOSE);
            }
            translate(spacingX, 0);
            translate(0, -k);
    }
}

I started by creating a cube that could rotate 90 degrees as the mouse is dragged across the canvas By placing multiple cubes corner to corner, A sort of optical illusion happens.