Category: Section E

sketch

/* Nina Yoo
Section E
nyoo@andrew.cmu.edu
Dynamic Drawing*/

var colorBack = 120;
var colorDia = 183;
var colorEye = 240;
var colorPupil = 0;
var pupilWidth = 19;
var pupilHeight = 19;
var tongueH =  50;
var sizeDia = 300; //rotate this and leave a afterimage
var angle = 0;
var tonguesizecha =1;

function setup() {
    createCanvas(600, 600);
    noStroke();
    //everything in relation to mouseY


}


function draw() {
 	 background(colorBack);


 	 
 	// For dia movemet and color
 	var DiaSizeCha = map(mouseY, 0, height, sizeDia, 600);

 	 //dia

 	 var anglemap = map (mouseY, 0, height, angle, 5);

 	 rotate(anglemap, 300 );
 	  


 	 var colorDiamap = map(mouseY, 0, height, 0, 256);

 	 fill(colorDiamap, 153, 153);
 	 noStroke();
 	 rectMode(CENTER);
 	 rect(300,300, DiaSizeCha, DiaSizeCha);
 	 pop(); // pop allows thhe face to separate from dia


 	 	
 	 //face
 	fill(233,194,144);
 	ellipse(300,300, 265, 265);

 	//mouth
 	fill(0);
 	arc(300, 365, 37, 30,0, PI);


 	//tongue map
 	var tongueMove = map(mouseY, 0, height, tonguesizecha, 5);

 	//tounge 
 	fill(240, 100, 100);
 	arc(300, 372, 37, tongueH*tongueMove,0, PI);

 	//outereye
 	push();
 	var colorEyemap = map(mouseY, 0, height, 0, 256);
 	fill(colorEyemap, 100,100);
 	arc (230, 288, 54,54,0 , PI);
 	pop();

 	push()
 	 var colorEyemap = map(mouseY, 0, height, 0, 256);

 	fill(colorEyemap, 100, 100);
 	arc (375, 288, 54,54, 0, PI);

 	//pupil move/map
 	var pupilMove = map( mouseY, 0, height, pupilHeight, 2);

 	//pupil  

 	fill(colorPupil, 20, 30);
 	arc(230, 288, pupilWidth +pupilMove, pupilHeight+pupilMove, 0, PI);


 	fill(colorPupil, 20, 30);
 	arc(375,288, pupilWidth + pupilMove, pupilHeight + pupilMove, 0, PI);







}

This assignment helped me think about multiple applications being used all at once. In order to accomplish this I made mouseY be depended on a lot. The idea was to make the user think that the mouse controlled the tongue and therefore control everything else. Having there be a common factor in all moving objects helped organize the code. This code also helped me better understand variables and the “map” function.

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.

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.