Category: Project-03-Dynamic-Drawing

Project-03-Dynamic-Drawing-Veronica

sketch


/*
Veronica Wang
Section B
yiruiw@andrew.cmu.edu
Project-03
*/

var r1 = 100; //size of ellipse 1
var r2 = 80; //size of ellipse 2
var r3 = 120; //size of ellipse 3
var locX = 200; //rotation center of ellipses
var locY = 250; //rotation center of ellipses
var angle = 1; //first angle of rotation
var angle2 = 1; //second angle of rotation
var angle3 = 1; //third angle of rotation
var angle4 = 1; //fourth angle of rotation
var on = true; //background color


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

function draw() {
//change background between black and white    
    if (on == true) {
        background(255);
      } else {
        background(0);
      }

    noStroke();
    //red ellipse
    fill(255, 0, 0, 150);
    ellipse(320, 100, mouseX, mouseX);
    //blue ellipse
    fill(0, 0, 255, 150);
    ellipse(locX,locY, mouseX, mouseX);
    //green ellipse
    fill(0, 255, 0, 150);
    ellipse(400, 450, mouseX, mouseX);

    //magenta ellipse
    push();
    translate(locX, locY);
    rotate(radians(angle));
    noStroke();
    fill(255, 0, 255, 150);
    ellipse(mouseX / 8 + 0.5 , mouseY / 8 + 1, r1 + mouseY / 2, r1 + mouseY / 2);
    pop();
    angle = angle + 1;

    //cyan ellipse
    push();
    translate(locX + 10, locY);    
    noStroke();
    fill(0, 255, 255, 150);
    rotate(radians(angle));
    ellipse(mouseX / 2 + 0.5 , mouseY / 2 + 1, r2 + mouseY / 1.5, r2 + mouseY / 1.5);
    pop();
    angle2 = angle2 + 2;

    //yellow ellipse
    push();
    translate(locX + 50, locY);    
    noStroke();
    fill(255, 255, 0, 150);
    rotate(radians(angle));
    ellipse(mouseX / 5 + 0.5 , mouseY / 6 + 1, r3 + mouseY / 3, r3 + mouseY / 3);
    pop();
    angle3 = angle3 + 0.5;

    //white line
    push();
    translate(locX, locY + 50);    
    noStroke();
    fill(255, 255, 255, 150);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(mouseX / 5 + 0.5 , mouseY / 6 + 1, 10, 1000);
    pop();
    angle3 = angle3 + 0.5;

    //black line
    push();
    translate(100, 100);    
    noStroke();
    fill(0, 0, 0, 150);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(mouseX / 2 + 0.5 , mouseY / 2 + 1, 20, 1000);
    pop();
    angle4 = angle4 - 1;

    //white line apprears at mouse click
    if (mouseIsPressed) {
        if (mouseButton == LEFT) {
            stroke(255);
            strokeWeight(30);
        } else {
            stroke(0);
        }
        line(0, 200, width, 50);
    }
}

//change background between black and white
function mousePressed() {
  if (on == true) {
    on = false;
  } else {
    on = true;
  }
}

In this project I explored different color models and the relationship between colors. I played around with ellipses of colors red, green, blue, cyan, magenta, and yellow, as well as the overlaps of these colors. The background also changes from white to black.

Anthony Ra – Project03 – Dynamic Drawing

sketch

/* Anthony Ra
Section-A
ahra@andrew.cmu.edu
Project-03-DynamicDrawing */


/* assigning altering variables */
var tor = 150;
var tot = 3;
var torr = 100;
var tort = 5;
var torrr = 30;
var tortt = 0.5;
var dir = 1;
var speed = 2;
var speedd = 5;

function setup() {
  createCanvas(640, 480, WEBGL);
  frameRate(100);
  noCursor();

}

