Category: Project-03-Dynamic-Drawing

Project-03

sketch3
function setup() {
    createCanvas(600, 450);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
	background(240, 156, 215);
	var h = min(mouseY/3, 50);
	var c = min(mouseY/2, 255);
	var w = max(min(mouseY/3, 50), mouseX/6);
	noStroke();
    fill(c); 
    //perimeter circles
    ellipse(30, 25, w, h);
    ellipse(30, 75, w, h);
    ellipse(30, 125, w, h);
    ellipse(30, 175, w, h);
    ellipse(30, 225, w, h);
    ellipse(30, 275, w, h);
    ellipse(30, 325, w, h);
    ellipse(30, 375, w, h);
    ellipse(30, 425, w, h);
    ellipse(138, 25, w, h);
    ellipse(246, 25, w, h);
    ellipse(354, 25, w, h);
    ellipse(462, 25, w, h);
    ellipse(570, 25, w, h);
    ellipse(570, 75, w, h);
    ellipse(570, 125, w, h);
    ellipse(570, 175, w, h);
    ellipse(570, 225, w, h);
    ellipse(570, 275, w, h);
    ellipse(570, 325, w, h);
    ellipse(570, 375, w, h);
    ellipse(570, 425, w, h);
    ellipse(138, 425, w, h);
    ellipse(246, 425, w, h);
    ellipse(354, 425, w, h);
    ellipse(462, 425, w, h);

	//lots of layered rectangles
	push();
	translate(300, 225);
	rotate(radians(mouseX));
	rectMode(CENTER);
	fill(214, 33, 235, mouseX/2); //purple
	rect(0, 0, mouseX, mouseX);
	fill(48, 167, 246, mouseX/2); //light blue
	rect(0, 0, (mouseX-20), (mouseX-20));
	fill(33, 236, 141, mouseX/2); //light green
	rect(0, 0, (mouseX-40), (mouseX-40));
	fill(236, 33, 101, mouseX/2); //hot pink
	rect(0, 0, (mouseX-60), (mouseX-60));
	fill(236, 128, 33, mouseX/2); //orange
	rect(0, 0, (mouseX-80), (mouseX-80));
	fill(229, 236, 33, mouseX/2); //yellow
	rect(0, 0, (mouseX-100), (mouseX-100));
    fill(214, 33, 235, mouseX/2); //purple (start repeat)
	rect(0, 0, (mouseX-120), (mouseX-120));
	fill(48, 167, 246, mouseX/2); //light blue
	rect(0, 0, (mouseX-140), (mouseX-140));
	fill(33, 236, 141, mouseX/2); //light green
	rect(0, 0, (mouseX-160), (mouseX-160));
	fill(236, 33, 101, mouseX/2); //hot pink
	rect(0, 0, (mouseX-180), (mouseX-180));
	fill(236, 128, 33, mouseX/2); //orange
	rect(0, 0, (mouseX-200), (mouseX-200));
	fill(229, 236, 33, mouseX/2); //yellow
	rect(0, 0, (mouseX-220), (mouseX-220));
	fill(214, 33, 235, mouseX/2); //purple (round 3)
	rect(0, 0, (mouseX-240), (mouseX-240));
	fill(48, 167, 246, mouseX/2); //light blue
	rect(0, 0, (mouseX-260), (mouseX-260));
	fill(33, 236, 141, mouseX/2); //light green
	rect(0, 0, (mouseX-280), (mouseX-280));
	fill(236, 33, 101, mouseX/2); //hot pink
	rect(0, 0, (mouseX-300), (mouseX-300));
	fill(236, 128, 33, mouseX/2); //orange
	rect(0, 0, (mouseX-320), (mouseX-320));
	fill(229, 236, 33, mouseX/2); //yellow
	rect(0, 0, (mouseX-340), (mouseX-340)); 
	fill(214, 33, 235, mouseX/2); //purple (round 4)
	rect(0, 0, (mouseX-360), (mouseX-360));
	fill(48, 167, 246, mouseX/2); //light blue
	rect(0, 0, (mouseX-380), (mouseX-380));
	fill(33, 236, 141, mouseX/2); //light green
	rect(0, 0, (mouseX-400), (mouseX-400));
	fill((236-(mouseX/2)), 33, 101, mouseX/2); //color will change on a scale between hot pink and dark blue
	rect(0, 0, (mouseX-420), (mouseX-420));
	pop();

    //curves
	noFill();
	stroke(255);
	strokeWeight(3);
	bezier(0, 0, 200, mouseY, 400, mouseY, 600, 0);
	bezier(0, 0, 200, (mouseY - 20), 400, (mouseY - 20), 600, 0);
	bezier(0, 0, 200, (mouseY - 40), 400, (mouseY - 40), 600, 0);
	bezier(0, 0, 200, (mouseY - 60), 400, (mouseY - 60), 600, 0);
	bezier(0, 0, 200, (mouseY - 80), 400, (mouseY - 80), 600, 0);
	bezier(0, 450, 200, (450 - mouseY), 400, (450 - mouseY), 600, 450);
    bezier(0, 450, 200, (470 - mouseY), 400, (470 - mouseY), 600, 450);
    bezier(0, 450, 200, (490 - mouseY), 400, (490 - mouseY), 600, 450);
    bezier(0, 450, 200, (510 - mouseY), 400, (510 - mouseY), 600, 450);
    bezier(0, 450, 200, (530 - mouseY), 400, (530 - mouseY), 600, 450);

}

