Month: September 2017

heeseoc-dynamic

//Steph Chun
//15-104 section #A
//heeseoc@andrew.cmu.edu
//Project-03

	var dir = 1;
	var speed = 4;
	var diam = 0;
	var dot = 3;
	var o = 1;
	var oo = 1;
	var angle = 0;
	var angleo = 0;


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

function draw() {
	noStroke(); 

	var center = 135;
	var c = constrain(mouseX, -150, center);


	//background//
	background (255-c*1.5,255-c*1.5,255-c*1.5);


	//hand right//
	fill (227,200,113);
	quad (-c+615,233,-c+681,299,-c+615,365,-c+549,299);

	fill (212,180,75);
	quad (-c+690,299,-c+640,249,-c+590,299,-c+640,349);

	fill (150,132,65);
	triangle (-c+610,299,-c+660,249,-c+660,349);

	fill (227,200,113);
	triangle (-c+614.5,233,-c+690,250,-c+680,299);

	fill (241,216,141);
	rect (-c+640,250,320,75);
	triangle (-c+640,250,-c+640,325,-c+600,250);
	rect (-c+490,250,130,30);
	triangle (-c+490,250,-c+490,280,-c+455,250);

	triangle (-c+725,325,-c+695,325,-c+695,355);
	rect (-c+590,325,105,30);
	triangle (-c+590,325,-c+590,355,-c+575,325);

	//fingernails right//
	fill (255,238,189);
	rect(-c+470,250,30,13);
	triangle (-c+470,250,-c+470,263,-c+455,250);


	//rotating dots//
	if (mouseX > 100) {
	push();
    translate(320,250);
    rotate(radians(angle));
    angle = angle + 10;
    fill(255);
    ellipse(-o, o, dot, dot);
    pop();
    o = o + 0.3;
	}

	if (mouseX > 80) {
	push();
    translate(320,250);
    rotate(radians(angleo));
    angleo = angleo + 3;
    fill(255);
    ellipse(-oo, oo, dot, dot);
    pop();
    oo = oo + 0.1;
	}

	if (mouseX > 120) {
	push();
    translate(320,250);
    rotate(radians(-angleo));
    angleo = angleo + 3;
    fill(255);
    ellipse(-oo-50, oo+50, dot, dot);
    pop();
    oo = oo + 0.1;
	}

	if (mouseX < 80) {
		o = 0;
		oo = 0;
	}

	//ripples//
	stroke (255);
	noFill();
	ellipse (320,250,diam/3,diam);
	ellipse (320,250,diam/4.5,diam/1.5);

	diam += dir * speed;
    if (mouseX < 135) {
        diam = 0;
	}


	noStroke();

	//hand left//
	fill (167,157,203);
	quad (c+25,233,c+91,299,c+25,365,c-41,299);

	fill (141,129,183);
	quad (c+50,299,c,249,c-50,299,c,349);

	fill (115,107,141);
	triangle (c+30,299,c-20,249,c-20,349);

	fill (167,157,203);
	triangle (c+25.5,233,c-50,250,c-40,299);

	fill (186,178,217);
	rect (c-320,250,320,75);
	triangle (c,250,c,325,c+40,250);
	rect (c+20,250,130,30);
	triangle (c+150,250,c+150,280,c+185,250);

	triangle (c-85,325,c-55,325,c-55,355);
	rect (c-55,325,105,30);
	triangle (c+50,325,c+50,355,c+65,325);

	//fingernails left//
	fill (216,209,241);
	rect(c+140,250,30,13);
	triangle (c+170,250,c+170,263,c+185,250);

	
 }

My original idea was to make the touch convey a sense of affection between the two people, but I changed it later on so that with the interactions, it looks more like a reflection (yet the viewers may not know at their first sight which is the twist I intended to give to this piece). Getting one hand to exactly reflect the other hand was the most difficult part for me, because I calculated all the coordinating numbers since I didn’t know how to take a combination of objects and just flip it over.

sketch

//Hannah Kim
//Section A
//hannahk2@andrew.cmu.edu
//Assignment-01

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

