Category: Project-03-Dynamic-Drawing

Yugyeong Lee Project – 03

sketch

//Yugyeong Lee
//section A (9:30AM)
//yugyeonl@andrew.cmu.edu
//project 3

var x = 320;
var y = 240;
var dir = 1;

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

function draw() {

	//background color change based on position of mouseX
	colorR = map(mouseX, 0, width, 255, 255);
	colorB = map(mouseX, 0, width, 179, 255);
	colorG = map(mouseX, 0, width, 179, 204);
	background(colorR, colorG, colorB);
	noStroke();
	noCursor();

	//random circles with changing sizes
	noStroke();
	fill(0);
	var diam = map(mouseX, 0, width, 0, 100);
	ellipse(width/4, height/4, diam, diam);
	var diam = map(mouseX, 0, width, 0, 75);
	ellipse(width/6, 5 * height/6, diam, diam);
	var diam = map(mouseX, 0, width, 0, 25);
	ellipse(width/2, 4 * height/7, diam, diam);
	ellipse(8 * width/9, 8 * height/9, diam, diam);
	var diam = map(mouseX, 0, width, 0, 50);
	ellipse(width/4, height/4, diam, diam);
	var diam = map(mouseX, 0, width, 0, 50);
	ellipse(4 * width/5, height/2, diam, diam);

	//motionless circles
	ellipse(5 * width/7, 9 * height/12, 20, 20);
	ellipse(6 * width/8, height/9, 15, 15);
	ellipse(3 * width/7, 11 * height/12, 15, 15);
	ellipse(width/3, 3 * height/7, 15, 15);

	//mouse guide (mouseX)
	if (mouseX > x) {
		x += 0.75;
	}
	if (mouseX < x) {
		x -= 0.75;
	}
	strokeWeight(10);
	stroke(255);
	line(x, 0, x, height);
	line(x + 20, 0, x + 20, height);

	//mouse guide (mouseX)
	if (mouseY > y) {
		y += 0.75;
	}
	if (mouseY < y) {
		y -= 0.75;
	}
	strokeWeight(10);
	stroke(255);
	line(0, y, width, y);
	line(0, y + 20, width, y + 20);

	//change the direction of rotation of the cursor
	if (mouseX > width/2) {
		dir = -dir;
	}

	//rotating shape for cursor
	noStroke();
	fill(0);
	push();
	translate(mouseX, mouseY);
	rotate(dir * millis()/500);
	quad(0, 0, -6, 24, 0, 48, 6, 24);
	pop();	

	push();
	translate(mouseX, mouseY);
	rotate(dir * millis()/500);
	quad(0, 0, -24, -6, -48, 0, -24, 6);
	pop();	

	push();
	translate(mouseX, mouseY);
	rotate(dir * millis()/500);
	quad(0, 0, 6, -24, 0, -48, -6, -24);
	pop();	

	push();
	translate(mouseX, mouseY);
	rotate(dir * millis()/500);
	quad(0, 0, 24, 6, 48, 0, 24, -6);
	pop();

	//blackout when any key is pressed
	if (keyIsPressed) {
		fill(0);
		rect(0, 0, width, height);
	}

}

The most challenging part of this project was planning to create a design for the dynamic drawing rather than figuring out the codes.

Dynamic Drawing

I call this drawing the “Rainbow Eraser.” As you move the cursor from left to right, a black rectangle covers the rainbow. As you move back from right to left, the black rectangle is erased.

 

sketchindex

//Arula Ratnakar
//aratnaka
//Section C 
//Dynamic Drawing: Rainbow Eraser

var redX = 0;
var orangeX = 100; //beginning of the orange rectangle
var yellowX = 200;
var greenX = 300;
var blueX = 400;
var purpleX = 500;
var purpleY = 600;
var colorMain = 0; //variable used to create the main white rectangle at the end


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