function draw () {

/* altering color of background */
  var r = map(mouseX, 0, height, 220, 215);
  var g = map(mouseX, 0, height, 255, 0);
  var b = map(mouseX, 0, height, 0, 255);
  background(r, g, b);

  noStroke();
  rotateX(mouseX * 0.01);
  rotateY(mouseY * 0.01);
  ambientLight(40, 210, 60);
  ambientMaterial(90, 200, 100);
  speed = mouseX / 20;
  torus(tor + speed*dir, tot + speed*dir);

/* movement of larger torus */
  noStroke();
  rotateX(mouseX * 0.01);
  rotateY(mouseY * 0.01);
  ambientLight(150, 30, 50);
  ambientMaterial(100, 50, 100);
  speed = mouseX / 20;
  torus(torr + speed*dir, tort + speed*dir);

/* movement of smaller torus */
  noStroke();
  rotateX(mouseX * 0.01);
  rotateY(mouseY * 0.01);
  ambientLight(50);
  ambientMaterial(150);
  speedd = mouseX / 10;
  torus(torrr + speedd*dir, tortt + speedd*dir);

}

This process was definitely a bit more challenging than the previous projects because I was thinking more about which lines of code was going to work rather than what I wanted my end product to look like. Something new that I played with is the implementation of 3-dimensional shapes and its movement along the mouse. I felt that toruses best represented the different angles that can be controlled by the mouse.

Tanvi Harkare – Project 03 – Dynamic Drawing

tharkare project 3

/* Tanvi Harkare
Section B
tharkare@andrew.cmu.edu
Project-03-Dynamic Drawing */ 

var r = 1.9;
/*taking the canvas height and width and divided by 255,
the max number allowed in an RGB value. This ensure that no matter
where mouseX or Y is, the colors will continue changing*/

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

function draw() {
    noStroke();
    background(255 - mouseX/1.9); //fades background out from black to white
    var i = 0; //keeps count of how many rectangles are created
    var posX = 10; //starting x point for rectangle
    var posY = 5; //starting y point for rectangle
    while(i < 130){
        push();
        translate(mouseX, mouseY);
        rotate(radians(mouseX));
        fill(10, mouseX/r, mouseY/r);
        rect(posX, posY, mouseX/12.8, mouseY/12.8); //range for rectangle size is 10 to 50 pixels. 
        i++;
        posX += 50;
        if(posX >= width){ //creates a new row of rectangles
            posX = 10;
            posY += 50;
        }
    }
    pop();
}

I had a lot of fun with this project, especially in experimenting with the while loop. An example of this is analyzing what happens when certain functions are included inside the loop. My push() function is included in the while loop, while the pop() function is called after the while loop ends. Doing vice versa also creates a similar drawing. Depending on the location of the mouse in the x and y direction, the color, size, position, and angle of the rectangles change. Additionally as the mouse moves across the canvas, the background fades from black to white. I was inspired by simple geometric shapes to create a drawing that catches the eye.

Project 03 – Min Lee

sketch

function setup() {
    createCanvas(640, 480);
    background(208, 57, 64);
}

