Uncategorized – Page 14 – [OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice

Project 02 – Dynamic Drawing

I tried to visualize the sound waves when listening to music in a minimalistic way.

//Stefanie Suk
//15104 Section D

var x = 180; //starting position of rectangle 
var y = 200; //y position of rectangle

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

function draw() {
	background(0);

	//white rectangle box
	noFill()
	stroke(255);
	strokeWeight(2);
	rect(150, 160, 310, 125);
	
	// Rectangles from left to right
	noStroke();
	fill(235, 234, 232); //color of rectangle
	rect(x, map(mouseX, 0, width, y, y+8), 10, 50); //position of rectangle
	fill(172, 176, 191);
	rect(x+20, map(mouseX, 0, width, y, y-2), 10, 40);
	fill(178, 208, 235);
	rect(x+20*2, map(mouseX, 0, width, y, y+5), 10, 30);
	fill(195, 217, 240);
	rect(x+20*3, map(mouseX, 0, width, y, y-5), 10, 45);
	fill(214, 231, 243);
	rect(x+20*4, map(mouseX, 0, width, y, y-3), 10, 15);
	fill(226, 238, 249);
	rect(x+20*5, map(mouseX, 0, width, y, y+3), 10, 50);
	fill(214, 231, 243);
	rect(x+20*6, map(mouseX, 0, width, y, y+7), 10, 35);
	fill(195, 217, 240);
	rect(x+20*7, map(mouseX, 0, width, y, y-7), 10, 60);
	fill(178, 208, 235);
	rect(x+20*8, map(mouseX,0,width,y,y-2), 10, 50);
	fill(172, 176, 191);
	rect(x+20*9, map(mouseX, 0, width, y, y+2), 10, 30);
	fill(235, 234, 232);
	rect(x+20*10, map(mouseX, 0, width, y, y-6), 10, 35);
	fill(172, 176, 191);
	rect(x+20*11, map(mouseX, 0, width, y, y-4), 10, 10);
	fill(178, 208, 235);
	rect(x+20*12, map(mouseX, 0, width, y, y+5), 10, 20);


	// Top circles, left to right
    let d = map(mouseY, 0, width, 15, 30); //scale mouseY value
    fill(249, map(mouseX, 0, height, 240, 200), 225); //color of circle, change
    ellipse(width/7, height/7, d, d); //position and size of circle
    fill(254, map(mouseX, 0, height, 230, 240), 223);
    ellipse(width/7*2, height/4, d, d);
    fill(map(mouseX, 0, height, 230, 190), 186, 192);
    ellipse(width/7*3, height/7, d, d);
    fill(map(mouseX, 0, height, 190, 230), 132, 143);
    ellipse(width/7*4, height/4, d, d);
    fill(179, 203, map(mouseX, 0, height, 130, 180));
    ellipse(width/7*5, height/7, d, d);
    fill(203, 220, map(mouseX, 0, height, 180, 230));
    ellipse(width/7*6, height/4, d, d);

    // Bottom circles, left to right
    fill(203, 220, map(mouseX, 0, height, 180, 230));
    ellipse(width/7, height/8*6, d, d);
    fill(179, 203, map(mouseX, 0, height, 130, 180));
    ellipse(width/7*2, height/7*6, d, d);
    fill(map(mouseX, 0, height, 190, 230), 132, 143);
    ellipse(width/7*3, height/8*6, d, d);
    fill(map(mouseX, 0, height, 230, 190), 186, 192);
    ellipse(width/7*4, height/7*6, d, d);
    fill(254, map(mouseX, 0, height, 230, 240), 223);
    ellipse(width/7*5, height/8*6, d, d);
    fill(249, map(mouseX, 0, height, 240, 200), 225);
    ellipse(width/7*6, height/7*6, d, d);
}

Project-03-Dynamic Drawing

cyhan-03-project

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

function draw() {
  background(mouseX,mouseY,244);
  noStroke();

  //creating rectangles
  var w = 200;
  var h = 200;
  if(mouseX < width/2){
    w = (width/2 - mouseX) + 50;
  }else {
    h = (width/2 - mouseX) + 50
  }
  push();
  translate(300,225);
  rotate(radians(mouseX));
  fill(255,mouseY,mouseX);
  ellipse(50,100,100);
  fill(255,mouseX,mouseY);
  ellipse(100,100,100);
  fill(mouseY,255,mouseX);
  ellipse(150,100,100);
  fill(214,mouseY,mouseX);
  ellipse(200,100,100);
  fill(mouseY,mouseX,255);
  ellipse(250,100,100);
  fill(0,mouseY,mouseX);
  ellipse(300,100,100);
  pop();
  
  fill(255,mouseX, mouseY);
  rect(width/4, height/2,w,h);
  rect(width/2, height/4,w,h);
  rect(width/1.3, height/2,w,h);
  rect(width/2, height/1.3,w,h);
  stroke(1);
  fill(255);
  ellipse(width/4, height/2,w/2,h);
  ellipse(width/2, height/4,w/2,h);
  ellipse(width/1.3,height/2,w/2,h);
  ellipse(width/2, height/1.3,w/2,h);
  fill(0);
  ellipse(width/4, height/2,w/5,h);
  ellipse(width/2, height/4,w/5,h);
  ellipse(width/1.3,height/2,w/5,h);
  ellipse(width/2, height/1.3,w/5,h);
  
noStroke();  
fill(255,0,0);
ellipse(mouseX,mouseY,40);
ellipse(mouseX + 30,mouseY,40);
triangle(mouseX-20,mouseY,mouseX+50,mouseY,mouseX+15,mouseY + 60);
  
  
}

For this project, I wanted to create four blinking eyes that changed according to the location of the mouse. I also added multiple color changing circles that rotated around the center of the canvas as well as a heart cursor that allowed the viewer to keep track of their mouse.

Project_3_Dynamic_Drawing

Its an atom.

sketch

//andrewid rdrice
//section c

var bgV = 0
var fVr = 255
var fVg = 255
var fVb = 255
var angle = 0   //starting angle for the electron
var speed = 0.1

var x = 100     //photon position
var y = 100
var xVel = 1    //starting horizontal velocity of the photon
var yVel = 1    //starting vertical velocity of the photon
var bSize = 20  //diameter of the photon

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

function draw() {
    background(bgV);
    noStroke();
    fill(fVr, fVg, fVb);
    text("p5.js vers 0.9.0. rdrice. 'Hydrogen with Photon'", 10, 15);
    angleMode(DEGREES);

    var scale = dist(width/2, height/2, mouseX, mouseY); //scaling nucleus
    ellipse(width/2, height/2, min(scale, 250));

    x += xVel   //Reycled this script from assignment a
    y += yVel   //keeps the 'photon' moving
    ellipse(x, y, bSize);    //draws a circle at x, y

    if (x > width-bSize/2) {    //checks to see if photon is in x bounds
        xVel = xVel*(-1)        //reverses velocity if its not
    } else if (x < bSize/2) {
        xVel = xVel*(-1)}
    if (y > height-bSize/2) {   //does the same as above, but for y
        yVel = yVel*(-1)
    } else if (y < bSize/2) {
        yVel = yVel*(-1)}       //end recycled script

    translate(width/2, height/2);   //rotating electron
    angle = angle+speed
    rotate(angle);
        ellipse(100,100, min(500*(10/scale), 100));
}

function mousePressed() {
    if (bgV == 0){  //toggles bgV (background) between b&w
        bgV = 255;
    } else if (bgV == 255) {
        bgV = 0}

    if (fVr == 255 & fVg == 255 && fVb == 255){   //random fill value
        fVr = random(0,255);
        fVg = random(0,255);
        fVb = random(0,255);
    } else {    //toggles back to white
        fVr = 255
        fVg = 255
        fVb = 255}

    speed = random(-1, 1);  //new random speeds for moving objects
    xVel = random(-10,10);
    yVel = random(-10,10);
}

click to change colors and particle velocities.

Project 03 – Variable Face

I was very interested in the Mondrian image we created for the first assignment and how I could build on that foundation to begin to create a painting which we can control in the same style.

sketch

function setup() {
    createCanvas(650, 450);
    background(240);
}

function draw() {

var rec1x = constrain(mouseX,60,340)
var rec1y = constrain(mouseY,120,390)

var rec2x = 400 - constrain(mouseX,60,340)
var rec2y = 450 - constrain(mouseY,120,390)

var rec3x = dist(400,0,constrain(mouseX,450,600),0)
var rec3y = dist(400,constrain(mouseY*(2/3),120,300),400,constrain(mouseY,180,390))

var rec4x = 650-constrain(mouseX,450,600)
var rec4y = constrain(mouseY/2,60,225)

//making sure movement doesn't leave a trail
  background(240);

//was having issues getting strokes to show up later so I decided to push this part in
  push();
  noStroke();
//top left rectangle
  if (rec1x*rec1y >= rec2x*rec2y) {
    fill(255,0,0);
  } else {
    fill(0,0,255);
  }
  rect(0,0,rec1x,rec1y);
//bottom middle rectangle
  if (rec1x*rec1y >= rec2x*rec2y) {
    fill(0,0,255);
  } else {
    fill(255,0,0);
  }
  rect(constrain(mouseX,60,340),constrain(mouseY,120,390),rec2x,rec2y);
//top middle yellow rectangle
  fill(255,255,0);
  rect(constrain(mouseX,60,340),0,400-constrain(mouseX,60,340),constrain(mouseY/2,60,330));
//colred retangle above yellow
  if (rec3x*rec3y >= rec4x*rec4y) {
    fill(0,0,255);
  } else {
    fill(255,0,0);
  }
  rect(constrain(mouseX,450,600),0,rec4x,rec4y);
//top tight rectangle
  if (rec3x*rec3y >= rec4x*rec4y) {
    fill(255,0,0);
  } else {
    fill(0,0,255);
  }
  rect(400,constrain(mouseY*(2/3),120,300),rec3x,rec3y);
//bottom yellow rectangle
  fill(255,255,0);
  rect(400,constrain(mouseY,180,390),250,450-constrain(mouseY,180,390));


  pop();
  strokeWeight(14);
//dividing line between two sections
  line(400,0,400,450)
//left side vertical line
  line(constrain(mouseX,60,340),0,constrain(mouseX,60,340),450);
//left side long horizontal
  line(0,constrain(mouseY,120,390),400,constrain(mouseY,120,390));
//left side short horizontal
  line(constrain(mouseX,60,340),constrain(mouseY/2,60,330),400,constrain(mouseY/2,60,330));
//right side bottom horizontal
  line(400,constrain(mouseY,180,390),650,constrain(mouseY,180,390));
//right side vertical
  line(constrain(mouseX,450,600),0,constrain(mouseX,450,600),constrain(mouseY,180,390));
//right side top horizontal
  line(constrain(mouseX,450,600),constrain(mouseY/2,60,225),650,constrain(mouseY/2,60,225));
//right side middle horizontal
  line(constrain(mouseX,450,600),constrain(mouseY*(2/3),120,300),400,constrain(mouseY*(2/3),120,300));


}

rdrice_sectionC_Project 2_FACE

sketch

//Robert Rice
//Section C

var gender = 0  //"gender", determines eyelashes
var eyeSize = 10    //sets eye diameter
var eyeSquint = 1   //how squinted the eyes are
var eyebrowLength = 70  //how long the eyebrows are
var mouthLength = 90    //how long the mouth is
var mouthPosition = 0   //adjust how high up the mouth is
var noseX1 = 250    //adjusts the base of the nose
var noseY1 = 230
var noseX2 = 270       //adjust the tip of the nose
var noseY2 = 220

function setup() {
    createCanvas(400, 400);
    text("p5.js vers 0.9.0 test.", 10, 15);
    angleMode(DEGREES); //degrees bc i'm bad at math
}

function draw() {
    background(0)   //black background

    noFill();
    stroke(255);    //white lines bc the background is black
    
    strokeWeight(3);    //draws the basic face shape
    strokeJoin(ROUND);
    line(140,270, 127,220);
    arc(193,202, 136,136, 165, 73.38);
    line(212,268, 232,288);

    strokeWeight(2);    //stroke weight for facial features

    if (gender>0.5) {   //Gives the face eyelashes if it's 'female'
        line(186,180, 172,180); //does nothing if the face is 'male'
        line(186,180, 174,173);
        line(186,180, 180,168);

        line(186+97,180, 172+97,180);
        line(186+97,180, 174+97,173);
        line(186+97,180, 180+97,168);
    }

    noStroke();     //Makes the pupils
    fill(255);
    ellipse(186,180, eyeSize, eyeSize / eyeSquint); //pupils squint based on
    ellipse(186+97,180, eyeSize, eyeSize / eyeSquint);  //eyeSquit variable

    stroke(255);    //makes the eyebrow arcs, which move with the eyes
    strokeWeight(2);
    noFill();
    arc(201,6-((eyeSize/eyeSquint)/2), 351,351, eyebrowLength, 94.91);  
    //left eyebrow arc
    arc(201+97,6-((eyeSize/eyeSquint)/2), 351,351, eyebrowLength, 94.91);   
    //right eyebrow arc

    arc(246,78 - mouthPosition, 342,342, mouthLength,111.06);  //mouth

    noStroke();
    fill(255);
    triangle(255,188, noseX1,noseY1, noseX2,noseY2);
}

function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. 
    gender = random(0,1);   //variables defined at top of code
    eyeSize = random(6,20);
    eyeSquint = random(1,2);
    eyebrowLength = random(69.42, 82.17);
    mouthLength = random(79.13, 104.53);
    mouthPosition = random(0,35);
    noseX1 = random(247, 260);
    noseY1 = random(200, 238);
    noseX2 = random(270, 290);
    noseY2 = random(199, 232);
}