function draw() {
	noStroke ();
	background (0);
	fill (255, colorMain, colorMain);//fills first rectangle with red (for now)
	rect (redX ,0, orangeX, 600);
	fill ('orange');
	rect (orangeX,0, orangeX, 600);
	fill ('yellow');
	rect (yellowX, 0, orangeX, 600);
	fill ('green');
	rect (greenX, 0, orangeX, 600);
	fill ('blue');
	rect (blueX, 0, orangeX, 600);
	fill ('purple');
	rect (purpleX, 0, orangeX, 600);

	
	if (mouseX < 600) {
		redX = mouseX; //attaches mouseX to the leftmost edge of the red rectangle
	}

	if (mouseX > yellowX) {
		orangeX = mouseX;
	}

	if (mouseX > greenX){
		yellowX = mouseX;
	}

	if (mouseX > blueX){
		greenX = mouseX;
	}

	if (mouseX > purpleX){
		blueX = mouseX;
	}

	if (mouseX > 600) {
		purpleX = mouseX;//as you drag the mouse from left to right, the black background shows through, "erasing" the rainbow
	}

	if (mouseX > 600){
		colorMain = 255; // when you start to drag the mouse back from right to left, the white will "erase" the black box
	}
	

}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>p5.js vers 0.5.2, Edit index.html to Change This Title</title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script>

    <!-- Uncomment the lines below to include extra p5 libraries, or 
         use template-all or template-all-min:
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/addons/p5.dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/addons/p5.sound.js"></script>
    -->

    <script src="sketch.js" type="text/javascript"></script>
  </head>
  <body>
  </body>
</html>

Sihand – Project 03 – Dynamic Drawing – Snowflakes

sketch

//Sihan Dong
//sihand@andrew.cmu.edu
//Section B
//Project 03 snowflakes: this program is a interactive art

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

function draw() {
	background(13,33,61);
  noStroke();
  fill(255);

//leftmost snowflake
//the diameter of the center circle is set between 20 and 70
//three layers circulate at the same speed,
//while the second layer is the satellie of the first, and the thrid the second
  var size1 = 50 * noise(0.005*frameCount + 60);
  var circle1 = constrain(size1, 20,70);
//defining the center circle
  ellipse(width/2-150, height/2, circle1, circle1);
//if cursor is placed within the circle snowflake appears
if (dist(mouseX, mouseY, width/2-150, height/2) < circle1/2) {
  var ang1 = TWO_PI * 0.005*frameCount + 20;
  var ang3 = TWO_PI * 0.005*frameCount + 30;
  for (var i = 0; i < 8; i++) {
    push();
    translate(width/2-150, height/2);
  	rotate(ang1 + TWO_PI * i / 8);
  	translate(100, 0);
  	ellipse(0, 0, 20, 20);
  		  if (frameCount >300) {
            push();
  			    rotate(ang1 + TWO_PI * 1 / 6);
  			    ellipse(50, 0, 10, 10);
                if (frameCount > 600) {
                    push();
                    translate(80,0);
                    rotate(ang1 + TWO_PI * 1 / 6);
      			        ellipse(0, 0, 10, 10);
                    rotate(ang3);
                    pop();
                  }
            pop();
            }
  		pop();
    }
}


//middle snowflake
//defining the center circle
var size2 = 80 * noise(0.005*frameCount + 60);
var circle2 = constrain(size2, 30,80);
ellipse(width/2, height/2, circle2, circle2);
//varying distance between layers
var rx = 200 * noise(0.005*frameCount + 40);
var tx = 150 * noise(0.005*frameCount + 50);
var circle3 = constrain (size2, 10, 20);
if (dist(mouseX, mouseY, width/2, height/2) < circle1/2) {
  var ang1 = TWO_PI * 0.005*frameCount + 20;
  var ang2 = TWO_PI * 0.0005*frameCount + 10;
  var ang3 = TWO_PI * 0.005*frameCount + 30;
  for (var i = 0; i < 6; i++) {
    push();
    translate(width/2, height/2);
    rotate(ang1 + TWO_PI * i / 6);
    translate(tx, 0);
    ellipse(0, 0, circle3, circle3);
    rotate(ang3);
        if (frameCount >200) {
            for (var j = 0; j < 3; j++) {
            push();
            rotate(ang2 + TWO_PI * j / 15);
            //three satellites will go around the second layer closely
            incre = 10;
            ellipse(rx, 0, 9, 9);
            pop();
            }
        }
      pop();
    }
}


//rightmost snowflake
var size1 = 100 * noise(0.005*frameCount + 60);
var circle1 = constrain(size1, 30,130);
//the diameter of the center circle is set between 30 and 130
ellipse(width/2+150, height/2, circle1, circle1);
//defining the center circle
var ux = 150 * noise(0.005*frameCount + 30);
if (dist(mouseX, mouseY, width/2+150, height/2) < circle1/2){
  for (var i = 0; i < 8; i++) {
    push();
    translate(width/2+150, height/2);
    rotate(TWO_PI * i / 8);
    //rotate(ang1 + TWO_PI * i / 8);
 	  translate(ux*1.25, 0);
  	ellipse(0, 0, 20, 20);
  		  if (frameCount >200) {
            for (var j = 0; j < 6; j++){
            push();
  			    rotate(TWO_PI * j / 6);
            translate(0.5*ux,0);
  			    ellipse(0, 0, 10, 10);
              if (frameCount > 400) {
                for (var j2 = 0; j2 < 6; j2++){
                  push();
      			      rotate(TWO_PI * j2 / 6);
                  translate(ux*0.25,0);
      			      ellipse(0, 0, 5, 5);
                  rotate(ang3);
                  pop();
              }
            }
          pop();
           }
         }
  		pop();
    }
}

}