function draw() {
  background(0, 0, 0);

//background color change
//as mouse moves down, color changes from blue 
//to lighter blue
    var Rc = map(mouseY, 0, height, 200, 260);
    var Gc = map(mouseY, 0, height, 240, 255);
    var Bc = map(mouseY, 0, height, 250, 255);

    noStroke();
    fill(Rc, Gc, Bc);
    rect(0, 0, 600, 600);

//circle background color change
//as mouse moves down, color changes from white
//to blue
    var circSize =map(mouseY, 0, height, 0, 400);
    var Rc1 = map(mouseY, 0, height, 260, 200);
    var Gc1 = map(mouseY, 0, height, 255, 240);
    var Bc1 = map(mouseY, 0, height, 255, 250);
noStroke();
fill(Rc1, Gc1, Bc1);
ellipseMode(CENTER);
ellipse(294, 242, circSize, circSize);

//top chopstick
var topChop = map(mouseY, 0, 400, 92, 300);
stroke(198, 58, 61);
strokeWeight(9);
line(27, 60, 291, topChop);

//noodle 1
var nood1 = map(mouseY, 0, 400, 76, 310);
stroke(221, 215, 153);
strokeWeight(6);
line(240, nood1, 240, 311);

//noodle2
var nood2 = map(mouseY, 0, 400, 76, 312);
stroke(221, 215, 153);
strokeWeight(6);
line(252, nood1, 253, 313);

//noodle3
var nood3 = map(mouseY, 0, 400, 76, 312);
stroke(221, 215, 153);
strokeWeight(6);
line(266, nood3, 266, 316);

//bottom chopstick
var bottomChop = map(mouseY, 0, 400, 107, 310);
stroke(198, 58, 61);
strokeWeight(9);
line(5, 111, 292, bottomChop);

noStroke();
//draw ramen cup
fill (233, 231, 226);
rect (164, 261, 272, 8);
quad (175, 275, 210, 560, 386, 561, 428, 277);
noStroke();
arc(297, 561, 176, 10, TWO_PI, PI);

//draw top row of yellow marks
fill(194, 198, 89);
rect(182, 300, 3, 24);
rect(188, 300, 3, 24);
rect(194, 300, 3, 24);
rect(200, 301, 3, 24);
rect(207, 301, 3, 24);
rect(214, 302, 3, 24);
rect(222, 302, 3, 24);
rect(230, 302, 3, 24);
rect(239, 303, 3, 24);
rect(248, 303, 3, 24);
rect(257, 303, 3, 24);
rect(267, 304, 3, 25);
rect(277, 304, 3, 25);
rect(287, 304, 3, 25);
rect(297, 304, 3, 25);
rect(307, 304, 3, 25);
rect(317, 303, 3, 25);
rect(326, 303, 3, 24);
rect(335, 303, 3, 24);
rect(344, 303, 3, 24);
rect(352, 303, 3, 24);
rect(361, 303, 3, 24);
rect(369, 303, 3, 24);
rect(377, 303, 3, 24);
rect(385, 302, 3, 24);
rect(392, 302, 3, 24);
rect(399, 301, 3, 24);
rect(405, 300, 3, 24);
rect(411, 300, 3, 24);
rect(417, 300, 3, 24);

//draw bottom row of yellow marks
fill(194, 198, 89);
rect(207, 501, 3, 24);
rect(214, 502, 3, 24);
rect(222, 502, 3, 24);
rect(230, 502, 3, 24);
rect(239, 503, 3, 24);
rect(248, 503, 3, 24);
rect(257, 503, 3, 24);
rect(267, 504, 3, 25);
rect(277, 504, 3, 25);
rect(287, 504, 3, 25);
rect(297, 504, 3, 25);
rect(307, 504, 3, 25);
rect(317, 503, 3, 25);
rect(326, 503, 3, 24);
rect(335, 503, 3, 24);
rect(344, 503, 3, 24);
rect(352, 503, 3, 24);
rect(361, 503, 3, 24);
rect(369, 503, 3, 24);
rect(377, 503, 3, 24);
rect(385, 502, 3, 24);

//draw red background for middle logo 
fill(198, 58, 61);
rect(272, 354, 79, 58);
arc(346, 374, 50, 40, PI+QUARTER_PI, HALF_PI);
ellipseMode(CENTER);
ellipse(263, 383, 59, 63);
quad(197, 408, 204, 462, 392, 465, 398, 408);
ellipse(248, 437, 59, 63);
ellipse(278, 437, 59, 63);

//draw text for cup
textSize(50);
textStyle(BOLD);
fill(255, 255, 255);
text("CUP", 248, 400);

//draw text for noodles
textSize(38);
textStyle(BOLD);
fill(255, 255, 255);
text("NOODLES", 203, 450);

//draw nissin logo with text
fill(177, 27, 38);
arc(208, 357, 36, 38, PI, TWO_PI);
textSize(8);
fill(255, 255, 255);
text("NISSIN", 195, 354);

//bottom red line
strokeWeight(1);
stroke(198, 58, 61);
line(210, 535, 386, 536);

//top red line
line(175, 289, 428, 291);

//white shine on cup
fill(255, 255, 255, 90);
noStroke();
quad(373, 272, 348, 568, 375, 564, 407, 272);
}

 

This project was pretty fun for me, though I did not know where to start with the commands and which commands to choose to make my code do what I wanted it to do. I enjoyed creating the cup of noodles especially, since I always eat cup noodles.

sketch