Project-03: Dynamic Drawing

My project was pretty much inspired by this giant cat I saw outside of my window one night running around in the grass, and so I cut my old project for this one. It started with getting the cat drawn, which was the hardest part by far to keep it symmetrical and looking friendly. After the cat, I wrote the “time” variable which keeps the movement of the sun synced with the color of the background, which lightens as the sun rises. The cat’s eyes follow your mouse as it moves around as well, and as the sun comes up the grass shrinks to show the whole cat.

catto






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

}

function draw() {
	var time = min(mouseY, 255) ////controls mouse and background
	var eyemoveX1 = constrain(mouseX, 228, 236)
    var eyemoveX2 = constrain(mouseX, 364, 372)
    var eyemoveY = constrain(mouseY, 170, 182) ////eyes follow mouse
    var grassHeight = constrain(time, 0, 255) + 120 ////grows grass
    var sunHeight = 480 - min(mouseY, 480)    ////moves sun
    



	background(time / 4, time / 2, time);
    fill(100, 100, 100)
    circle(width / 2, height / 2, 300)
    ////ears
    triangle(188, 120, 240, 84, 136, 24)
    triangle(408, 120, 356, 84, 456, 24)
    ////eyes
    fill(236)
    circle(232, 176, 40)
    circle(368, 176, 40)
    fill(50, 0, 200)
    circle(232, 176, 24)
    circle(368, 176, 24)
    fill(0)
    ellipse(eyemoveX1, eyemoveY, 12)
    ellipse(eyemoveX2, eyemoveY, 12)
    ////nose
    fill(255,182,193)
    triangle(276, 248, 324, 248, width / 2, 272)
    line(width / 2, 272, width / 2, 304)
    ////whiskers
    line(288, 280, 200, 240)
    line(288, 282, 200, 288)
    line(288, 284, 200, 336)
    line(312, 280, 400, 240)
    line(312, 282, 400, 288)
    line(312, 284, 400, 336)
    ////mouth
    line(width / 2, 304, 276, 332)
    line(width / 2, 304, 324, 332)
    ////sun
    fill(255, 247, 16)
    circle(80, sunHeight, 100)
    ////grass
    fill(11, 156, 21)
    triangle(0, 450, 50, 450, 25, grassHeight)
    triangle(50, 450, 100, 450, 75, grassHeight)
    triangle(100, 450, 150, 450, 125, grassHeight)
    triangle(150, 450, 200, 450, 175, grassHeight)
    triangle(200, 450, 250, 450, 225, grassHeight)
    triangle(250, 450, 300, 450, 275, grassHeight)
    triangle(300, 450, 350, 450, 325, grassHeight)
    triangle(350, 450, 400, 450, 375, grassHeight)
    triangle(400, 450, 450, 450, 425, grassHeight)
    triangle(450, 450, 500, 450, 475, grassHeight)
    triangle(500, 450, 550, 450, 525, grassHeight)
    triangle(550, 450, 600, 450, 575, grassHeight)



}