This project was inspired by one of the rotation examples this week. During my experimenting, I found some interesting way to arrange the rotating figures. The results remind me of the formation of snowflakes so that’s how it got its name.

As a side note, because the size of the canvas is limited, the snowflakes overlap sometimes, which would influence the visual. Also the display is cropped off because of WordPress.

Brandon Darreff-Project-03-Dynamic-Drawing

bdarreff_project03

//Brandon Darreff

//Section A

//bdarreff@andrew.cmu.edu

//Project-03




function setup() {
    createCanvas(600, 400, WEBGL);
}

function draw() {

	var orbitMe = frameCount * 0.001;	//Mercury orbit speed
	var orbitV = frameCount * 0.0001;	//Venus orbit speed
	var orbitE = frameCount * 0.01;	//Earth orbit speed
	var orbitM= frameCount * 0.01;	//Mars orbit speed
	var orbitJ = frameCount * 0.07;	//Jupiter orbit speed
	var orbitS = frameCount * 0.01;	//Saturn orbit speed
	var orbitU = frameCount * 0.05;	//Uranus orbit speed
	var orbitN = frameCount * 0.05; //Neptune orbit speed
	var res = 100 //resolution of spheres

	background(0);

	//sunlight tracked to mouse position
	var sunlightY = (mouseY / height - 0.5) * (-2);
	var sunlightX = (mouseX) / width - 0.5;
	pointLight(250, 250, 250, sunlightX, sunlightY, 0);
	

	//Mercury
	translate(-width, -350);
	push();
	//orbit
	rotateZ (orbitMe);
	rotateX (orbitMe);
	rotateY (orbitMe);
	//surface color
	ambientMaterial(100);
	sphere(20, res);
	pop();

	//Venus
	translate(height / 4, height / 4);
	push();
	//orbit
	rotateZ (orbitV);
	rotateX (orbitV);
	rotateY (orbitV);
	//surface color
	ambientMaterial(174, 103, 58);
	sphere(30, res);
	pop();

	//Earth
	translate(height / 4, height / 4);
	push();
	//orbit
	rotateZ (orbitE);
	rotateX (orbitE);
	rotateY (orbitE);
	//surface color
	ambientMaterial(32, 67, 100);
	sphere (35, res);
	pop();

	//object orbiting earth
	push();
	ambientMaterial(255, 30);
	rotateY(orbitE);
	rotateX(orbitE)
	ellipse(-87, 90, 200, 100, 100, 0);
	pop();

	//Mars 
	translate(height / 4, 70);
	push();
	//orbit
	rotateZ (orbitM);
	rotateX (orbitM);
	rotateY (orbitM);
	//surface color
	ambientMaterial(131, 51, 44);
	sphere(25, res);
	pop();

	//object orbiting mars
	push();
	ambientMaterial(255, 30);
	rotateZ(orbitE);
	ellipse(-87, 90, 100, 80, 100, 0);
	pop();

	//Jupiter
	translate(200, 120);
	push();
	//orbit
	rotateZ (orbitJ);
	rotateX (orbitJ);
	rotateY (orbitJ);
	//surface color
	ambientMaterial(199, 142, 87);
	sphere(150, res);
	pop();
	
	//object orbiting jupiter
	push();
	ambientMaterial(255, 30);
	rotateX(orbitJ);
	ellipse(-87, 90, 200, 100, 100, 0);
	pop();

	//Saturn
	translate(260, 120);
	push();
	//orbit
	rotateZ (orbitS);
	rotateX (orbitS);
	rotateY (orbitS);
	//surface color
	ambientMaterial(210, 169, 121);
	sphere(120, res);
	pop();

	//object orbiting saturn
	push();
	ambientMaterial(255, 30);
	rotateX(orbitS);
	rotateY(orbitS);
	ellipse(-87, 90, 500, 100, 100, 0);
	pop();

	//Uranus
	translate(210, 75);
	push();
	//orbit
	rotateZ (orbitU);
	rotateX (orbitU);
	rotateY (orbitU);
	//surface color
	ambientMaterial(104, 179, 205);
	sphere(70, res);
	pop();

	//Neptune
	translate(180, 75);
	push();
	//orbit
	rotateZ (orbitN);
	rotateX (orbitN);
	rotateY (orbitN);
	//surface color
	ambientMaterial(97, 136, 202);
	sphere(70, res);
	pop();

	//object orbiting neptune
	push();
	ambientMaterial(255, 25);
	rotateX(orbitN);
	rotateY(orbitN);
	rotateZ(orbitN);
	ellipse(-87, 90, 300, 100, 100, 0);
	pop();

}

