Category: Project-03-Dynamic-Drawing

sketch

/*Elena Deng
Section E
  edeng1@andrew.cmu.edu
  Project-03
}
*/

var x=68; //position (X)
var y=240; // position (Y)





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

}

function draw() {
  background(30); //background color
  noStroke();
  rectMode(CENTER);

  if (mouseIsPressed) {
    background(255); //changes background color when mouse is pressed
  }



  fill(121,114,map(mouseY,0,height,170,190)); //changing the B value of the rectangle
  rect(x,map(mouseX,0,width,y-10,y+10),23,map(mouseY,0,height,50,80)); //(map(n,a,b,x,y))can set the range at which something changes


  fill(map(mouseY,0,height,230,250),147,map(mouseX,0,width,50,map(mouseY,0,height,90,150)));
  rect(x+28,map(mouseX,0,width,y-20,y+20),23,map(mouseY,0,height,200,100));


  fill(93,map(mouseX,0,width,80,110),166);
  rect(x+56,map(mouseX,0,width,y-20,y+20),23,map(mouseY,0,height,180,250));


  fill(map(mouseY,0,height,180,220),90,69);
  rect(x+84,y,23,map(mouseY,0,height,100,300));

  fill(map(mouseY,0,height,220,265),218,map(mouseX,0,width,115,130));
  rect(x+112,map(mouseX,0,width,y-30,y+30),23,map(mouseY,0,height,280,120));

  fill(196,map(mouseX,0,width,20,50),56); //changing the G value of the rectangle color
  rect(208,y,23,map(mouseY,0,height,10,300));

  fill(121,114,map(mouseY,0,height,150,240));
  rect(236,y,23,map(mouseY,0,height,170,300));

  fill(map(mouseY,0,height,180,220),95,map(mouseX,0,width,10,60));
  rect(264,map(mouseX,0,width,y-10,y+10),23,map(mouseY,0,height,80,150));

  fill(map(mouseX,0,width,120,150),148,186);
  rect(292,map(mouseX,0,width,y-20,y+20),23,map(mouseY,0,height,300,150));

  fill(map(mouseY,0,height,150,240),75,62);
  rect(320,y,23,map(mouseY,0,height,100,350));

  fill(map(mouseY,0,height,230,250),147,map(mouseX,0,width,40,90));
  rect(348,map(mouseX,0,width,y-30,y+30),23,map(mouseY,0,height,50,250));

  fill(93,map(mouseX,0,width,60,100),166);
  rect(376,y,23,map(mouseY,0,height,200,100));

  fill(map(mouseY,0,height,240,265),218,123);
  rect(404,map(mouseX,0,width,y-40,y+40),23,map(mouseY,0,height,100,300));

  fill(map(mouseY,0,height,180,200),map(mouseX,0,width,30,60),56);
  rect(432,y,23,map(mouseY,0,height,250,100));

  fill(209,90,map(mouseX,0,width,50,80));
  rect(460,map(mouseX,0,width,y-20,y+20),23,map(mouseY,0,height,100,200));

  fill(map(mouseX,0,width,120,140),147,186);
  rect(488,y,23,map(mouseY,0,height,250,100));

  fill(map(mouseY,0,height,195,215),95,(map(mouseX,0,width,30,50)));
  rect(516,map(mouseX,0,width,y-20,y+20),23,map(mouseY,0,height,150,50));

  fill(map(mouseY,0,height,235,255),147,69);
  rect(544,map(mouseX,0,width,y-15,y+15),23,map(mouseY,0,height,40,80));
//used the map tool to change y position
//used map tool to change Y size of rectangle
//used map tool to change various R,G,B values to make a sort of variation between colors
}

This project was really fun! At first I got a slow start because I didn’t know what my four variations would be, but I had the general idea of what I wanted the end result to be. I really like the color palette I chose and my idea to change the mouse pressed came from what I learned about color theory lately.