Project-03: Dynamic Drawing

sketch

    let greenVal = 0;
    function setup() {
    createCanvas(600, 600);
    background(255);
}

    function draw() {
    background(255);
    // Draw the ground
    noStroke();
    fill(170,150,146);
    rect(0, 530, 600, 70);
    // Draw flower 1
    push();
    fill(230, 190, 230, 240);
    translate(400, 400);
    rect(0,0,4,200);
    noStroke();
    for (var r1 = 0; r1 < 10; r1++) {
    if (mouseX <= 600) {
      ellipse(0, 10 + mouseX / 20, 10 + mouseX / 40, 20 + mouseX/ 20);
    }
    if (frameCount > 600) {
      ellipse(0, 40, 25, 50);
    }
    rotate(mouseX / 5);
    }
    pop();

    // Draw flower 2

    push();
    fill(235, 194, 204, 240);
    translate(300, 430);
    noStroke();
    rect(0,0,3,200);

    for (var r2 = 0; r2 < 10; r2++) {
    if (mouseY <= 600) {
      ellipse(0, 10 + mouseY / 20, 10 + mouseY / 40, 20 + mouseY / 20);
    }
    if (mouseY > 600) {
      ellipse(0, 40, 25, 50)
    }
    rotate(mouseY / 5);
    }
    pop();
  
    //Draw flower 3
    push();
    fill(245, 204, 174, 240);
    translate(180, 385);
    noStroke();
    for (var r3 = 0; r3 < 10; r3++) {
    if (mouseX <= 600) {
      ellipse(0, 10 + mouseX / 20, 10 + mouseX / 40, 20 + mouseX / 20);
    }
    if (mouseX > 600) {
      ellipse(0, 40, 25, 50)
    }
    rotate(mouseX / 5);
    }
    pop();

    //Draw flower 4
    push();
    fill(245, 174, 154, 240);
    translate(510, 425);
    noStroke();
    rect(0,0,3,300);
    rect(0,0,3,300);
    for (var r4 = 0; r4 < 10; r4++) {
    if (mouseY <= 600) {
      ellipse(0, 10 + mouseY / 20, 10 + mouseY / 40, 20 + mouseY / 20);
    }
    if (mouseY > 600) {
      ellipse(0, 40, 25, 50)
    }
    rotate(mouseY / 5);
    }
    pop();
  
    //Draw flower 5
    push();
    fill(245, 174, 184, 240);
    translate(70, 450);
    noStroke();
    rect(0,0,3,200);
    for (var r5 = 0; r5 < 10; r5++) {
    if (mouseX <= 600) {
      ellipse(0, 10 + mouseX / 20, 10 + mouseX / 40, 20 + mouseX / 20);
    }
    if (mouseX > 600) {
      ellipse(0, 40, 25, 50)
    }
    rotate(mouseX / 5);
    }
    pop();
    

    fill(120, sin(greenVal)*255, 120);
    greenVal += 0.05;
    scale(mouseX/400, mouseY/400);
    beginShape();
    vertex(285, 235);
    vertex(295, 229);
    vertex(300, 215);
    vertex(305, 229);
    vertex(315, 235);
    vertex(305, 242);
    vertex(300, 255);
    vertex(295, 242);
    endShape(CLOSE);
  }