function draw() {
	background(208, 57, 64);

	translate(320, 240);

	var squareRotate = map(mouseX, 0, width, 0, TWO_PI);
	var squareSize = map(mouseX, 0, width, 0, 200);
	var squareSize2 = map(mouseY, 0, width, 0, 200);
	var squareSize3 = map(mouseY, 0, height, 0, 200);
	var rgbR = 1;
	var rgbG = 2;
	var rgbB = 0.5;
	var circleR = map(mouseX, 0, width, 350, width + 150);
	var faceSize = map(mouseX, 0, width, 1, 10);
	var textChange = map(mouseX, 0, width, 80, -60);
	var mouthChange1 = map(mouseX, 0, width, 30, 60);
	var mouthChange2 = map(mouseX, 0, width, 20, 50);

	//circle around head
	noStroke();
	fill(156, 38, 40);
	ellipse(0, 0, circleR + 420, circleR + 420);
	fill(208, 57, 64);
	ellipse(0, 0, circleR + 400, circleR + 400);
	fill(163,45,47);
	ellipse(0, 0, circleR + 360, circleR + 360);
	fill(188, 49, 52);
	ellipse(0, 0, circleR + 320, circleR + 320);
	fill(211, 66, 74);
	ellipse(0, 0, circleR + 280, circleR + 280);
	fill(163,45,47);
	ellipse(0, 0, circleR + 250, circleR + 250)
	fill(188, 49, 52);
	ellipse(0, 0, circleR + 220, circleR + 220);
	fill(211, 66, 74);
	ellipse(0, 0, circleR + 180, circleR + 180);
	fill(208,57,64);
	ellipse(0, 0, circleR + 140, circleR + 140);
	fill(217,87,98);
	ellipse(0, 0, circleR + 100, circleR + 100);
	fill(213, 70, 75);
	ellipse(0, 0, circleR + 90, circleR + 90);
	fill(208, 57, 64);
	ellipse(0, 0, circleR + 60, circleR + 60);
	fill(217,87,98);
	ellipse(0, 0, circleR + 50, circleR + 50);
	fill(213, 98, 120);
	ellipse(0, 0, circleR + 30, circleR + 30);
	fill(60, 125, 195);
	ellipse(0, 0, circleR, circleR);

	//head
	push();
	rotate(0 + squareRotate);
	noStroke();
	fill(247, 204, 160);
	arc(0, 0, 209, 225, 0, PI);
	arc(5, 12, 200, 200, 0, 270);
	//hair
	noStroke();
	fill(150,86,3);
	arc(-width/4 + 65, -20, 50, 200, 0, PI, CHORD);
	//ear
	fill(247,204,160);
	ellipse(-width/4 + 70,20,30,40);
	//hair
	fill(150,86,3);
	arc(-width/4 + 85, -20, 30, 140, 0, PI, CHORD);
	arc(-width/4 + 105, -20, 20, 100, 0, PI, CHORD);
	//eyes
	fill(255, 255, 255);
	stroke(0, 0, 0);
	strokeWeight(1);
	ellipse(0, 25, 8, 8);
	ellipse(45, 25, 8, 8);
	//mouth
	noFill();
	stroke(0, 0, 0);
	strokeWeight(2);
	curve(5, mouthChange1, 10, 40, 40, 40, 50, mouthChange2);
	//eyesbrows
	noFill();
	stroke(0, 0, 0);
	strokeWeight(4);
	line(41, 8, 51, 8);
	line(-5, 8, 5, 8);
	//#nocap
	noStroke();
	fill(43, 43, 43);
	arc(-5, -20, 230, 210, PI, TWO_PI);
	fill(35, 35, 35);
	rect(-125, -40, 240, 30, 5, 5, 5, 5);
	pop();

	//'Hello' text
	rotate(-PI/15);
	textAlign(CENTER);
	textSize(textChange);
	fill(194, 203, 152);
	textFont('Georgia Italic');
	text("That's all Folks!", 0, 150);
}

For this project, I wanted to create a “Looney-Tunes style” graphic in which I could create an interactive cartoon. It involved a lot of tinkering, but I ended up making a dynamic drawing in a style that I prefer and that is within my skill range.

Eunice Choe – Project-03

sketch

/*Eunice Choe
Section E
ejchoe@andrew.cmu.edu
Project-03*/

var sunD = 70;
var skyR = 65;
var skyG = 82;
var skyB = 97;
var cloudD = 100;
// heat waves
var diam = 50;
var dir = 1;
var speed = 2;
// ferris wheel
var ferrisDiam = 350;
var ferrisCarDiam = 50;
// ferris wheel base
var baseDiam = 100;

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