With this project I focused on creating a dynamic drawing which mimics changing sunlight on spheres meant to represent planets. Each planet rotates around its own axis at a rate derived from its respective actual rotation speed and additional objects are set into motion around various planet axises. The sunlight projected onto the spheres is tracked by the position of the mouse to add another dynamic variable to the overall image.

Christine Kim – Project-03

sketch

//Christine Kim
//Section A (9:00)
//haewannk@andrew.cmu.edu
//Project-03

// Note: there appears to be a bug in the p5-embed code, and
// Christine's original code could not be displayed correctly.
// I modified the code by putting spaces around <, >, and &
// operators. -Roger Dannenberg

var speed = 1000;
var speedc = 1000;
var speed2 = 1;
var speed3 = 2;
var speed4 = 1.5;
var r = 50;
var s = 200;
var t = 350;
var p = 100;
var q = 300;
var z = 500;
var u = 60;
var i = 260;
var o = 430;
var j = 30;
var k = 270;
var l = 510;
var a = 340;
var b = 0;
var w1 = 300;
var h1 = 480;
var c = 490;
var d = 190;
var e = 290;
var w2 = 50;
var h2 = 50;
var x = 320;
var y = 240;
var diffx = 0;
var diffy = 0;
var targetX = 320;
var targetY = 320;


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