Christine Chen-Project-03-Dynamic Drawing

/*
Christine Chen
Section E
cyc1@andrew.cmu.edu
Project-03-Dynamic Drawing
*/

var angle = 0; //angle for square rotation

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

function draw() {
    scale(0.95); //scaling it down so graphics won't be cut by WordPress
    //left side is for sadness
    //right side is for happiness

    //LEFT OF CANVAS IS BLUE
    if (mouseX < 320){
        background(129, 164, 235);
    }

    //RIGHT OF CANVAS IS ORANGE
    if (mouseX > 320){
        background(257, 141, 47);
    }

    //LINE OF SCALE
    fill(255);
    rect(100, 240, 440, 5); //long horizontal line for scale
    rect(320, 233, 5, 20); //line for midpoint

    //ROTATING SQUARE
    var x = mouseX
    push();
    if (x < 320){ //square turns red when on left
        fill(255, 0, 0);
    } else {
        fill(0, 255, 36);//square turns green when on right
    }

    if (x <= 100){ //restricts movement of x to be on the line of scale
        x = 100;
    } else if (x >= 540) { 
        x = 540;
    }

    translate(x, 240); //square would move horizontally according to x
    rotate(radians(angle));
    rectMode(CENTER); 
    rect(0, 0, 15, 15);
    pop();


    var squareSpeed = 0; 
    if (x < 320){ //square speeds up towards left
        squareSpeed = (320 - x + 320)/90;
    } else if (x > 320) { //square speeds up towards right
        squareSpeed = x/90;
    }

    angle = angle + squareSpeed;

    //----------EMOJI CODES----------
    var blue = color(180, 244, 255);
    var yellow = color(255, 228, 0);
    var size = 100;

    //FACE
    if (x < 320){ //emoji turns sad and increases size towards left
        noStroke();
        fill(blue); 
        var control = (320 - x + 320)/500; 
    } else { //emoji turns happy and increases size towards right
        noStroke();
        fill(yellow); 
        var control = x/500; 
    }

    ellipse(x, 170, size * control, size * control);

    //EYES
    fill(0);
    ellipse(x + 10, 155, 5, 5); //right eye
    ellipse(x - 10, 155, 5, 5); //left eye

    //MOUTH
    if (x > 320){ //happy mouth
        fill(228, 103, 126); //pink
        arc(x, 165, 35, 35, 0, PI); //arc with top opening
    } else { //sad mouth
        fill(79, 111, 203); //blue
        arc(x, 185, -35, -35, PI, TWO_PI); //arc with bottom opening
    }

    //NEGATIVE SIGN 
    let negativeColor = color(208); //resting color is gray
    if (x < 320){ //negative sign turns red 
        negativeColor = color(255, 0, 0);
    }
    fill(negativeColor);
    rect(40, 240, 20, 5);


    //POSITIVE SIGN
    let positiveColor = color(208); //resting color is gray
    if (x > 320){ //positive sign turns green
        positiveColor = color(0, 255, 36);
    }
    fill(positiveColor);
    rect(580, 240, 20, 5); //horizontal line
    rect(587.5, 233, 5, 20); //vertical line

}

I found this project quite challenging to start with as there are so many ways to address this project. In the end, I decided to create my own version of the emoji slider. I have always thought that the emoji slider on Instagram is not dramatic enough, so I took this project as a chance to create my own ideal version of the emoji slider with exaggerated features. Instead of having only one type of emotion, I used one end of the scale for sadness and the other one for happiness. I spent a lot of time figuring out how to make the face increase in size and the rotation square increase in speed on they approach the two ends of the scale. I finally figured out the equations after quite a while and it was definitely a fruitful gain for me! 🙂

sketch

/*
Alice Fang
Section E
acfang@andrew.cmu.edu
Project-03
*/