function draw() {

// background changing from dark to light - changing color
    background(skyR, skyG, skyB);
    skyR = map(mouseY, 0, height, 187, 65);
    skyG = map(mouseY, 0, height, 222, 82);
    skyB = map(mouseY, 0, height, 255, 97);
// sun & cloud moving with mouse - changing position
    noStroke();
    fill(247, 225, 136);
    var m = constrain(mouseY, 380, 0);
    var q = constrain(mouseY, 150, 0);
    ellipse(m, constrain(mouseY, 100, height), sunD, sunD);
    fill(255, 255, 255);
    ellipse(q, constrain(mouseY, 150, height), cloudD, cloudD);
    ellipse(q + 50, constrain(mouseY, 150, height), cloudD * .85 , cloudD * .85);
    ellipse(q - 60, constrain(mouseY, 150, height), cloudD * .5 , cloudD * .5);
// heat waves from sun - changing size
if (mouseY < 100){
    push();
    stroke(255);
    noFill();
    ellipse(380, 100, diam, diam);
    ellipse(380, 100, diam*1.5, diam*1.5);
    ellipse(380, 100, diam*2, diam*2);
    pop();
    diam += dir * speed;
    if (diam > 300){
      diam = 0;
    }
}
// ground
    noStroke();
    fill(177, 177, 177);
    rect(0, 400, width, height);
// ferris wheel base
    push();
    fill(183, 103, 44);
    ellipse(width / 2, height / 2, baseDiam, baseDiam);
    strokeWeight(20);
    stroke(183, 103, 44);
    line(width / 2, height / 2, 380, 550);
    line(width / 2, height / 2, 100, 550);
    pop();
// ferris wheel
    push();
    stroke(183, 103, 44);
    strokeWeight(10);
    noFill();
    ellipse(width / 2, height / 2, ferrisDiam, ferrisDiam);
    pop();
// ferris wheel spokes
    push();
    translate(width / 2, height / 2);
    stroke(183, 103, 44);
    strokeWeight(3);
    rotate(millis() / mouseX / 6);
    line(ferrisDiam / 2, 0, 0, 0);
    line(-ferrisDiam / 2, 0, 0, 0);
    line(0, ferrisDiam / 2, 0, 0);
    line(0, -ferrisDiam / 2, 0, 0);
    pop();
// ferris wheel cars
    push();
    fill(202, 87, 87);
    translate(width / 2, height / 2);
    rotate(millis() / mouseX / 6); // changing speed depending on mouseX position
    ellipse(ferrisDiam / 2, 0, ferrisCarDiam, ferrisCarDiam);
    fill(93, 87, 202);
    ellipse(-ferrisDiam / 2, 0, ferrisCarDiam, ferrisCarDiam);
    fill(189, 118, 222);
    ellipse(0, ferrisDiam / 2, ferrisCarDiam, ferrisCarDiam);
    fill(87, 202, 101);
    ellipse(0, -ferrisDiam / 2, ferrisCarDiam, ferrisCarDiam);
    pop();


}

This project was really difficult for me, but I had fun experimenting with different variables. I wanted to incorporate movement with a spinning circle so I created a moving ferris wheel. I also chose to show contrast with the day/night theme and the varying speeds of the ferris wheel.

Rjpark – Project 03 – Dynamic Drawing

rjpark_dynamicdrawing

// create variables for randomizing color of circles
var r1 = 255;
var b1 = 0;
var g1 = 255;
var r2 = 0;
var b2 = 255;
var g2 = 255;
var r3 = 255;
var b3 = 255;
var g3 = 0;
var r4 = 170;
var b4 = 255;
var g4 = 170;
// create variables for direction change
var angle = 0;

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

function draw() {
    background(0);
    // restrict mouseX to 0-640
    var x = max(min(mouseX, 640), 0);
    // create variable for size change of circles
    var size = x * 400 / 640;
    push();
    rotate(radians(angle));
    // pink circle
    fill(r1, b1, g1);
    ellipse(x, 0, size, size);
    // blue circle
    fill(r2, b2, g2);
    ellipse(640, x, size, size);
    // yellow cirlce
    fill(r3, b3, g3);
    ellipse(640 - x, 480, size, size);
    // green circle
    fill(r4, b4, g4);
    ellipse(0, 480 - x, size, size);
    pop();

    if (x < 250) {
        // colors change
        r1 = 0;
        b1 = 255;
        g1 = 255;
        r2 = 255;
        b2 = 255;
        g2 = 0;
        r3 = 170;
        b3 = 255;
        g3 = 170;
        r4 = 255;
        b4 = 0;
        g4 = 255;
        // direction changes
        angle = 0;
    }
    if (x > 250) {
        // colors change
        r1 = 255;
        b1 = 0;
        g1 = 255;
        r2 = 0;
        b2 = 255;
        g2 = 255;
        r3 = 255;
        b3 = 255;
        g3 = 0;
        r4 = 170;
        b4 = 255;
        g4 = 170;
        // direction changes
        angle += 5;
    }
}