I made this to experiment with different shapes, colors, and shapes. My original idea had a circle in the center instead of the rectangle, but after writing it, I realized that you couldn’t tell that the circle was rotating. I tried adding some lines across the circle to get the effect, but then I tried changing the shape and I liked that a lot more. I was also still able to include ellipses along the perimeter of the canvas. For the colors, I used a color reference website and started layering colors that I liked. Once I settled on the ones that I would use, I experimented with the order and the fade.

Project-03-Dynamic Drawing

proj3Download
// Amyas Ryan   Section A

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

}

function draw() {
    background(62, 100, 144);
    noStroke();

    //top ellipses
    let tone = 255 - (mouseY / 6)
    fill(tone , 105, 22);
    ellipse(100, 0, 100, mouseY * 1.5);
    fill(235, tone, 22);
    ellipse(300, 0, 100, mouseY * 1.5);
    fill(235, 105, tone);
    ellipse(500, 0, 100, mouseY * 1.5);

    //bottom ellipses
    fill(185, tone, 106)
    ellipse(0, 450, 100, mouseY * 1.5);
    fill(tone, 49, 106)
    ellipse(200, 450, 100, mouseY * 1.5);
    fill(185, 49, tone)
    ellipse(400, 450, 100, mouseY * 1.5);
    fill(tone, 49, tone)
    ellipse(600, 450, 100, mouseY * 1.5);

    //squares
    let opacity = 255 - (mouseX / 6);
    let sw = (mouseX / 4);
    stroke(255, 255, 255, sw);
    push();
    translate(100, 110);
    rectMode(CENTER);
    rotate(radians(mouseX));
    scale(mouseX / 30);
    fill(172, 68, 58, opacity);
    rect(0, 0, 20, 20);
    pop();
    push();
    translate(300, 220);
    rectMode(CENTER);
    rotate(radians(mouseX));
    scale(mouseX / 30);
    fill(242, 187, 49, opacity);
    rect(0, 0, 20, 20);
    pop();
    push();
    translate(480, 50);
    rectMode(CENTER);
    rotate(radians(mouseX));
    scale(mouseX / 30);
    fill(219, 163, 175, opacity);
    rect(0, 0, 20, 20);
    pop();
    push();
    translate(430, 350);
    rectMode(CENTER);
    rotate(radians(mouseX));
    scale(mouseX / 30);
    fill(212, 108, 64, opacity);
    rect(0, 0, 20, 20);
    pop();

}

Project 3: Dynamic Drawing

For this week’s project, I wanted to visualize my (poor) sleep schedule with code. I realized through my time in college that I work better at night, but this makes it hard for me to function normally in the daytime.

night:day
var faceWidth;

function setup() {
  createCanvas(450, 650);

}