function draw() {
    background(167,184,251);

    //clicking mouse to change from circles to squares
    push();
    fill('pink');
    ellipse(505,90,30,30);
    if (mouseIsPressed)
	if (mouseButton==LEFT) {
	    rect(490,75,30,30);
	}
    ellipse(575,90,30,30);
    if (mouseIsPressed)
	if (mouseButton==LEFT) {
	    rect(560,75,30,30);
	}
    ellipse(435,90,30,30);
    if (mouseIsPressed)
	if (mouseButton==LEFT) {
	    rect(420,75,30,30);
	}
    ellipse(505,390,30,30);
    if (mouseIsPressed)
	if (mouseButton==LEFT) {
	    rect(490,375,30,30);
	}
	ellipse(575,390,30,30);
    if (mouseIsPressed)
	if (mouseButton==LEFT) {
	    rect(560,375,30,30);
	}
    ellipse(435,390,30,30);
    if (mouseIsPressed)
	if (mouseButton==LEFT) {
	    rect(420,375,30,30);
	}
    pop();
    
    //rain falling
    push();
    fill(0);
    rect(50,r,2,15);
    r+=speed2;
    if (r > height+25) {
	r=-25;
    }
    rect(50,s,2,15);
    s+=speed2;
    if (s > height+25) {
	s=-25;
    }
    rect(50,t,2,15);
    t+=speed4;
    if (t > height+25) {
	t=-25;
    }
    rect(100,p,2,15);
    p+=speed3;
    if (p > height+25) {
	p=-25;
    }
    rect(100,q,2,15);
    q+=speed2;
    if (q > height+25) {
	q=-25;
    }
    rect(100,z,2,15);
    z+=speed3;
    if (z > height+25) {
	z=-25;
    }
    rect(250,u,2,15);
    u+=speed4;
    if (u > height+25) {
	u=-25;
    }
    rect(250,i,2,15);
    i+=speed2;
    if (i > height+25) {
	i=-25;
    }
    rect(250,o,2,15);
    o+=speed4;
    if (o > height+25) {
	o=-25;
    }
    rect(200,j,2,15);
    j+=speed2;
    if (j > height+25) {
	j=-25;
    }
    rect(200,k,2,15);
    k+=speed4;
    if (k > height+25) {
	k=-25;
    }
    rect(200,l,2,15);
    l+=speed3;
    if (l > height+25) {
	l=-25;
    }
    pop();

    //5 joined ellipses or flower
    rect(143,150,15,height);//stem
    push();  //1
    translate(150,150);
    rotate(millis()/speedc);
    translate(-150,-150);
    push();  //2
    noStroke();
    ellipse(150,100,30,100);
    push();  //3
    translate(110,129);
    rotate(radians(288));
    ellipse(0,0,30,100);
    pop();   //2
    push();  //3
    translate(126,180);
    rotate(radians(216));
    ellipse(0,0,30,100);
    pop();   //2
    push();  //3
    translate(175,180);
    rotate(radians(144));
    ellipse(0,0,30,100);
    pop();  //2
    push(); //3
    translate(191,129);
    rotate(radians(72));
    ellipse(0,0,30,100);
    pop();  //2
    pop();  //1
    pop();  //0

    //changing flower color by pressing certain keys
    if (keyIsPressed) {
	if ((key=='p')||(key=='P')) {
	    fill(239,92,120); //pink
	    rect(145,150,15,height);
	}
    }
    if (keyIsPressed) {
	if ((key=='y')||(key=='Y')) {
	    fill(255,255,115); //yellow
	    rect(145,150,15,height);
	}
    }
    if (keyIsPressed) {
	if ((key=='g')||(key=='G')) {
	    fill(100); //gray
	    rect(145,150,15,height);
	}
    }

    //four circles
    //only appears when mouse is on the right half of canvas
    //red rotating circle
    if ((mouseX > a) & (mouseX < a+w1) && 
       (mouseY > b) && (mouseY < b+h1)) {
	fill(237,58,53);
    } else {
	fill(167,184,251);
    }
    push();
    translate(c,height/2);
    rotate(millis()/(speed/2));
    translate(0,-50);
    ellipse(0,0,w2,h2);
    pop();

    //pink rotating circle
    if ((mouseX > a) & (mouseX < a+w1) && 
       (mouseY > b) && (mouseY < b+h1)) {
	fill(246,139,235);
    } else {
	fill(167,184,251);
    }
    push();
    translate(c,height/2);
    rotate(millis()/(speed/2));
    translate(0,50);
    ellipse(0,0,w2,h2);
    pop();

    //blue rotating circle
    if ((mouseX > a) & (mouseX < a+w1) && 
       (mouseY > b) && (mouseY < b+h1)) {
	fill(15,113,255);
    } else {
	fill(167,184,251);
    }
    push();
    translate(c,height/2);
    rotate(-millis()/(speed/2));
    translate(-50,0);
    ellipse(0,0,w2,h2);
    pop();

    //yellow rotating circle
    if ((mouseX > a) & (mouseX < a+w1) && 
       (mouseY > b) && (mouseY < b+h1)) {
	fill(245,250,132);
    } else {
	fill(167,184,251);
    }
    push();
    translate(c,height/2);
    rotate(-millis()/(speed/2));
    translate(50,0);
    ellipse(0,0,w2,h2);
    pop();
    
    //colored circles spinning gradually faster and faster when mouse is above middle and slower and slower below the middle
    if (mouseY > height/2) {
  	speed+=(speed+10) > 500;
    } else {
  	speed-=(speed-50) > 100;
    }

   
    //mouse pointer
    diffx = mouseX-x;
    x=x+diffx;
    diffy = mouseY-y;
    y=y+diffy;
    noStroke();
    fill(158,236,181);
    rect(x-10,y-10,20,20);
	
}