The 4 things I changed about the circles according to the movement of the mouse across the screen (not up and down) were color, direction, size, and position. As the mouse moves towards the right, the colors change, the size of the circles increase and the circles start to rotate. In addition, the circle follows the mouse across the screen until rotation.

Ean Grady-Project3-Dynamic Drawing

sketch

//Ean Grady
//section B
//egrady@andrew.cmu.edu
//Project-03

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

function draw() {
    var r = int(mouseX)
    var g = int(mouseY)
    background(r, g, 100);
    var m = max(min(mouseX, 640), 0);
    var z = max(min(mouseY, 480), 0);
    var size = m;
    var size2 = z;
    noStroke();
    ellipseMode(RADIUS);
    fill(mouseY, mouseX, 100)
    ellipse(m * 200 / 400, z, size, size2);
    rect(200 + m * 200 / 400, z/2, size, size2);
    ellipse(400 + m * 200 / 400, z/3, size, size2);
    fill(mouseX, mouseY, 100)
    rect(100 + m * 200 / 400, z/4, size, size2);
    ellipse(350 + m * 200 / 400, z/5, size, size2);
    size = 400 - size;
    fill(mouseY, mouseX, 150)
    ellipseMode(CENTER);
    rect(300 + m * 200 / 400, z, size, size2);
    ellipse(150 + m * 200 / 400, z/2, size, size2);
    fill(mouseY, mouseX, mouseY)
    ellipse(250 + m * 200 / 400, z/3, size, size2);
    rect(50 + m * 200 / 400, z/4, size, size2);
    ellipse(450 + m * 200 / 400, z/5, size, size2);
    size = 320 - size;
    fill(mouseY, mouseX, 50)
    ellipseMode(CORNERS);
    ellipse(z * 200 / 400, m, size, size2);
    rect(200 + z * 200 / 400, m/2, size, size2);
    ellipse(400 + z * 200 / 400, m/3, size, size2);
    fill(mouseX, mouseY, 150)
    ellipse(100 + z * 200 / 400, m/4, size, size2);
    ellipse(150 + z * 200 / 400, m/5, size, size2);
    size = 340 - size;
    fill(mouseX, 100, mouseY);
    ellipseMode(CORNER);
    rect(250 + z * 200 / 400, m, size, size2);
    ellipse(300 + z * 200 / 400, m/2, size, size2);
    fill(mouseX, 100, mouseY)
    ellipse(350 + z * 200 / 400, m/3, size, size2);
    fill(100, mouseX, mouseY)
    ellipse(450 + z * 200 / 400, m/4, size, size2);
    rect(50 + z * 200 / 400, m/5, size, size2);
    fill(mouseY, mouseX, 100)
    ellipse(75 + z * 200 / 400, m/5, size, size2);
}

I really enjoyed this project because it allowed me to get familiar with using the mouseX and mouseY variables, I also began to start feeling a lot more comfortable with programming in p5.js through making the dynamic drawing. Essentially, what I did was start with the example dynamic drawing as a template and then worked from there.

Dani Delgado Project-03 – Dynamic Drawing

sketch

/*Dani Delgado 
Section E
ddelgad1@andrew.cmu.edu
Project-03
*/

//background color variables
var bgB = (20, 100);
var bgG = (20, 100);

//line weight variables
var rectW = 40;
var rectX = rectW * 2;

//angles for rotation
var a1 = 0;

//moon growing variable
var moong = 100;
var speed = 3;
var direc = 1; 

//eye glow variables
var eyeLW = 0;
var eyeLH = 0;
var eyeRW = 0;
var eyeRH = 0;

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