// Anna Gusman
// Section A
// Project 03
// This code is a bouncy-bodied, color-changing brush concept.
// Referencing properties of spring and damping forces from p5, I create a brush shape
// that organically changes dimensions as the mouse is dragged. 

var centerX = 0.0, centerY = 0.0; // center point of the polygon

var radius = 45, rotAngle = -30;
var accelX = 0.0, accelY = 0.0;
var deltaX = 0.0, deltaY = 0.0;
var springing = 0.0009, damping = 0.98;
//values of the spring and damp forces that make the triangle speed up and slow down when following the mouse.
//
var rr = 10;
var gg= 10;
var bb= 10;
var colorchange = 90;

//dictate the number of nodes
var nodes = 3;

//create zero fill arrays
var nodeStartX = [];
var nodeStartY = [];
var nodeX = [];
var nodeY = [];
var angle = [];
var frequency = [];

// soft-body dynamics
var organicConstant = 1.0;

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

  //center shape in window
  centerX = width/2;
  centerY = height/2;

  //initialize arrays to 0
  for (var i=0; i<nodes; i++){
    nodeStartX[i] = 0;
    nodeStartY[i] = 0;
    nodeY[i] = 0;
    nodeY[i] = 0;
    angle[i] = 0;
  }

  // iniitalize frequencies for corner nodes
  for (var i=0; i<nodes; i++){
    frequency[i] = random(5, 12);
  }

  frameRate(60); //increase the drawing speed
}

function draw() {
  //fade the background
  // fill(255, 10);
  // background(200, 3);
  fill(rr, gg, bb); //color of polygon
    rr = 127.5*cos(2*PI*colorchange/360) + 127.5;
    gg = 127.5*sin(2*PI*colorchange/360) + 127.5;
    bb = 127.5*sin(2*PI*(colorchange-20)/360) + 127.5;

colorchange++;
  stroke(0);
  drawShape();
  moveShape();
}

function drawShape() {
  //  calculate the locations of the nodes
  for (var i=0; i<nodes; i++){
    nodeStartX[i] = centerX+cos(radians(rotAngle))*radius;
    nodeStartY[i] = centerY+sin(radians(rotAngle))*radius;
    rotAngle += 360.0/nodes; //drawing 3 points on the circumference of the circle
  }

  // draw polygon
  curveTightness(organicConstant);
  beginShape();
  for (var i=0; i<nodes; i++){
    curveVertex(nodeX[i], nodeY[i]);
  }
  for (var i=0; i<nodes-1; i++){
    curveVertex(nodeX[i], nodeY[i]);
  }
  endShape(CLOSE);
}

function moveShape() {
  //move the center point
  deltaX = mouseX-centerX;
  deltaY = mouseY-centerY;

  // create springing effect
  deltaX *= springing;
  deltaY *= springing;
  accelX += deltaX;
  accelY += deltaY;

  // move the polygon's center
  centerX += accelX;
  centerY += accelY;

  // slow down springing so that the polygon does not continue moving infinitely
  accelX *= damping;
  accelY *= damping;

  // change the tightness of the curves using the organic constant
  organicConstant = 1-((abs(accelX)+abs(accelY))*0.1);

  //move the nodes
  for (var i=0; i<nodes; i++){
    nodeX[i] = nodeStartX[i]+sin(radians(angle[i]))*(accelX*2);
    nodeY[i] = nodeStartY[i]+sin(radians(angle[i]))*(accelY*2);
    angle[i] += frequency[i];
  }
}

For this project, I created an bouncy-bodied, color-changing brush concept. I referenced p5’s softbody dynamics example in order to see how they treated oscillating vector forces. You can find the example here

I was inspired to create a brush concept from the bit of code I wrote in this week’s recitation lab on creating a mouse controlled spiraling ellipse. I first made iterations on this to explore styling options and effects.

Example:

Example:

Still, the brush felt more controlled and predictable than I wanted to to be- I wanted there to be a larger element of surprise. Elements of the soft body dynamics example allowed me to soften the reactions of my shape/brush by giving it springing and damping properties, created by controlling the relationships between the drawn vertexes(nodes) of the shape (curveTightness and curveVertex. This makes the brush wiggle and have a pleasing, natural element to it’s movement. I then control the number of vertexes and sides of the shape and the acceleration and movement of these vertexes. (accel, delta, springing, damping, nodeStart, node).

Next I wanted to illustrate change across the movement of the brush path. I did this by creating a color system that undulates across the length of 3 sine waves, one each for red, blue and green.

I also experimented further with eliminating or altering the spring relationship between the mouse and the center of the polygon. Here is one example:

In future iterations of this brush concept, I’d like to embed customization of the brush shape so that when you click, you could alter the number of vertexes that would result in different brush trails. Definitely excited to play around with this more, as it has been a great learning experience.