function draw() {
  //sky color shift
  if (mouseX>= width/2.2) {
    background (255, 243, 170);//daytime
  } else {
    background (66, 56, 148); //nighttime
  }

  //base figure
  var faceWidth = width/2;
  push();
  noStroke();
  fill(20, 20, 50) //facecolor
  var faceShift = constrain(mouseX, 150, 500);
  ellipse (width/2, height/2, faceWidth, faceWidth);
    //body
    rectMode(CENTER);
    rect (width/2, height/2 + 300, faceWidth, 420, 50, 50,0, 0);
    pop();   
    
  //moon
  var moonX = constrain(mouseX, width/4, width/2);
    if (mouseX<width/2.5){
      noStroke();
      fill(66, 98, 167);
      ellipse(moonX, height/5, faceWidth/2, faceWidth/2);
      fill(66, 56, 148);
      ellipse(moonX +30, height/5, faceWidth/2, faceWidth/2);
    }
  //sun
  var sunX = constrain(mouseX, width- width/2, width - width/4)
    if (mouseX>width/2.2){
      noStroke();
      fill(255, 214, 139);
      ellipse(sunX, height/5, faceWidth/2, faceWidth/2);
      stroke(255, 214, 139);
      strokeWeight(2);
      noFill();
      ellipse(sunX, height/5, faceWidth/2 + 20, faceWidth/2 +20);
      ellipse(sunX, height/5, faceWidth/2 + 40, faceWidth/2+40);
    }
      
  
  //dayface
    //eyelids
    var eyeWidth= faceWidth/4
    push();
    
      //eyebag droop
      var bagdroop= constrain(mouseY, height/2, height/2 + faceWidth/10); //eyebag droop factor
    if(mouseX>width/2){
      //eyebag droop
      stroke(173, 85, 255);
      strokeWeight(3);
      fill(218, 170, 255);
      ellipse (176, height/2- faceWidth*1.5+ bagdroop, faceWidth/4, faceWidth/4)
      ellipse (width- 176, height/2- faceWidth*1.5 + bagdroop, faceWidth/4, faceWidth/4)
      }
    pop();
  
    //eyes
    push ();
    noStroke();
    fill(255);
    ellipse (176, height/2, eyeWidth, eyeWidth)
    ellipse (width- 176, height/2, eyeWidth, eyeWidth)
    pop();
  
    //eyelid droop
    var droop = constrain(mouseY, height/2- faceWidth/8, height/2);// eyelid droop factor
    if(mouseX>width/2){
      noStroke();
      fill(20, 20, 50);
      rect( 140, droop*.75+ eyeWidth/2, eyeWidth+20, eyeWidth)
      rect (width- 218, droop*.75+ eyeWidth/2, eyeWidth+20, eyeWidth);
    }
  
    //pupils
    push ();
    noStroke();
    fill(20, 20, 50);
    ellipse (176, height/2, faceWidth/8, faceWidth/8)
    ellipse (width- 176, height/2, faceWidth/8, faceWidth/8)
    pop();
    
  
    //mouth
    push();
    noFill();
    stroke(255);
    strokeWeight(10);
    beginShape ();
    curveVertex( width/2 -50, height/2 +40 );
    curveVertex( width/2 -50, height/2 +40 );
    curveVertex( width/2 -30, height/2 +55);
    curveVertex (width/2, height/2 + 60);
    curveVertex( width/2 +30, height/2 +55);
    curveVertex( width/2 +50, height/2 +40 );
    curveVertex( width/2 +50, height/2 +40);
    endShape();
    pop();
  
  
  //sky shift
  push();
  var bgshift = constrain (mouseX, 120, width - width/3) //shift only happens once
  translate (-50, -50)
  rotate (radians(bgshift*1.75))
  noStroke();
  fill(20, 20, 50);
  rect (0, 0, height* 1.5, height *1.75)
  pop ();
  

  
}

Project: Dynamic Drawing

A little house on a hill! Move left to right to see clouds, the sun, and the sky change. Move up and down to see the chimney puff smoke and some (abstract flowers).

sketchI tried using map() and it was pretty helpful!
The Illustrator sketch I originally did! Decided to take the door out.
var R= 0;
var G= 100;
var smokey = 0;
var Xcloud = 0;

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