My process in this project was looking for ways to try many functions such as rotation, translation, mouse click, key click, and etc. My left side of canvas is of a flower with falling rain while my right side of canvas contains geometric shapes.

Denise Jiang-Project-03-Dynamic-Drawing

Move mouse to the left,the size of the circles will be smaller; move mouse to the right, the size of the circles will be bigger. Mouse X and Mouse Y also control colors of the circles.
sketch

var a=100;//square size
var b=200;//circle size
var c=100;//x,y of squares and circles

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

function draw() {
	background(220);

	fill(232,180,mouseY);
	strokeWeight(5);
	ellipse(mouseX,height/2,480,480);

	//element 1
	push()
	translate(width/2,height/2);
	rotate(millis()/500);
	strokeWeight(5);
	fill(mouseX,155,mouseY);
	rect(-c,-c,a,a);
	ellipse(-c,-c,b,b);
	pop();


	//element 2
	push()
	translate(width/2,height/2);
	rotate(millis()/-500);
	strokeWeight(5);
	fill(234,mouseX,mouseY);
	rect(-c,-c,a,a);
	ellipse(-c,-c,b,b);
	pop();

	//element 3
	push()
	translate(width/2,height/2);
	rotate(millis()/-500);
	strokeWeight(5);
	fill(120,mouseX+50,178);
	rect(0,0,a,a);
	ellipse(c,c,b,b);
	pop();

	//element 4
	push()
	translate(width/2,height/2);
	rotate(millis()/500);
	strokeWeight(5);
	fill(mouseX,202,178);
	rect(0,0,a,a);
	ellipse(c,c,b,b);
	pop();

	//element 4-2
	push()
	translate(width/2,height/2);
	rotate(millis()/2000);
	strokeWeight(5);
	fill(mouseX,202,178);
	rect(0,0,a,a);
	ellipse(c,c,b,b);
	pop();

	//element 2-2
	push()
	translate(width/2,height/2);
	rotate(millis()/-2000);
	strokeWeight(5);
	fill(234,mouseX,mouseY);
	rect(-c,-c,a,a);
	ellipse(-c,-c,b,b);
	pop();


	//element 3-2
	push()
	translate(width/2,height/2);
	rotate(millis()/-2000);
	strokeWeight(5);
	fill(120,mouseX+50,178);
	rect(0,0,a,a);
	ellipse(c,c,b,b);
	
	pop();

	//element 1-2
	push()
	translate(width/2,height/2);
	rotate(millis()/2000);
	strokeWeight(5);
	fill(mouseX,155,mouseY);
	rect(-c,-c,a,a);
	ellipse(-c,-c,b,b);
	pop();

	if (mouseX>width/2){
		b+=0.5;

	}

	if (mouseX<width/2){
		b=b-0.5;

	}

}

I used basic geometries(squares and circles) in this project. There are two layers of the elements rotating in different speed and directions. Mouse X controls the sizes of the circles and Mouse X, Mouse Y together change the colors.