Looking Outwards – 03

Porous Manifold Japanese Tearoom by fujiki studio

I like this project because it is not only an art installation but it can interact with people. The architects wanted to create a feeling of breathing when guests entered the space. the many holes or ‘breathing pleats’ open and close according to the movement of people in the hut. this geometry references the creation of a more heterogeneous space. by employing the geometry of a vornoi division, the initially homogenous space gets distorted by the different irregularities creating the bubble-like pattern.

Link:https://www.archdaily.com/909484/porous-manifold-as-a-japanese-tearoom-fads-plus-ryumei-fujiki-plus-kou-arc

f-a-d-s-fujiki-studio-porous-manifold-japanese-tearoom-shinjuku-japan-07-25-2019-designboom

Project-03-Dynamic-Drawing

My concept is creating a very elaborated and aesthetic pattern out of one kind of simple geometric shapes.

sketch

var angle=0;
var r;
function setup() {
	createCanvas(600, 450);
	 frameRate(12);
}
function draw() {
	//switch color according to mouseX position
	if(mouseX<300){
    background(100,165,172);
	noFill();
	stroke(255,196,234);
	}
	else{
	background(255,196,234);
	noFill();
	stroke(100,165,172);
	}

	
	//set the new origin so that ellipses rotate around the center
    translate(300,235);
    push();
    //rotate the first set of ellipses 30 degrees
    rotate(radians(30));
    ellipseMode(CENTER);

    ellipse(0,100,min(100,Math.abs(mouseX-300)),min(200,Math.abs(mouseY-225)));
	ellipse(0,100,min(105,Math.abs(mouseX-255)),min(199,Math.abs(mouseY-224)));
	ellipse(0,100,min(110,Math.abs(mouseX-250)),min(198,Math.abs(mouseY-223)));
	ellipse(0,100,min(115,Math.abs(mouseX-195)),min(197,Math.abs(mouseY-222)));
	ellipse(0,100,min(120,Math.abs(mouseX-190)),min(196,Math.abs(mouseY-221)));
	//60
	rotate(radians(30));
    ellipseMode(CENTER);
    ellipse(0,100,min(100,Math.abs(mouseX-300)),min(200,Math.abs(mouseY-225)));
	ellipse(0,100,min(105,Math.abs(mouseX-255)),min(199,Math.abs(mouseY-224)));
	ellipse(0,100,min(110,Math.abs(mouseX-250)),min(198,Math.abs(mouseY-223)));
	ellipse(0,100,min(115,Math.abs(mouseX-195)),min(197,Math.abs(mouseY-222)));
	ellipse(0,100,min(120,Math.abs(mouseX-190)),min(196,Math.abs(mouseY-221)));
	//90
	rotate(radians(30));
    ellipseMode(CENTER);
    ellipse(0,100,min(100,Math.abs(mouseX-300)),min(200,Math.abs(mouseY-225)));
	ellipse(0,100,min(105,Math.abs(mouseX-255)),min(199,Math.abs(mouseY-224)));
	ellipse(0,100,min(110,Math.abs(mouseX-250)),min(198,Math.abs(mouseY-223)));
	ellipse(0,100,min(115,Math.abs(mouseX-195)),min(197,Math.abs(mouseY-222)));
	ellipse(0,100,min(120,Math.abs(mouseX-190)),min(196,Math.abs(mouseY-221)));
	//120
	rotate(radians(30));
    ellipseMode(CENTER);
    ellipse(0,100,min(100,Math.abs(mouseX-300)),min(200,Math.abs(mouseY-225)));
	ellipse(0,100,min(105,Math.abs(mouseX-255)),min(199,Math.abs(mouseY-224)));
	ellipse(0,100,min(110,Math.abs(mouseX-250)),min(198,Math.abs(mouseY-223)));
	ellipse(0,100,min(115,Math.abs(mouseX-195)),min(197,Math.abs(mouseY-222)));
	ellipse(0,100,min(120,Math.abs(mouseX-190)),min(196,Math.abs(mouseY-221)));
	//150
	rotate(radians(30));
    ellipseMode(CENTER);
    ellipse(0,100,min(100,Math.abs(mouseX-300)),min(200,Math.abs(mouseY-225)));
	ellipse(0,100,min(105,Math.abs(mouseX-255)),min(199,Math.abs(mouseY-224)));
	ellipse(0,100,min(110,Math.abs(mouseX-250)),min(198,Math.abs(mouseY-223)));
	ellipse(0,100,min(115,Math.abs(mouseX-195)),min(197,Math.abs(mouseY-222)));
	ellipse(0,100,min(120,Math.abs(mouseX-190)),min(196,Math.abs(mouseY-221)));
	//180
	rotate(radians(30));
    ellipseMode(CENTER);
    ellipse(0,100,min(100,Math.abs(mouseX-300)),min(200,Math.abs(mouseY-225)));
	ellipse(0,100,min(105,Math.abs(mouseX-255)),min(199,Math.abs(mouseY-224)));
	ellipse(0,100,min(110,Math.abs(mouseX-250)),min(198,Math.abs(mouseY-223)));
	ellipse(0,100,min(115,Math.abs(mouseX-195)),min(197,Math.abs(mouseY-222)));
	ellipse(0,100,min(120,Math.abs(mouseX-190)),min(196,Math.abs(mouseY-221)));
	//210
	rotate(radians(30));
    ellipseMode(CENTER);
    ellipse(0,100,min(100,Math.abs(mouseX-300)),min(200,Math.abs(mouseY-225)));
	ellipse(0,100,min(105,Math.abs(mouseX-255)),min(199,Math.abs(mouseY-224)));
	ellipse(0,100,min(110,Math.abs(mouseX-250)),min(198,Math.abs(mouseY-223)));
	ellipse(0,100,min(115,Math.abs(mouseX-195)),min(197,Math.abs(mouseY-222)));
	ellipse(0,100,min(120,Math.abs(mouseX-190)),min(196,Math.abs(mouseY-221)));
	rotate(radians(30));
    //240
    ellipseMode(CENTER);
    ellipse(0,100,min(100,Math.abs(mouseX-300)),min(200,Math.abs(mouseY-225)));
	ellipse(0,100,min(105,Math.abs(mouseX-255)),min(199,Math.abs(mouseY-224)));
	ellipse(0,100,min(110,Math.abs(mouseX-250)),min(198,Math.abs(mouseY-223)));
	ellipse(0,100,min(115,Math.abs(mouseX-195)),min(197,Math.abs(mouseY-222)));
	ellipse(0,100,min(120,Math.abs(mouseX-190)),min(196,Math.abs(mouseY-221)));
	rotate(radians(30));
    //270
    ellipseMode(CENTER);
    ellipse(0,100,min(100,Math.abs(mouseX-300)),min(200,Math.abs(mouseY-225)));
	ellipse(0,100,min(105,Math.abs(mouseX-255)),min(199,Math.abs(mouseY-224)));
	ellipse(0,100,min(110,Math.abs(mouseX-250)),min(198,Math.abs(mouseY-223)));
	ellipse(0,100,min(115,Math.abs(mouseX-195)),min(197,Math.abs(mouseY-222)));
	ellipse(0,100,min(120,Math.abs(mouseX-190)),min(196,Math.abs(mouseY-221)));
	//300
	rotate(radians(30));
    ellipseMode(CENTER);
    ellipse(0,100,min(100,Math.abs(mouseX-300)),min(200,Math.abs(mouseY-225)));
	ellipse(0,100,min(105,Math.abs(mouseX-255)),min(199,Math.abs(mouseY-224)));
	ellipse(0,100,min(110,Math.abs(mouseX-250)),min(198,Math.abs(mouseY-223)));
	ellipse(0,100,min(115,Math.abs(mouseX-195)),min(197,Math.abs(mouseY-222)));
	ellipse(0,100,min(120,Math.abs(mouseX-190)),min(196,Math.abs(mouseY-221)));
	//330
	rotate(radians(30));
    ellipseMode(CENTER);
    ellipse(0,100,min(100,Math.abs(mouseX-300)),min(200,Math.abs(mouseY-225)));
	ellipse(0,100,min(105,Math.abs(mouseX-255)),min(199,Math.abs(mouseY-224)));
	ellipse(0,100,min(110,Math.abs(mouseX-250)),min(198,Math.abs(mouseY-223)));
	ellipse(0,100,min(115,Math.abs(mouseX-195)),min(197,Math.abs(mouseY-222)));
	ellipse(0,100,min(120,Math.abs(mouseX-190)),min(196,Math.abs(mouseY-221)));
	//360
	rotate(radians(30));
    ellipseMode(CENTER);
    ellipse(0,100,min(100,Math.abs(mouseX-300)),min(200,Math.abs(mouseY-225)));
	ellipse(0,100,min(105,Math.abs(mouseX-255)),min(199,Math.abs(mouseY-224)));
	ellipse(0,100,min(110,Math.abs(mouseX-250)),min(198,Math.abs(mouseY-223)));
	ellipse(0,100,min(115,Math.abs(mouseX-195)),min(197,Math.abs(mouseY-222)));
	ellipse(0,100,min(120,Math.abs(mouseX-190)),min(196,Math.abs(mouseY-221)));
	
	pop();

	


	
	

	
	
	}