function draw() {
	//color changing background; constrain the colors to make it appear darker
	bgR = mouseX;
	bgB = constrain(mouseX, 10, 100);
	bgG = constrain(mouseY, 20, 100);

	background (10, bgG, bgB);

	//draw the moon
	//the moon rotates based on the mouseY coordinate 
	fill(215, 211, 190);
	push();
	a1 = (mouseY / height) * 180;
	rotate(radians(a1));
	ellipse(20, 10, 225, 225);
	pop();
	a1 = a1 - 3;

	//draw the "trees" that are behind the primary animal
	fill (60, 34, 10);
	rect(rectX - 80, 0, rectW, height);
	rect(rectX * 2, 0 , rectW, height);
	rect(rectX * 4, 0, rectW, height);
	rect(rectX * 6, 0, rectW - 6, height);
	rect(rectX, 0, rectW - 14, height);

	//draw the yellow moving bird which moves on the -mouseX and -mouseY coordinates 
	//start with the bird body
	fill(255, 221, 51);
	ellipse(-mouseX + 640, -mouseY + 480, 40, 40);
	//make bird tail
	triangle(-mouseX + 655, -mouseY + 510, -mouseX + 700, -mouseY + 515, -mouseX + 705, -mouseY + 525);
	//make bird eye and beak
	fill(20);
	ellipse(-mouseX + 649, -mouseY + 488, 10, 10);
	fill(255, 140, 25);
	triangle(-mouseX + 635, -mouseY + 500, -mouseX + 640, -mouseY + 505, -mouseX + 640, -mouseY + 495);

	//draw the red moving bird which moves on the mouseX and mouseY coordinates
	//start with the bird body
	fill(255, 120, 51);
	ellipse(mouseX, mouseY, 40, 40);
	//make bird tail
	triangle(mouseX + 15, mouseY + 30, mouseX + 60, mouseY + 35, mouseX + 65, mouseY + 45);
	//make bird eye and beak
	fill(20);
	ellipse(mouseX + 9, mouseY + 8, 10, 10);
	fill(255, 140, 25);
	triangle(mouseX - 5, mouseY + 20, mouseX, mouseY + 25, mouseX , mouseY + 15);


	// draw the "trees" that are in front of the moving birds 
	noStroke();
	fill(60, 34, 10);
	rect(rectX * 3, 0, rectW, height);
	rect(rectX * 5, 0, rectW, height);
	rect(rectX * 7, 0, rectW - 2, height);
	rect(rectX, 0, rectW - 10, height);

	//draw the primary animal
	//draw the body of the primary animal
	fill(82, 48, 0);
	rect(width / 3.20, height / 1.5, 300, 200, 90, 90, 0, 0);
	//draw the belly fur highlight
	fill(130, 90, 10);
	rect(width / 2.28, height / 1.10, 150, 60, 90, 90, 0, 0);
	//draw primary animal's head
	//draw the basic head shape (circle)
    fill(102, 68, 0);
    ellipse(width / 2.5, height / 2.5, 200, 200);
    //draw the facial features (ears, snout, nose)
    arc(width / 2 - 70, height / 2.5 + 10, 60, 65, 2, 5.6, PI, OPEN);
	arc(width / 1.5 - 20, height / 2.5 + 10, 60, 65, 3.75, 8, PI + QUARTER_PI, OPEN);
	fill(150, 100, 10);
	arc(width / 2 - 60, height / 2.5 + 25, 28, 32, 2, 5.6, PI, OPEN);
	arc(width / 1.5 - 5, height / 2.5 + 25, 28, 32, 3.75, 7.5, PI, OPEN);

	ellipse(width / 2.5 + 50, height / 1.6, 100, 70);
	fill(60, 8, 0);
	ellipse(width / 2 + 16, height / 1.43, 40, 30);

	//draw the eyes
	//eyes will glow when you mouse over them 
	eyeLW = width / 2 - 25;
    eyeLH = height / 2 + 15;
    eyeRW = width / 2 + 60;
    eyeRH = height / 2 + 15;

    var eyedim = 35 
	if ((mouseX > eyeLW) & (mouseX < eyeLW + eyedim) &&
		(mouseY > eyeLH) && (mouseY < eyeLH + eyedim) ||
		(mouseX > eyeRW) & (mouseX < eyeRW + eyedim) &&
		(mouseY > eyeRH) && (mouseY < eyeRH + eyedim)) {
		fill(255, 238, 153);
	} else {
		fill(60, 8, 0);
	}
	ellipse(eyeLW, eyeLH, eyedim, eyedim);
	ellipse(eyeRW, eyeRH, eyedim, eyedim);
}