Liu Xiangqi-Project03

sketch


// Liu Xiangqi xiangqil@andrew.cmu.edu Section-A Project-03
var backR = 255;
var backG = 219;
var backB = 77;
var radian = 0;
var size = 150;
var roundR = 255;
var roundG = 102;
var roundB = 0;
function setup() {
    createCanvas(640, 480)
}
 
function draw() {
    background(backR, backG, backB);
    noStroke();
    //change the background color 
    backR = map(mouseX, 0, width, 255, 0);
    backG = map(mouseX, 0, width, 219, 20);
    backB = map(mouseX, 0, width, 77, 51);
    
    if (mouseX > width ) {
        backR = 0;
        backG = 20;
        backB = 51;
    }
    
    if (mouseX < 0) {
        backR = 255;
        backG = 219;
        backB = 77;
    }
    
    //change the position of the moon/sun
    push();
    radian = map(mouseX, 0, width, 0, 1.57);
    translate(320,0);
    rotate(radian);
    
    //change the color
    roundR = map(mouseX, 0, width, 255, 255);
    roundG = map(mouseX, 0, width, 102,255);
    roundB = map(mouseX, 0, width, 0, 0); 
    fill(roundR, roundG, roundB);
    ellipse(200, 75, 150, 150);
    
    //change the size of the breach
    size = map(mouseX, 0, width, 0, 150);
    fill(backR, backG, backB)
    ellipse(200, 150, size, size);
    pop();
}

I don’t know why the moon stuck in the middle of the canvas. It moves smoothly to the upper-left corner on my browser.

rnayyar- Dynamic Drawing; project 3

I had a lot of issues coming up with an idea but looking at my ceiling fan for a little while helped me come to this quirky conclusion. Windmills are neat, I like them a lot, and I was inspired to create this. The mouseX position correlates to the current weather inside the canvas and the mouseY position correlates to the blade speed depending on the weather 🙂
Figuring out how to make the blades go faster took a long time. I tried to make a variable called Windspeed for the “rotate(milli()/1000);” part, and just have it as “rotate(Windspeed);” but that broke my code… and so did many other variations of that variable attempt… So I just had to manually change it with a conditional and by switching 1000 to 500 and 200 depending on the mouseY… That was fun. 
sketch

//Rhea Nayyar
// Section C
//rnayyar@andrew.cmu.edu
//Project 03-C; Dynamic Drawing

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

function draw() {
	background("SkyBlue"); //sky
   if (mouseX>=150){
     background(105); //cloudy sky
   }
   if(mouseX>=350){
     background(random(80,145)); //stormy sky
   }
  fill('YellowGreen'); //field
  rect(0,400,640,480);
  fill("OliveDrab"); //mountains
  quad(-70,400, 100,400,45,310,-30,390);
  quad(0,400,300,400,100,330,21,400);
  quad(275,400,480,400,480,310,420);
  push();
  translate(width/2,height/2);
  fill('DarkRed'); //Windmill stalk
  quad(-40,0, 30,0, 70, 200, -60,200);
  fill("DimGrey"); //disk behind windmill blades
  ellipse(0,0,50,50);
  fill(0); //door
  stroke('Yellow'); //molding
  rect(-10,150,30,50);
  fill("White"); //windmill blades
  noStroke();
   if (mouseY>=200){
     rotate(millis()/500); //mid-speed (cloudy)
   }
   if (mouseY>=420){
     rotate(millis()/100); //super-speed (stormy)
   }
  rotate(millis()/1000); //regular speed (normal)
  rotate(radians(100));
  quad(0,0,95,0,85,30,10,30);
  rotate(radians(260));
  quad(0,0,95,0,85,30,10,30);
  rotate(radians(270));
  quad(0,0,95,0,85,30,10,30);
  rotate(radians(275));
  quad(0,0,95,0,85,30,10,30);
  pop();
}

Sarita Chen – Project 03 – Dynamic Drawing

sketch

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

}