function draw() {
    let R = map(mouseX, 0, width/2, 0, 150)
    background(R,150,130); //background color changes based on mouseX
  
    noStroke();
    //sky
    fill('#FFC773');
    circle(R,R,R); //sun moving
    //clouds moving based on mouseX
    fill('#EAF0FF');
    ellipse(442 + Xcloud, 83, 77, 59);
    ellipse(472 + Xcloud, 117, 77, 59);
    ellipse(416 + Xcloud, 115,84,64);
    ellipse(374 + Xcloud, 115,52,34);
    ellipse(319 + Xcloud,183,66,23);
    ellipse(265 + Xcloud,183,107,44);
    ellipse(206 + Xcloud,161,133,56);
    ellipse(172 + Xcloud,183,137,40);
    ellipse(76 + Xcloud,78,47,27);
    ellipse(4 + Xcloud,65,84,65);
    ellipse(45 + Xcloud, 79, 49,46);
  
    //smoke
    G = height-mouseY
    fill(234,210,194,G)
    circle(369, 210 + smokey, 28)
    fill(217,185,137,G)
    circle(386,170 + smokey,34)
    fill(217,206,191,G)
    circle(349,133 + smokey,42)
    fill(153,129,92,G)
    circle(390, 84 + smokey, 53)
   
    //grass
    fill('#BDFF9F');
    circle(82,446,412);
    fill('#507C41');
    circle(518,629,543);
  
    //house
    fill('#C39156')
    rect(184, 297, 231, 200,18);
    fill('#754C24')
    rect(348,205,42,99)
    fill('#876946')
    triangle(300,224,457,319,143,319);
    //grass again
    fill('#7EBA70');
    circle(94,689,539);
  
    //flowers and fill based on opacity with mouseY
    fill(258,118,109,G)
    circle(16,257,41)
    fill(238,174,243,G)
    circle(103,245,37)
    fill(255,205,108,G)
    circle(163,260,22)
    fill(145,137,227,G)
    circle(137,294,35)
    fill(258,118,109,G)
    circle(68,297,22)
    fill(238,174,243,G)
    circle(48,285,19)
    fill(258,118,109,G)
    circle(3,314,24)
    fill(145,137,227,G)
    circle(31,313,11)
    fill(255,205,108,G)
    circle(64,329,12)
    fill(238,174,243,G)
    circle(35,348,25)
    fill(145,137,227,G)
    circle(110,342,25)
    fill(255,205,108,G)
    circle(144,352,22)
    fill(258,118,109,G)
    circle(143,388,31)
    fill(255,205,108,G)
    circle(110,379,19)
    fill(255,205,108,G)
    circle(68,388,44)
    fill(258,118,109,G)
    circle(10,384,30)
    fill(255,205,108,G)
    circle(18,431,47)
    fill(145,137,227,G)
    circle(50,423,12)
    fill(238,174,243,G)
    circle(83,441,17)
    fill(145,137,227,G)
    circle(122,457,27,)
    fill(145,137,227,G)
    circle(157,422,27)
    fill(238,174,243,G)
    circle(192,438,42)
    fill(255,205,108,G)
    circle(18,486,12)
    fill(145,137,227,G)
    circle(53,510,57)
    fill(258,118,109,G)
    circle(106,504,12)
    fill(255,205,108,G)
    circle(153,498,38)
    fill(238,174,243,G)
    circle(118,527,19)
    fill(255,205,108,G)
    circle(230,502,41)
    fill(145,137,227,G)
    circle(200,539,32)
    fill(255,205,108,G)
    circle(92,561,19)
    fill(258,118,109,G)
    circle(296,520,37)
    fill(258,118,109,G)
    circle(260,541,12)
    fill(238,174,243,G)
    circle(143,575,65)
    fill(258,118,109,G)
    circle(25,593,65)
    fill(255,205,108,G)
    circle(265,541,12)
    fill(258,118,109,G)
    circle(310,571,27)
    fill(145,137,227,G)
    circle(462,367,65)
    fill(238,174,243,G)
    circle(518,385,30)
    fill(255,205,108,G)
    circle(589,353,97)
    fill(258,118,109,G)
    circle(611,439,58)
    fill(238,174,243,G)
    circle(550,426,19)
    fill(145,137,227,G)
    circle(485,429,39)
    fill(258,118,109,G)
    circle(445,414,16)
    fill(145,137,227,G)
    circle(589,506,58)
    fill(255,205,108,G)
    circle(533,479,22)
    fill(258,118,109,G)
    circle(451,488,56)
    fill(255,205,108,G)
    circle(515,510,44)
    fill(145,137,227,G)
    circle(533,554,29)
    fill(238,174,243,G)
    circle(599,588,81)
    fill(255,205,108,G)
    circle(500,600,38)
    fill(238,174,243,G)
    circle(410,585,105)
    fill(258,118,109,G)
    
   
   //some interaction stuff 
    smokey = mouseY
    Xcloud = mouseX //clouds moving

}