I started out this project in a very abstract way, only drawing moving ellipses and rectangles that followed the mouse at varying degrees of offset. However, when I woke up one day this week and my first thought was about an animal in the woods, I decided that exploring that concept would be a cute direction. And so, I drew this little scene.

Project 3 – Sara Frankel Dynamic Drawing

sketch

//flower size
var fradius1 = 30;
var fradius2 = 60;
var fradius3 = 120;
//petal size
var pradius1 = 4;
var pradius2 = 80;
var pradius3 = 160;
//number of petals on flower
var numpetals = 6;
//Boolean if mouse on flower
var onFlower1 = false;
var onFlower2 = false;
var onFlower3 = false;
//color of flower
var fcolor1 = 'yellow';
var fcolor2 = 'yellow';
var fcolor3 = 'yellow';
//color of petal
var pcolor1 = 255; 
var pcolor2 = 255;
var pcolor3 = 255;
//color of text & boolean of if mouse is on text
var textcolor = 255;
var ontext = false;

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

function draw() {
	noStroke();
	background('blue');
	//change background color according to mouseX
	if (mouseX <= width/2) {
		background('orange');
	}

	//to insert text and change the color of text according to position of mouse
	fill(textcolor);
	if (mouseX <= width/2) {
		text('Oopsie Daisy', 10,30);
		}	
	if (mouseX >= 10 & mouseY <= 30 && mouseX<=100 && mouseY >= 15) {
		if (!ontext) {
		textcolor = color(random(0,255), random(0,255), random(0,255));
		}  ontext = true;
		} else {
			ontext = false;
			textcolor = 255;
	}

	if (mouseX <= width & mouseY <= height) {
		numpetals = 2*mouseX/48 + 6; //changing the number of petals dependant on mouse
		pradius1 = mouseX/48 * 4 + 4; //modifying radius of petals based on mouse
		pradius2 = mouseX/48 * -8 + 80;
		pradius3 = mouseX/48 * -16 + 160;
	}
	
	//changing the color of the flowers based on the location of the mouse
	if ((mouseX - width/4) * (mouseX - width/4) + (mouseY - height*0.20) * (mouseY - height*0.20) < fradius1 * fradius1) {
		if(!onFlower1) {
			fcolor1 = random(0,255);
			pcolor1 = color(random(0,255), random(0,255), random(0,255));
		}
		onFlower1 = true;
	} else { 
		onFlower1 = false;
		fcolor1 = 'yellow';
		pcolor1 = 255;
	}
	fill(fcolor1);
	ellipse(width*0.25, height*0.20, fradius1, fradius1); // drawing the center of flower

	//changing the color of the flowers based on the location of the mouse
	if ((mouseX - width*0.75) * (mouseX - width*0.75) + (mouseY - height*0.30) * (mouseY - height*0.30) < fradius2 * fradius2) {
		if(!onFlower2) {
			fcolor2 = random(0,255);
			pcolor2 = color(random(0,255), random(0,255), random(0,255));
		}
		onFlower2 = true;
	} else  {
		onFlower2 = false;
		fcolor2 = 'yellow';
		pcolor2 = 255;
	}
	fill(fcolor2);
	ellipse(width*0.75, height*0.30, fradius2, fradius2);// drawing the center of flower

	//changing the color of the flowers based on the location of the mouse
	if ((mouseX - width*0.4) * (mouseX - width*0.4) + (mouseY - height*0.65) * (mouseY - height*0.65) < fradius3 * fradius3) {
			if(!onFlower3) {
				fcolor3 = random(0,255);
				pcolor3 = color(random(0,255), random(0,255), random(0,255));
			}
			onFlower3 = true;
		} else  {
			onFlower3 = false;
			fcolor3 = 'yellow';
			pcolor3 = 255;
		}
			fill(fcolor3);
	ellipse(width*0.4, height*0.65, fradius3, fradius3);// drawing the center of flower


	//flower 1 (top left)
	fill(pcolor1); //color and number of petals based upon the location of mouse 
	for (var i = 0; i < 24-numpetals; i++) { //flower that grows proportionately in the opposite direction as the other flowers
		var angle = i * radians(360/(24-numpetals));
		ellipse(width * 0.25 + (fradius1/2 + pradius1/2) * cos(angle), height * 0.20 + (fradius1/2 + pradius1/2) * sin(angle), pradius1, pradius1);
	}
	
	//flower 2 (top right)
	fill(pcolor2); //color and number of petals based upon the location of mouse 
	for (var i = 0; i < numpetals; i++) {
		var angle = i * radians(360/numpetals);
		ellipse(width * 0.75 + (fradius2/2 + pradius2/2) * cos(angle), height * 0.30 + (fradius2/2 + pradius2/2) * sin(angle), pradius2, pradius2);
	}
	//flower 3 (bottom)
	fill(pcolor3); //color and number of petals based upon the location of mouse 
	for (var i = 0; i < numpetals; i++) {
		var angle = i * radians(360/numpetals);
		ellipse(width * 0.4 + (fradius3/2 + pradius3/2) * cos(angle), height * 0.65 + (fradius3/2 + pradius3/2) * sin(angle), pradius3, pradius3);
	}

}