/*
When mouseX is > width/2, 
	-magenta circle shrinks while cyan circle grows
	-blue circle rotates clockwise, yellow circle couterclockwise

When mouseX is < width/2,
	-magenta circle grows while cyan circle shrinks
	-blue circle rotates counterclockwise, yellow circle clockwise

When mouseX is within the red circle
	-green circle rotates clockwise
	-green circle becomes smaller
	-green circle rotates more quickly
	-things become dark! goodbye light

Sometimes there is a delay with the growth/shrink of magenta and cyan circles-
neither I nor Prof. Dannenberg know exactly why 🙁 */

//circle diameters
var yellowD = 100;
var cyanD = 80;
var redD = 240;
var greenD = 80;
var magentaD = 320;
var blueD = 160;

var scale1 = 5; //constant rate of growth for cyan/magenta circles
var scale2 = -5; //constant rate of shrinking for cyan/magenta circles

//rotataion speed
var angle1 = 0; //blue circle
var angle2 = 0; //yellow circle
var angle3 = 0; //green circle (mouseX inside red circle)
var angle4 = 0; //green circle (mouseX outside red circle)
var angle5 = 0; //cyan circle
var angle6 = 0; //magenta circle

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

function draw() {
	background(255);

	if (dist(160, 280, mouseX, mouseY) < redD/2) {
		background(0); //switch background to black
	} else {
		background(255); 
	}

	var cyanS = constrain(cyanD, 40, 500); //limit growth of cyan
	var magentaS = constrain(magentaD, 40, 500); //limit growth of magenta
	
	if (mouseX > width / 2) {
		cyanD += scale1; //cyan increases in size
		magentaD += scale2; //magenta decreases in size
		angle1 += 5; //blue rotates clockwise
		angle2 -= 3; //yellow rotates counterclockwise
	} 
	if (mouseX < width /2) {
		cyanD += scale2; //cyan decrease in size
		magentaD += scale1; //magenta increase in size
		angle1 -= 3; //blue rotates counterclockwise, decreases speed 
		angle2 += 5; //yellow rotates clockwise, increases speed 
	}

	//cyan circle
	push();
	translate(width/2, height/2); 
	rotate(radians(angle5));
	angle5 -= 1; //rotation speed
	fill('rgba(0, 255, 255, 0.5)'); 
	ellipse(200, 160, cyanS, cyanS);
	pop();

	//magenta circle
	push();
	translate(width/2, height/2);
	rotate(radians(angle6));
	angle6 += 1; //rotation speed, 
	fill('rgba(255, 0, 255, 0.5)'); 
	ellipse(80, 40, magentaS, magentaS);
	pop();

	//red circle
	if (dist(160, 280, mouseX, mouseY) < redD/2) { //if mouse is inside red circle
		fill('rgba(0, 0, 0, 0.7)'); //become black
		ellipse(160, 280, redD, redD);
	} else {
		fill('rgba(255, 0, 0, 0.7)');
		ellipse(160, 280, redD, redD);
	}

	//blue circle
	push();
	translate(360, 240);
	rotate(radians(angle1));
	ellipseMode(CORNER);
	fill('rgba(0, 0, 255, 0.5)'); 
	ellipse(0, 0, blueD, blueD);
	pop();

	//yellow circle
	push();
	translate(360, 240);
	rotate(radians(angle2));
	ellipseMode(CORNER);
	fill('rgba(255, 255, 0, 0.7)');
	ellipse(80, 80, yellowD, yellowD);
	pop();

	//green circle
	if (dist(160, 280, mouseX, mouseY) < redD/2) { //if mouse is inside red circle
		push();
	    translate(160, 280);
	    rotate(radians(angle3));
	    angle3 += 8; //rotation speed, clockwise
	    fill('rgba(0, 255, 0, 0.7)');
	    ellipse(180, 0, greenD/2, greenD/2);
	    pop();
	} else { 
		push();
		translate(160, 280);
		rotate(radians(angle4));
		angle4 += -1; //rotation speed, counterclockwise
		fill('rgba(0, 255, 0, 0.7)'); 
	    ellipse(180, 0, greenD, greenD);
	    pop();
	}

	textSize(20);
	fill(255);
	if (dist(160, 280, mouseX, mouseY) < redD/2) { //if mouse is inside red circle
		text("goodbye!", mouseX, mouseY);
	} else {
		text("hello!", mouseX, mouseY);
	}
}