02 Project Variable Face – Whack-A-Frog

I seem to have toads and frogs on my mind a lot lately. A lot of people say I embody the same spirit as one, so I am trying to embrace that in a positive way. For this project, I wanted to depict a frog poking its head out of water.

As I progressed with the code, I wanted to add some additional environmental elements. With the help of some online searches, I found a project on p5js.org with randomized dots. I tried using them to show movement of water. I am not sure how effective it was, but I think it makes the scene a bit more interesting.

Again this week, I really took advantage of the power of arcs in p5.js. With so many parameters, you can do so much curvature so easily. I used arcs for the eyeball and pupil, which are very different shapes, but by adjusting the mode of arc from CHORD to PIE, you can get a lot of variety. Hot tip: switch the degree mode of the project from RADIANS to DEGREES if you don’t explicitly process the world in immediate relation to Pi. Or don’t, if you like pain.

sketch Download


//Julia Steinweh-Adler
//Section D

//Global Variables

var eyesSize = 20
var headWidth = 150;
var eyeWidth= 40;
var mouthSize = 30;
var mouthWidth = 30;
var pupil=20;
var smallX = 600/2    //canvas width divided by 2  
var smallY = 480/2    //canvas height divided by 2
var largeX = 600/3.5   //canvas width divided by 3.5  
var largeY = 480/3.5   //canvas height divided by 3.5
var pupilAngle = 300
var nostrilWidth = 5
var nostrilHeight = 6

    //Water Ripple Dot Background values