Project 3: Dynamic Drawing

sketch
//Jessie Chen
//D
var half = 225

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

function draw() {
    mouseX = constrain(mouseX, 0, 440);
    //bee
    background(123, 176, 223);
    noStroke();
    var bY = constrain(bY, 200, 300);
    var w = 15 + (mouseX * 0.03);
    var h = 10 + (mouseX * 0.03);
    //petal behind bee
    fill(233, 120, 79);
    ellipse(half, 330 - (h * 3), w * 3, h * 3);
    //bee
    push();
    var bY = 200;
    if (mouseX < half) {
        translate(60, 0);
         rotate(radians(15));
    } else {
       translate(-25, 110);
        rotate(radians(345));
    }
    fill(202, 228, 250);
    ellipse(mouseX - 5, bY - 13, w, h);
    ellipse(mouseX - 15, bY - 15, w, h); //wings
    fill(255, 229, 122);
    ellipse(mouseX, bY, 40, 25); //body
    fill(60, 60, 60);
    rect(mouseX - 15, bY - 9 , 5, 19, 100, 5, 40, 40); //black lines
    rect(mouseX - 6, bY - 12, 5, 24, 100, 5, 40, 40);
    rect(mouseX + 3, bY - 11.5, 5, 23, 100, 5, 40, 40);
    ellipse(mouseX + 13, bY - 2, 5, 5); //eye
    stroke(60);
    line(mouseX + 16, bY - 8, mouseX + 18, bY - 12); //attennas
    line(mouseX +14, bY - 8, mouseX + 14, bY - 14);
    line(mouseX - 21, bY, mouseX - 24, bY); //stinger
    //sun
    pop();
    fill(255, 213, 0);
    ellipse(half, 0, 250 + w, 250 + h);
    //clouds
    fill(245, 255, 255);
    rect(mouseX - 100, 50, 100, 75, 35);
    rect(mouseX - 60, 85, 95, 55, 35);
    rect(mouseX - 350, 55, 120, 55, 35);
    rect(mouseX + 100, 20, 120, 55, 35);
    rect(mouseX - 270, 40, 75, 50, 35);
    rect(mouseX + 300, 75, 80, 40, 35);
    rect(mouseX + 250, 65, 70, 30, 35);
    //stem
    fill(115, 172, 111);
    rect(half - 7.5, 340 - (h * 2), 15, 400, 30);
    //leaves
    push();
    translate(193, 100);
    rotate(radians(25));
    ellipse(half - 19, 440, w * 3, 20 + h);
    ellipse(half - 94, 280, w * 3, 20 + h);
    pop();
    push();
    translate(-150, 200);
    rotate(radians(335));
    ellipse(half + 19, 440, w * 3, 20 + h);
    //flower
    pop();
    fill(233, 120, 79); // back petals
    ellipse(half - 30, 360 - (h * 3), w * 4, h * 3);
    ellipse(half + 30, 360 - (h * 3), w * 4, h * 3);
    ellipse(half + 25, 345 - (h * 3), w * 5, h * 3);
    ellipse(half - 25, 345 - (h * 3), w * 5, h * 3);
    fill(255, 215, 102);
    ellipse(half, 360 - (h * 4), w * 3, h * 2); //center
    rect(half - 10, 385 - (h * 7), 2, 3 + h, 20);
    rect(half + 10, 385 - (h * 7), 2, 3 + h, 20);
    rect(half, 380 - (h * 7), 2, 3 + h, 20);
    rect(half - 20, 390 - (h * 7), 2, 3 + h, 20);
    rect(half + 20, 390 - (h * 7), 2, 3 + h, 20);
    fill(233, 120, 79); // front petal
    ellipse(half, 360 - (h * 3), w * 3, h * 3);
    
}