function draw() {
	// Changes the colours from Red to Blue when the mouse is moved horizontally.
	 colR= map(mouseX,220,width,220,180);
	 colG= map(mouseX,180,width,100,180);
	 colB= map(mouseX,190,width,100,255);
	 background(colR,colG,colB);
	 noStroke();
	// Declares variables for height and width of shapes.
	 varOpp = width - mouseX;
	 var cH = 70;
	 var cW = 70;

	// Changes the size when the mouse is moved horizontally.
	 var cH = map(mouseX,0,width,250,0);
	 fill(255,255,255);
	 ellipse(width/2,height/4,cW,cH);

	 fill(180,170,255);
	 rect(mouseX+200,height/3,cW,cH);

	 fill(255,170,255);
	 rect(mouseX,height/2,cW,cH);

	 fill(255,170,255);
	 rect(varOpp,height/2,cW,cH);

	  fill(180,170,255);
	  rect(varOpp-200,height/2,cW,cH);

	 fill(255,170,255);
	 rect(mouseX,height/4,cW,cH);

	 fill(255,170,255);
	 rect(varOpp,height/1.5,cW,cH);
}

I took inspiration from the first deliverables assignment, so I’d say what I came up with is pretty simple. What I want to work on for next time is adding more depth to the movement of graphics, since this is pretty 2-dimensional.

Jiyoung Ahn – 03 – Dynamic drawing

I tried to review things that I have learned. I created a pattern, and tried to show different effects like color,scale change by using one interaction (by just moving x-axis cursor).

sketch

//Jiyoung Ahn
//section A
//jiyounga@andrew.cmu.edu
//project 03

  var intervX = 60; 
  var intervY = 60; 
  var Xspace = 35; 
  var Yspace= 35; 


  var crvd1 = 0;
  var crvd2 = 10;
  var crvd3 = 20;
  var crvd4 = 30;  

  var rectS1 = 10;
  var rectS2 = 20;
  var rectS3 = 30;
  var rectS4 = 40;

  var dir = 1;
  var speed = 5;
  var diam = 50;

  var rectt= 2;

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

}


function draw() {


  var colorOne = map(mouseX, 246, height, 246,235,159); 
  var colorTwo = map(mouseX, 114, height, 159,208,246); 
  var colorThree = map(mouseX, 76, height, 196,246,159); 

  background(colorOne,colorTwo,colorThree);// color background change 

  var x = 300;
  var dir = 1;
  var speed = 5;

 


  
  for (var y = 0; y < 6; y++) {
    if ( y % 2== 0){
      for (var x =0; x <11; x++){
        var my = Yspace + y * intervY;
        var mx = Xspace + x * intervX;
        noStroke ();
        rectMode (CENTER);
        deg = radians (30);

        fill (135,192,250);
        rect (mx, my, rectS4, rectS4, crvd1);
        
        fill (170,204,239);
        rect (mx, my, rectS3, rectS3, crvd2);
        
        fill (249,253,143);
        rect (mx, my, rectS2, rectS2, crvd3);
        
        fill (255);
        rect (mx, my, rectS1, rectS1, crvd4);

         rotate(radians(map(mouseX, 0, height, 0, rectt)));// rotates when move mouse to X axis.
      }
    }

    else {

      for (var x = -10; x< 10; x++){
        var my = Yspace+ y * intervY;
        var mx = intervX/2 + Xspace + x * intervX

        fill (255, 171, 230);
        rect (mx, my, rectS4, rectS4);
        
        fill (251,209,239);
        rect (mx, my, rectS3, rectS3);
        
        fill (177,221,160);
        rect (mx, my, rectS2, rectS2);
        
        fill (255);
        rect (mx, my, rectS1, rectS1);
        
      }
  
    }
    if ((mouseX>80) & (mouseX<340)){  
    crvd4= map(mouseX,280,580,150,300);
    rectS4= map(mouseX,280,580,45,100);
    }  //pink, blue squares expand when you move mouse left to right
    

  }
}

It was quite a challenge for me to create a pattern with six lines. I had to figure out how to place them continuously.