var spot = {    //coordinates
    x:100,
    y: 50,
};

var col = {    //color values
    r:0,
    g:0,
    b:255,
};

function setup() {
    createCanvas(600, 480);
    angleMode(DEGREES);    //Change angle mode to degrees to make arcs easier
    frameRate(2)    //Change framerate to 2 frames per second
  
}
  function draw() {
    noStroke();

//BACKGROUND
    background(49, 30, 220); //Light Blue
    
    
    //Water Ripple Dot Pattern Background
    spot.x= random (0, width);
    spot.y= random (0, height);

    noStroke();
    col.r = random (0);
    col.g = (0);
    col.b = random (100, 200);
    
    fill (col.r, col.g, col.b, 120);
    ellipse (spot.x, spot.y, 1600, 400);    //Change dot dimensions and coordinates
    
    //Water Ripple
    stroke(60, 30, 220);
    strokeWeight(4);
    noFill();
    ellipse(smallX, smallY-90, 200, 100)
    ellipse(smallX, smallY-90, 250, 120)

    
//FROG
    //Face
    noStroke();
    fill(44, 94, 76); // Face Color, Green
    arc(smallX, smallY - 90, headWidth, 80, 0, 180, PIE);    //Head top arc
    arc(smallX, smallY - 89, headWidth, 100, 180, 0, PIE);   //Head bottom arc
    circle(smallX+50, smallY-125, eyesSize+10);    //right eyelid
    circle(smallX-50, smallY-125, eyesSize+10);    //left eyelid
      
    //Eyeball
    fill(124, 84, 30);     //Brown eyeball color
    arc(smallX + 50, smallY-125, eyesSize, eyesSize, 210, 120, CHORD);    //right eye arc
    arc(smallX - 50, smallY-125, eyesSize, eyesSize, 60, 330, CHORD);    //left eye arc
    
    //Eye Pupil   
    fill(0);     //Black pupil
    stroke(204, 168, 18);    //Change stroke to yellow
    strokeWeight(2);
    arc(smallX + 50, smallY-125, eyesSize, eyesSize, pupilAngle, pupilAngle-255, PIE);    // right eye pupil
    arc(smallX - 50, smallY-125, eyesSize, eyesSize, (-pupilAngle)+435,(-pupilAngle)+540, PIE);    //left eye pupil
    
    //Nostril
    noStroke();
    ellipse(smallX + 10, smallY - 90, nostrilWidth, nostrilHeight)    //Right Nostril
    ellipse(smallX - 10, smallY - 90, nostrilWidth, nostrilHeight)    //Left Nostril   
    
    
    //Mouth
    noStroke();
    fill(109, 165, 144); //top lip color, Green (same as face to integrate shape)
    arc(smallX, smallY-70, mouthWidth, mouthSize, 0, 180, PIE);    //top lip arc 
    fill(44, 94, 76);    //mouth color, light green
    arc(smallX, (smallY)-75, mouthWidth, mouthSize, 0, 180, PIE);    //mouth arc
    
    
//Foreground Grass
    beginShape();
    fill(10,60,4);
    vertex(0,height);
    vertex(width*1/24,height*3/4);//peak 1
    vertex(width*2/24,height*1/2);
    vertex(width*3/24,height*5/9);//peak 2
    vertex(width*4/24,height*27/32);
    vertex(width*5/24,height*3/4);//peak 3
    vertex(width*6/24,height*29/32);
    vertex(width*7/24,height*2/3);//peak 4
    vertex(width*8/24,height);
    vertex(width*9/24,height*1/2);//peak 5
    vertex(width*10/24,height*30/32);
    vertex(width*11/24,height*5/9);//peak 6
    vertex(width*12/24,height*27/32);
    vertex(width*13/24,height*3/4);//peak 7
    vertex(width*14/24,height*29/32);
    vertex(width*15/24,height*2/3);//peak 8
    vertex(width*16/24,height);
    vertex(width*17/24,height*2/3);//peak 9
    vertex(width*18/24,height*29/32);
    vertex(width*19/24,height*3/4);//peak 10
    vertex(width*20/24,height*30/32);
    vertex(width*21/24,height*5/9);//peak 11
    vertex(width*22/24,height*27/32);
    vertex(width*23/24,height*3/4);//peak 12
    vertex(width,height);
  endShape();
}



function mousePressed() {
    smallX = random(100,500);
    smallY = random(280,310);
    largeX = random(190, 200);
    largeY = random(140,150);
    headWidth = random(130, 170);
    pupilAngle = random(250,350);
    mouthWidth = random(60, 100)
    eyesSize = random(30, 50);
    mouth = random(2,5);
    nostrilWidth = random(4,15);
    nostrilHeight = random(4,15)
}

Frog poking its head out of the water Stock Photo: 180696071 - Alamy