This was inspired by the mutualistic relationship between the bee and the flower. The bee is becoming full while the flower is being pollinated, allowing it to grow and reproduce.

Project 03 – Dynamic Drawing

Through the multiple squares on the canvas, I wanted to explore how different the overall image would look by manipulating the weight of the stroke. Moving your mouse in a circular motion would allow you to see the change in weight of the stroke for each color set of squares I used on the canvas.

abstraction
//Rachel Kim
//15-104(Section C)
//rachelki@andrew.cmu.edu
//Project-03

var angle = 0.0;

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

function draw() {
	background(155, 178, 145);
	push();

	//set pink squares
	noFill();
	strokeWeight(mouseX/5);
	stroke(232, 225, 239);
	rect(215, 72, 240, 401);
	rect(106, 131, 442, 142);
	rect(57, 17, 493, 550);
	rect(114, 338, 236, 95);

	//set green(a) squares
	noFill();
	strokeWeight(mouseX/10);
	stroke(196, 244,199);
	rect(38, 65, 168, 262);
	rect(138, 141, 430, 394);
	rect(62, 248, 311, 196);
	rect(297, 61, 287, 519);

	//set green(b) squares
	noFill();
	strokeWeight(mouseY/15);
	stroke(199, 255, 218);
	rect(13, 24, 514, 199);
	rect(270, 281, 205, 281);
	rect(49, 96, 141, 485);
	rect(106, 360, 421, 134);

	//set green(c) squares
	noFill();
	strokeWeight(mouseY/20);
	stroke(217, 255, 248);
	rect(20, 300, 390, 216);
	rect(241, 96, 309, 312);
	rect(75, 41, 287, 141);
	rect(422, 117, 81, 204);

}

Project-03: Dynamic Drawing

A little seesaw! The seesaw goes up and down with the horizontal position of your mouse. The little balls change shape with the speed of your mouse and change colors when they hit the seesaw.

dynamicdrawing
var balanceX = 0;			//set center seesaw position in the x direction
var balanceY = 0;			//set center seesaw position in the y direction
var balanceAngle = 0;		//set the angle of the seesaw based on the mouseX position
var ballSquish = 0;			//sets how tall the ball is based on the velocity of the mouse			
var ballStretch = 0;		//sets how wide the ball is based on the velocity of the mouse
var leftBallY = -63;		//sets the vertical position of the left ball
var rightBallY = -63;		//sets the vertical position of the left ball
var pink1 = 255;			//sets original r value for left ball
var	pink2 = 151;			//sets original g value for left ball
var pink3 = 202;			//sets original b value for left ball
var orange1 = 249;			//sets original r value for left ball
var orange2 = 176;			//sets original g value for left ball
var orange3 = 32;			//sets original b value for left ball

function setup() {
    createCanvas(600, 450);
    background(255)
    rectMode(CENTER);
    frameRate(20);
}