For this project, I was inspired by the RGB overlay. Originally, I wanted to set a condition where if two circles overlapped, the intersection would fill white, as would happen if you overlay-ed real RGB values. In the end, I decided to create something that was bright and bubbly, playing with opacity and color.

Also, a quick note. I sort of mentioned this in the comments, but nothing is random. Everything is dependent on the position of mouseX relative to the canvas (width/2), or to the red circle. The growth of the cyan and magenta circles lag a little, but will respond.

jennakim03

/* Jenna Kim (Jeeyoon Kim)
Section E
jeeyoonk@andrew.cmu.edu
Project 03
*/

var xpan = 200;
var ypan = 130;
var panWidth = 145;
var panHeight = 83;
var xhandle = 44;
var yhandle = 120;
var handleWidth = 84;
var handleHeight = 12;

var xegg = 200;
var yegg = 87;
var eggWidth = 71;
var eggHeight = 100;

var xnewpan = 456; 
var ynewpan = 324;
var newpanWidth = 277;
var newpanHeight = 161;
var newxhandle = 155;
var newyhandle = 320;
var newhandleWidth = 164;
var newhandleHeight = 24;

var angle1 = 6;
var distance = 0.1;

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


function draw() {
	//background color "change" when you move the cursor
	background(234, 210, 249);
	colorMode(RGB);
	R = (mouseX / width) * 255;
	G = (mouseY / width) * 255;
	var c = color(R, G, 200);
	background(c);

  //egg rotating around mouse
  noStroke(0);
  fill(255); //
  stroke(0);
  push();
  translate(mouseX, mouseY);
  rotate(radians(angle1));
  ellipse(50, 50, eggWidth, eggHeight);
  pop();
  angle1 = angle1 + 6;
  distance = distance + 0.1;

//when you drag to the right, the egg size increase!!
if (mouseX > 420) {
    eggWidth += 0.5;
    eggHeight +=0.5
}

	//if mouse is Pressed, Fried Egg appears (size change/position change)
if (mouseIsPressed) {
	//new pan drawing
	noStroke(0);
  	fill(114, 114, 114);
  	ellipse(xnewpan, ynewpan, newpanWidth, newpanHeight);
  	fill(94, 94, 94);
  	ellipse(xnewpan, ynewpan - 10, newpanWidth, newpanHeight);
  	rect(newxhandle, newyhandle, newhandleWidth, newhandleHeight);

  	//Fried Egg
  noStroke(0);
  	fill(256);
  	ellipse(456, 316, 160, 110);
  	fill(249, 183, 65);
  	ellipse(447, 306, 71, 42);
  } else {
	push();
  	//pan drawing
  	fill(114, 114, 114);
  	ellipse(xpan, ypan, panWidth, panHeight);
  	fill(94, 94, 94);
  	ellipse(xpan, ypan - 10, panWidth, panHeight);
  	rect(xhandle, yhandle, handleWidth, handleHeight);
  	pop();
}
  print(mouseIsPressed);

  textSize(17);
  fill(50);
  text('dancing egg', mouseX + 5, mouseY, 100, 100);

}

“DON’T FORGET TO PRESS THE CANVAS”

For this project, I put five interactions in total; swinging of the egg, egg transforming to another position, and size of the pan changing when mouse is clicked, egg size increasing slowly as the mouse moves to the right, and color change of the background when mouse is moved around the canvas. Through this project, I learned that there are so many different interactions you can do just by moving, dragging, clicking the mouse.