For this project, I decided to use daisies as my inspiration. At first I was kind of confused as to how I was going to execute this image, but after planning it out and figuring out the appropriate code for each movement, I was able to successfully draw this out.

Connor McGaffin – Project 03 – Dynamic Drawing

sketch

/*
Connor McGaffin
Section C
cmcgaffi@andrew.cmu.edu
Project-03
*/

var a = 0
var angle = 0

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

//opening elevator door
function mousePressed(){
        a += 20;
}

function draw() {

    //change background color changes upon horizontal movement
    var c = mouseX / 2 * 2
    background(c, c, 100);

    //floors
    rectMode(CORNER);
    fill(240,0,0);
    rect(0,100,width,10);
    rect(0,240,width,10);
    rect(0,380,width,10);
    
    //shaft
    rectMode(CENTER);
    fill(0);
        rect(width / 2, height / 2,100,height)

    //clockwise shaft gears
        fill(80);
        push();
        translate(width / 2,100);
        rotate(radians(angle));
        rectMode(CENTER);
        rect(0,0,40,40);
        pop();

        push();
        translate(width / 2,0);
        rotate(radians(angle));
        rectMode(CENTER);
        rect(0,0,50,50);
        pop();

        angle = angle + 1;


    //elevator moves on vertical inverse
    //cable
    fill(250);
        rect(width / 2, height - 340 - mouseY, 10,height);

    //elevator room
    fill(200,200,255);
    strokeWeight(0);
        //elevator shell
        rect(width / 2,height - mouseY,100, 150);
        //elevator couple
        rect(width / 2, height - 85 - mouseY, 50,30);
    
    //elevator room
    fill(230,100,0);
        rect(width / 2, height - mouseY, 90, 130)


    //elevator door gap
    rectMode(CORNER);
    fill(0);
    rect(width / 2 + 45, height - mouseY - 65, 5, a);


}

In this project, I was inspired by an old iOS game I played as a child called “Tiny Tower” where the primary interface of navigation was via a cross-section of an elevator. In this sketch, I allowed for the inverse control of the elevator through vertical movement of the mouse while it is pressed. Horizontal movement changes the wallpaper color. Clicking on screen opens the door of the elevator. Gears in the elevator shaft run constantly.