function draw() {
	//set color of the sky
	background(160, 218, 223);

	//draw cloud 1
	fill(255);
	noStroke();
	beginShape();
	curveVertex(288,111);
	curveVertex(261,118);
	curveVertex(254,135);
	curveVertex(237,142);
	curveVertex(217,146);
	curveVertex(210,166);
	curveVertex(225,183);
	curveVertex(243,186);
	curveVertex(260,188);
	curveVertex(269,197);
	curveVertex(285,197);
	curveVertex(304,197);
	curveVertex(311,186);
	curveVertex(328,192);
	curveVertex(345,183);
	curveVertex(380,181);
	curveVertex(383,161);
	curveVertex(377,144);
	curveVertex(353,144);
	curveVertex(347,127);
	curveVertex(323,115);
	curveVertex(307,127);
	endShape();

	//draw cloud 2
	beginShape();
	curveVertex(495,20);
	curveVertex(451,29);
	curveVertex(449,46);
	curveVertex(431,60);
	curveVertex(409,61);
	curveVertex(408,101);
	curveVertex(480,123);
	curveVertex(501,111);
	curveVertex(515,106);
	curveVertex(547,122);
	curveVertex(559,100);
	curveVertex(567,73);
	curveVertex(586,62);
	curveVertex(566,43);
	curveVertex(525,53);
	endShape();

	//draw cloud 3
	beginShape();
	curveVertex(86,48);
	curveVertex(42,36);
	curveVertex(37,78);
	curveVertex(35,97);
	curveVertex(73,119);
	curveVertex(110,89);
	curveVertex(168,91);
	curveVertex(169,59);
	curveVertex(129,37);
	endShape();

	fill(255, 245, 103);	//set color of seesaw base
	noStroke();
	triangle(306, 324, 234, 432, 378, 432);		//draw seesaw base
	
	fill(187, 211, 48);		//set ground color to green
	rect(300, 441, 600, 18)		//draw grass
	
	translate(306, 324);	//move the origin to the center of the seesaw
	//the seesaw will rotate with the horizontal position of the mouse
	if (mouseX < width) {
		rotate(radians(45 * (mouseX - 300)/600));
	}
	fill(255, 245, 103);
	rect(balanceX, balanceY, 551, 18);							//draw seesaw
	
	fill(pink1, pink2, pink3);										//set left ball initial color to pink
	ellipse(-234, leftBallY, 108 - ballSquish, 108 + ballStretch);	//draw left ball
	
	fill(orange1, orange2, orange3);											//set right ball initial color to orange
	ellipse(216, rightBallY, 108 + ballSquish, 108 - ballStretch);		//draw right ball

	ballSquish = (mouseY - pmouseY)*2							//change the height of each ball to vary with mouse velocity
	ballStretch = (mouseX - pmouseX)*2							//change the width of each ball to vary with mouse velocity

	//when the left ball bounces, its color will change to dark orange
	if (leftBallY + 108 + ballSquish >= 48){
		pink1 = 242
		pink2 = 122
		pink3 = 5
	}
	else {
		pink1 = 255
		pink2 = 151
		pink3 = 202
	}
	//when the right ball bounces, its color will change to dark pink
	if (rightBallY + 108 + ballSquish >= 48){
		orange1 = 220
		orange2 = 51
		orange3 = 134
	}
	else {
		orange1 = 249
		orange2 = 176
		orange3 = 32

	}

}

Project 3 – Dynamic Drawings

sketch

Move your mouse over the canvas to change the size of the bubbles.
Moving your mouse will also change the colors of the bubbles.
Holding down left click while mousing over the canvas will keep the bubbles on the canvas until you let go of left click.
Left clicking will while moving will change lighten the background.

//holly liu
//section d
//dynamic drawing

var x = 25;
var y = 25;
var s = 20;
var b = 50;

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

function mouseMoved(){														//for as long as mouse is held down, the generated circles will not refesh
	clear();
	background(b);
	draw();
}

function draw(){
	noStroke();
	var r = 0.425 * mouseX;													//r value changes with x movement of mouse; values scaled to size of canvas 
	var g = 0.425 * mouseY;													//g value changes with y movement of mouse; values scaled to size of canvas
	var b = 108;
	fill(r, g, b);
	for (let i = 25; i <= 575; i += 50){									//generates circles
		for(let j = 25; j <= 575; j+= 50){
			s = 75 * exp(((-1) * dist(mouseX, mouseY, i, j))/100); 			//changes size of circles based on distance from mouse
			circle(i, j, s);
		}
	}
}

function mouseClicked(){													//bkg change w/ left click
	b += 10
	if(b == 200){
		b = 50
	}
}

Project 03: Dynamic Drawing

sketch

var angle = 0;
function setup() {
    createCanvas(600, 450);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}
function draw() {
    background(max(mouseX/2, mouseY/2), 200, 255);
    noStroke();

    //little fish bottom left swimming in circles
    push();
    translate(350, 60);
    rotate(radians(-angle));
    fill(190, 88, 77);
    ellipse(0, 0, 100, 45);
    triangle(0, 0, 60, -30, 60, 30);
    //little fish top right swimming in circles
    pop();
    push();
    translate(60, 350);
    rotate(radians(angle));
    fill(190, 88, 77);
    ellipse(0, 0, 100, 45);
    triangle(0, 0, 60, -30, 60, 30);
    pop();
    angle += 2; 

    //little fish swimming through the ripples
    fill(190, 88, 77);
    ellipse(mouseX, mouseY, 100, 55);
    triangle(mouseX, mouseY, mouseX-60, mouseY-30, mouseX-60, mouseY+30);

    //water ripples
    //restrict mouseX to 0-450
    var mX = max(min(mouseX, 700), 0);
    //sizing of circles based on mouseX
    var size1 = mouseX;
    var size2 = mX/2;
    var size3 = mX/3;
    var size4 = mX/4;
    var size5 = mX/5;
    //first water drop
    fill(50, 0, mouseX/2, 100);
    ellipse(20, height/2, size1);
    ellipse(20, height/2, size2);
    ellipse(20, height/2, size3);
    ellipse(20, height/2, size4);
    ellipse(20, height/2, size5);
    push();
    //second water drop
    translate(150, 0);
    if (mouseX >= width/3) {
        //delays time of expansion with mouse
        var offset = -30;
        //circle
        fill(50, 50, mouseX/2, 80);
        ellipse(20, height/2, size1+offset);
        ellipse(20, height/2, size2+offset);
        ellipse(20, height/2, size3+offset);
        ellipse(20, height/2, size4+offset);
        ellipse(20, height/2, size5+offset);
    }
    //third water drop
    pop();
    push();
    translate(300, 0);
    if (mouseX >= width/2) {
        //delays time of expansion with mouse
        var offset = -60;
        //circles
        fill(50, 100, mouseX/2, 60);
        ellipse(20, height/2, size1+offset);
        ellipse(20, height/2, size2+offset);
        ellipse(20, height/2, size3+offset);
        ellipse(20, height/2, size4+offset);
        ellipse(20, height/2, size5+offset);
    }
    //fourth water drop
    pop();
    push();
    translate(400, 0);
    if (mouseX >= width/2+100) {
        //delays time of expansion with mouse
        var offset = -80;
        //circles
        fill(50, 150, mouseX/2, 40);
        ellipse(20, height/2, size1+offset);
        ellipse(20, height/2, size2+offset);
        ellipse(20, height/2, size3+offset);
        ellipse(20, height/2, size4+offset);
        ellipse(20, height/2, size5+offset);
    }   
    //fifth water drop
    pop();
    push();
    translate(500, 0);
    if (mouseX >= width/2+150) {
        //delays time of expansion with mouse
        var offset = -80;
        //circles
        fill(50, 200, mouseX/2, 40);
        ellipse(20, height/2, size1+offset);
        ellipse(20, height/2, size2+offset);
        ellipse(20, height/2, size3+offset);
        ellipse(20, height/2, size4+offset);
        ellipse(20, height/2, size5+offset);
    }   



}

This is my pond with swimming and rotating fish, I started with the idea of visualizing water droplets from rain, then thought it would be cool to add the motion of a fish swimming in it.

Project-03-Dynamic-Drawing

sketchDownload
var colorx=20
function setup() {
  createCanvas(600, 450);
  max_distance = dist(0, 0, width, height);//the distance of the canvas
}

function draw() {
  //measure how far mouse if from the center of canvas
  let distanceFromCenter= dist(width/2,height/2,mouseX,mouseY);
  var colorx = distanceFromCenter;
  background(116,colorx,255);//the mouse as a component of the background's color
  //set the distance of each ellipse
  for (let x = 0; x <= width; x += 15) {
    for (let y = 0; y <= height; y += 15) {
      let size = dist(mouseX, mouseY, x, y);//size is decided by the mouse location 
      size = (size / max_distance) * 40;
      fill(22,255,colorx);//the mouse as a component of the ellipse's color
      noStroke();
      ellipse(x, y, size, size);
    }
  }
}

Move the mouse to update the sizes of ellipses in both horizontal and vertical direction. The color of ellipses and the background color of canvas also varies based on the mouse’s location.