Category: Uncategorized

Project 02 Variable Face

Variables:

  1. The face changes color as u move your mouse.
  2. Eyes and arms follows the mouse.
  3. When mouse is pressed, the hands will grow fingers.

var mouse = false;

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

function draw() {
    background(220);
    drawFace();
    noFill();
    drawMouth();
    drawTeeth();
    drawLip();
    eyeBallOne();
    eyeBallTwo();
    handOne();
    handTwo();
}

function drawMouth() {
    strokeWeight(4);
    fill(255,0,0,255);
    curve(145, 250, 145, 200, 335, 200, 335, 250);
    curve(145, -400, 145, 200, 335, 200, 335, -400);
}

function drawLip() {
    strokeWeight(4);
    stroke(0);
    noFill();
    curve(145, 250, 145, 200, 335, 200, 335, 250);
    curve(145, -400, 145, 200, 335, 200, 335, -400);
}

function drawTeeth() {
    strokeWeight(3);
    stroke(255);
    line(145, 200, 175, 248);
    line(335, 200, 305, 248);
    line(175, 248, 205, 195);
    line(305, 248, 275, 195);
    line (205, 195, 240, 275);
    line (275, 195, 240, 275);
}

function drawFace() {
    strokeWeight(5);
    let xValue = mouseX/width*255;
    let yValue = mouseY/width*255;
    let zValue = (xValue+yValue)/4;
    fill(xValue,yValue,zValue+120);
    rect (100,100,280,320);
}

function eyeBallOne() {
    strokeWeight(4);
    fill(255,255,255);
    ellipse (150,150,50);
    let angle = atan2(mouseY - 150, mouseX - 150); // calculate arctangent //
    let x = 150 + 20*0.75*cos(angle);
    let y = 150 + 20*0.75*sin(angle);
    fill(255,0,255);
    circle (x,y,15);
}

function eyeBallTwo() {
    strokeWeight(4);
    fill(255,255,255);
    ellipse (330,150,50);
    let angle = atan2(mouseY - 150, mouseX - 250); // calculate arctangent //
    let x = 330 + 20*0.75*cos(angle);
    let y = 150 + 20*0.75*sin(angle);
    fill(150,150,0);
    circle (x,y,15);
}


function handOne() {
  var x = 100;
  var y = 420;
  var tan = atan2(mouseX-x,mouseY-y);
  if (dist (mouseX,mouseY,x,y) < 200)
    //if arm mouse is within arm distance//
  { var dis = dist (mouseX,mouseY,x,y) /2;
    // mid point of distance between mouse and arm//
    var num = (10000)-(dis*dis);
    var sid = sqrt(num);
    //pathegoriam therom//
    stroke (10);
    line (x,y, (mouseX-x)/2+x+cos(tan)*sid, (mouseY-y)/2+y-sin(tan)*sid);
    line ((mouseX-x)/2+x+cos(tan)*sid, (mouseY-y)/2+y-sin(tan)*sid, mouseX, mouseY);
    fill(255,255,255);
    ellipse ((mouseX-x)/2+x+cos(tan)*sid, (mouseY-y)/2+y-sin(tan)*sid, 25,25);
    if (mouse)
    {
        strokeWeight(5);
        line (mouseX, mouseY, mouseX+30, mouseY-30);
        line (mouseX, mouseY, mouseX-30, mouseY-30);
        line (mouseX, mouseY, mouseX, mouseY-60);
        ellipse (mouseX,mouseY,50,50);
    }
    else {
        ellipse (mouseX,mouseY,50,50);
    }
  }

  else
    {
        stroke(10);
        line (x,y, x+sin(tan)*200, y+cos(tan)*200);
        fill(255,255,255);
        ellipse (x+sin(tan)*100, y+cos(tan)*100, 25,25);
        if (mouse)
    {
        //hand//
        strokeWeight(5);
        line (x+sin(tan)*200, y+cos(tan)*200, x+sin(tan)*200+30, y+cos(tan)*200-30);
        line (x+sin(tan)*200, y+cos(tan)*200, x+sin(tan)*200-30, y+cos(tan)*200-30);
        line (x+sin(tan)*200, y+cos(tan)*200, x+sin(tan)*200, y+cos(tan)*200-60);
        //fingers//
        ellipse (x+sin(tan)*200, y+cos(tan)*200,50,50);
    }
    else {
        ellipse (x+sin(tan)*200, y+cos(tan)*200,50,50);
    }
    }
}

function handTwo() {
  var x = 380;
  var y = 420;
  var tan = atan2(mouseX-x,mouseY-y);
  if (dist (mouseX,mouseY,x,y) < 200)
    //if arm mouse is within arm distance//
  { var dis = dist (mouseX,mouseY,x,y) /2;
    // mid point of distance between mouse and arm//
    var num = (10000)-(dis*dis);
    var sid = sqrt(num);
    //pathegoriam therom//
    stroke (10);
    line (x,y, (mouseX-x)/2+x-cos(tan)*sid, (mouseY-y)/2+y+sin(tan)*sid); 
    //origin point to the medien of the triangle (isosceles)//
    line ((mouseX-x)/2+x-cos(tan)*sid, (mouseY-y)/2+y+sin(tan)*sid, mouseX, mouseY);
    fill(255,255,255);
    ellipse ((mouseX-x)/2+x-cos(tan)*sid, (mouseY-y)/2+y+sin(tan)*sid, 25,25);
    if (mouse)
    {
        strokeWeight(5);
        line (mouseX, mouseY, mouseX+30, mouseY-30);
        line (mouseX, mouseY, mouseX-30, mouseY-30);
        line (mouseX, mouseY, mouseX, mouseY-60);
        ellipse (mouseX,mouseY,50,50);
    }
    else {
        ellipse (mouseX,mouseY,50,50);
    }
  }

  else
    {
        stroke(10);
        line (x,y, x+sin(tan)*200, y+cos(tan)*200);
        fill(255,255,255);
        ellipse (x+sin(tan)*100, y+cos(tan)*100, 25,25);
    if (mouse)
    {
        strokeWeight(5);
        line (x+sin(tan)*200, y+cos(tan)*200, x+sin(tan)*200+30, y+cos(tan)*200-30);
        line (x+sin(tan)*200, y+cos(tan)*200, x+sin(tan)*200-30, y+cos(tan)*200-30);
        line (x+sin(tan)*200, y+cos(tan)*200, x+sin(tan)*200, y+cos(tan)*200-60);
        ellipse (x+sin(tan)*200, y+cos(tan)*200,50,50);
    }
    else {
        ellipse (x+sin(tan)*200, y+cos(tan)*200,50,50);
    }
    }
}


function mousePressed() {
    mouse =!mouse;
    // when pressed show fingers//
}

LO 2 – Generative Art

I really admire the 3D printed items made by the Nervous system for their choice of forms and their shapes, minimizing the use of materials and still managing to serve the function of the item while creating fancy patterns out of those hollowed materials.
Additionally, I also made several 3D models similar to the ones that the Nervous System made through using the grasshopper and rhinoceros program. I am pretty sure that most of the models of the ones shown on the Nervous System websites are made through making one or more Voronoi diagrams first then thicken and smoothen the lines to make it into a solid shape. One good aspect of using Grasshopper is that most variables of the 3D models are configurable, making each design can have an infinite amount of iterations.
I think the creator wanted to create something in between visibility and invisibility through the hollowed shapes using the mathematical methods to minimize visible parts of each item it creates while still working as an object without those holes.

Reference: https://n-e-r-v-o-u-s.com/shop/search_tags.php?search=3dprin

https://n-e-r-v-o-u-s.com/shop/search_tags.php?search=3dprint

aarnavp – Project 2 Variable Face

sketch

The pupils follows your cursor!

function setup() {
    createCanvas(400, 400);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}
var r = 220;
var g = 220;
var b = 220;
var faceW = 150; 
var faceH = 150;
var randomR = 221;
var randomG = 161;
var randomB = 119;
var eyeSize = 5;
var eyeGap = 50
var noseW = 30;
var noseH = 30;
var mouthType = 1;
var mouthSize = 50;
var bodyW = 200;


function draw() {

	background(r, g, b);
	//body
	fill(255 - r, 255 - g, 255 - b);
	ellipse(width / 2, height, bodyW, height);

	//face
	noStroke();
	fill(randomR, randomG, randomB);
	ellipse(width / 2, height / 2, faceW, faceH);

	//eye
	fill(255);
	ellipse((width / 2) - (eyeGap / 2), height / 2, eyeSize * 2);
	ellipse((width / 2) + (eyeGap / 2), height / 2, eyeSize * 2);
	fill(0);
	var y;
	if (mouseY >= (height / 2) + (eyeSize / 2)) {			//if pupil goes past top of eye
		y = min(mouseY, (height / 2) + (eyeSize / 2));
	} else if (mouseY  <= (height / 2) - eyeSize / 2) {		//if pupil goes past bottom of eye
		y = max(mouseY, (height / 2) - (eyeSize / 2));
	} else {												//if pupil is in eye gap
		y = height / 2;
	}

	var xL; 
	var xR;
	if (mouseX >= (width / 2) + (eyeGap / 2)) {								//if pupil goes past right eye
		xR = min(mouseX, (width / 2) + (eyeGap / 2) + (eyeSize / 2));
		xL = min(mouseX, (width / 2) - (eyeGap / 2) + (eyeSize / 2));
	} else if (mouseX <= (width / 2) - (eyeGap / 2)) {						//if pupil goes past left eye
		xL = max(mouseX, (width / 2) - (eyeGap / 2) - (eyeSize / 2));
		xR = max(mouseX, (width / 2) + (eyeGap / 2) - (eyeSize / 2));
	} else {																//if pupil is in eye gap
		xL = (width / 2) - (eyeGap / 2);
		xR = (width / 2) + (eyeGap / 2);
	}

	ellipse(xL, y, eyeSize);	//leftEye
	ellipse(xR, y, eyeSize);	//rightEye

	//nose
	fill(randomR - 20, randomG - 20, randomB - 20);
	ellipse(width / 2, (height / 2) + (faceH / 5), noseW, noseH);
	fill(randomR, randomG, randomB);
	ellipse(width / 2, (height / 2) + (faceH / 5) - 10, noseW, noseH);

	//mouth
	fill(0);
	if (mouthType <= 2 & mouthType >= 1) {
	    rect((width / 2) - (mouthSize / 2), (height / 2) + (faceH / 5) * 2, mouthSize, 3);
	} else {
		circle(width / 2, (height / 2) + (faceH / 5) * 2, mouthSize * 0.25);
	}

}

function mousePressed() {
	bodyW = random(width / 1.5, width / 3);

	faceW = random(width / 4, width / 2);
	faceH = random(height / 4, height / 2);

	randomR = random(150, 200);
	randomG = random(110, 130);
	randomB = random(70, 90);

	eyeGap = random(faceW / 2, faceW / 5);
	eyeSize = random(5, 20);

	noseW = random(20, 40);
	noseH = random(30, 50);

	mouthType = random(0, 2);
	mouthSize = random(faceW / 2, faceW / 10);

	r = random(255);
	g = random(255);
	b = random(255);

}

Project 2 – Variable Faces (Dog)

Click through for color and other variable changes

sketch 

var rightearX = 360;
var rightearY = 240;
var leftearX = 120
var leftearY = 240
var pupilH = 29
var eyebrow = 211
var nose = 120
var tongue = 43
var r = 80
var g= 35
var b= 80
var red = 255
var green = 255
var blue = 255
var beardR = 213
var beardG = 227
var beardB = 244
 
function setup() {
    createCanvas(500, 500);
}
 
function draw() {
    background("white");
    noStroke();
//facebase
    fill(red,green,blue);
        rect(144,150,214,198,50);
//facehood-dark color
    fill(r,g,b);
        rect(144,150,214,162,50);
//faceeyes
    fill(red,green,blue);
        rect(176,192,66,111,33);
        rect(259,192,66,111,33);
//nose
    fill(red,green,blue);
        ellipse(249,337,nose,113);
//tongue
    fill("red");
        rect(229,311,41,tongue,20);
//beard
    fill(beardR,beardG,beardB);
        quad(195,341,216,363,263,316,242,294);
        quad(239,316,260,294,307,341,286,363);
//white eyes
    fill("white");
        ellipse(209,247,37,41);
        ellipse(293,247,37,41);
//darkest color
    fill(r,g,b);
    //ears
        triangle(299,139,383,156,rightearX,rightearY);
        triangle(200,139,116,151,leftearX,leftearY);
    //pupil
        ellipse(208,252,24,pupilH);
        ellipse(293,252,24,pupilH);
    //eyebrows
        rect(189,eyebrow,40,9,5);
        rect(274,eyebrow,40,9,5);
    //snout
        ellipse(250,304,60,34);
}
 
function mousePressed() {
    rightearX = random(350, 390);
    rightearY = random(240, 340);
    leftearX = random(110,150);
    leftearY = random(240,340);
    pupilH = random(20,38);
    eyebrow = random(200,224);
    nose = random(120,150);
    tongue = random(43,80);
    r = random (0,100);
    g = random(0,100);
    b = random (0,100);
    red = random (100,255);
    green = random (100,255);
    blue = random (100,255);
    beardR = random (200,255);
    beardG = random (200,255);
    beardB = random (200,255);
}

LO 02: Generative Art

“Flow” is an interactive art exhibit by Karl Sims. Developed in 2018, it is a computer simulation that displays particle flows and fluid dynamics in vibrant colors on very large screens. The simulation becomes an interactive art installation when viewers interact with it. A Kinect depth sensor registers the human form and mirrors their appearance, placing the viewer in the art. The program senses human gestures and the algorithm registers these gestures as disruptions in the flow; thus generating new and unique art with each viewer. The particle simulation is reminiscent of Van Gogh’s art and immerses the viewer in their own “Starry Night.” The fluid simulations look as though the viewer can paint with their gestures or as though they are immersed in blooming ink drops. Still others give the effect of being embodied in light or rainbow fabrics. In all there are 10 different effects in this exhibit.

There is simplicity in this installation that I admire. It combines the physics of particle flow and fluid dynamics with color. The flow algorithms give the art its initial form, but this dynamic form becomes dependent on viewers as they interact with it. The physics are based on vectors and fluid flow models. Details can be found here.

Sims has been creating flow simulations and generative art since the 1980s. The progression of his work in combining software, art, and the human experience is evident when viewing his earlier works. This installation was commissioned by MIT’s CSAIL, Computer Science and Artificial Intelligence Laboratory. It is currently on display at the MIT Stata Center, in Boston, Massachusetts.

Project 01

this is my project 1

sketch 

function setup() {
    createCanvas(350, 405);
    background(224, 179, 179);
    text("Xinran Yu, Section A");
}

function draw() {
    strokeWeight(0);

    //hair    
    if(mouseX < (width/2)) {
        fill(79, 62, 53); 
        ellipse(170, 190, 200, 200);
        rect(70, 200, 200, 250)
    } else if(mouseX > (width/2)) {
        fill(35, 35, 35);
        ellipse(170, 190, 200, 200);
    rect(70, 200, 200, 250);
    }  

    //ear
    fill(210, 159, 137);       
    ellipse(95, 220, 20, 40);
    ellipse(245, 220, 20, 40);
    fill(245, 208, 155);
    rect(91, 232, 5, 40);
    rect(245, 232, 5, 40);
    
    //neck
    fill(177, 156, 144);       
    triangle(135, 280, 205, 280, 170, 370);
    
    //face
    fill(240, 221, 210);       
    ellipse(170, 210, 150, 170);
    
    //eyes
    fill(0)                    
    ellipse(140, 200, 20, 30);
    ellipse(200, 200, 20, 30); 
    fill(255, 255, 255, 150);
    ellipse(136, 203, 10, 15);
    ellipse(196, 203, 10, 15);

    //clothes
    fill(85, 112, 142);        
    rect(95, 330, 150, 200);
    ellipse(95, 405, 159, 150);
    ellipse(255, 405, 150, 150);
    fill(122, 163, 208);
    triangle(95, 330, 245, 330, 170, 380);

    //eyebrows
    strokeWeight(2);
    noFill();
    beginShape();
    curveVertex(125, 177);
    curveVertex(125, 177);
    curveVertex(135, 175);
    curveVertex(145, 175);
    curveVertex(153, 177);
    curveVertex(153, 177);
    endShape();
    strokeWeight(2);
    noFill();
    beginShape();
    curveVertex(185, 177);
    curveVertex(185, 177);
    curveVertex(195, 175);
    curveVertex(205, 175);
    curveVertex(213, 177);
    curveVertex(213, 177);
    endShape();
       
    //nose
    strokeWeight(0);
    fill(210, 159, 137);       
    triangle(160, 225, 180, 225, 170, 250);

    //mouth
    strokeWeight(3);
    noFill();
    beginShape();
    curveVertex(150, 260);
    curveVertex(150, 260);
    curveVertex(165, 270);
    curveVertex(175, 270);
    curveVertex(190, 260);
    curveVertex(190, 260);
    endShape();
}

Project 1: My Self Portrait

sketch (self portrait) 
function setup() {
    createCanvas(300, 300);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    background(186, 215, 190);
    fill(0);
    ellipse(150, 155, 170, 190); 
    fill(239, 222, 205);
    fill(239, 222, 205);
    rect(125, 150, 50, 100);  //neck
    ellipse( (width/2), (height/2) , 100, 120);
    fill(252, 252, 252);
    ellipse(130, 140, 15, 9); // left socket
    fill(102, 51, 0);
    circle(130, 140, 7);  // Pupil (left)
    fill(0);
    circle(130, 140, 2);  // iris (right)
    fill(252, 252, 252); 
    ellipse(170, 140, 15, 9);  // right socket
    fill(102, 51, 0);
    circle(170, 140, 7);   // pupil (right)
    fill(0);
    circle(170, 140, 2);  // iris(right)
    arc(130, 130, 22, 5, radians(180), radians(360));  // left eyebrow. I learned this by looking it up. by wrapping degrees in radians I can work in degrees!
    arc(170, 130, 22, 5, radians(180), radians(360));
    fill(232, 214, 197);
    triangle(150, 148, 145, 170, 155, 170);
    point(131, 150); // freckles!!
    point(135, 154);
    point(127, 152);
    point(123, 150);
    point(119, 152);
    point(116, 158);
    point(126, 156);
    point(130, 158);
    point(171, 150);
    point(175, 154);
    point(167, 152);
    point(163, 150);
    point(159, 152);
    point(156, 158);
    point(166, 156);
    point(170, 158);
    fill(238, 131, 163); 
    arc(150, 180, 40, 23, radians(0), radians(180)); // lips!
    fill(255);
    arc(150, 182, 30, 15, radians(0), radians(180));
    // arc(150, 100, )
    fill(0);
    ellipse(150, 86, 60,32);
    fill(0);
    arc(130, 100, 40, 23, radians(0), radians(180));
    fill(0);
    arc(170, 100, 40, 23, radians(0), radians(180));
    circle(130, 90, 32);
    circle(170, 90, 32);
    fill(112, 171, 149);        //shirt
    ellipse(150,305, 130, 160);
    fill(0);
    ellipse(70, 130, 20, 30); //HAIR
    ellipse(80, 110, 20, 30);
    ellipse(90, 100, 20, 30);
    ellipse(100, 90, 20, 30);
    ellipse(68, 150, 20, 30);
    ellipse(68, 170, 20, 30);
    ellipse(70, 190, 20, 30);
    ellipse(80, 210, 20, 30);
    ellipse(90, 230, 20, 30);
    ellipse(100,240, 20, 30);
    ellipse(230, 130, 20, 30);
    ellipse(220, 110, 20, 30);
    ellipse(210, 100, 20, 30);
    ellipse(100, 90, 20, 30);
    ellipse(230, 150, 20, 30);  // 230- 68= 162 (+162)
    ellipse(230, 170, 20, 30);
    ellipse(230, 190, 20, 30);
    ellipse(220, 210, 20, 30);
    ellipse(210, 230, 20, 30);
    ellipse(200, 240, 20, 30);
}

Blog 01

A piece of art that I am focusing on is “In Harmonicity, The Tonal Walkway” by Julianne Schwartz, linked here https://massmoca.org/event/julianne-swartz-in-harmonicity-the-tonal-walkway/, text courtesy of the artist. The piece is located at MASS MoCA in North Adams Massachusetts and it is a hallway filled with various sounds, voices, singing, etc, that change based on your proximity to them. I admire how the work of art engages the audience in different ways and makes them disoriented just based on sound. I find this interesting because the hallway is necessary for patrons to use to access various parts of the museum, so there is no way to avoid the discomfort that the hallway can cause. Schwartz recorded 24 amateur and professional singers aging from 7-75. They were recorded in different spaces and from different distances to create different tonal qualities. To the best of my knowledge Schwartz solely recorded the individuals using off the shelf microphones but changed the environment in which the microphones were used. This piece was particularly inspired by peoples emotions and the complex relationships that take place between 2 or more people. This piece of art in particular opens up the conversation about the ways in which we can portray relationships in art, especially using non-visual mediums.

Project 01

This is my project

sketch
function setup() {
    createCanvas(200, 200);
    background(255);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

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

    strokeWeight(0);
    fill(random(210,255),random(210,255),random(210,255),75);
    rect(0,0,100,200)

    strokeWeight(0);
    fill(255);
    rect(50,80,100,55); //hair back

    strokeWeight(0);
    fill(255);
    quad(60,160,140,160,75,50,125,50);   //hair back

    strokeWeight(0);
    fill(255);
    quad(55,145,145,145,60,70,140,70);   //hair back

    strokeWeight(0);
    fill(random(50,100),random(50,100),random(50,100));
    triangle(100,165,175,200,25,200);    //shoulders

    strokeWeight(0);
    fill(random(100,200),random(100,200),random(100,200));
    ellipse(100,100,90,125);    //head

    strokeWeight(0);
    strokeWeight(0);
    rect(85,100,30,77); //neck

    strokeWeight(0);
    strokeWeight(0);
    triangle(100,185,115,177,85,177);    //more neck

    fill(random(210,255),random(210,255),random(210,255),75); //face shading
    beginShape();
    vertex(100,100);
    vertex(110,120);
    vertex(100,160);
    vertex(145,160);
    vertex(145,37.5);
    vertex(100,37.5);
    endShape();

    stroke(100,0,50);
    fill(20,0,20);
    triangle(75,80,95,110,60,120);   //right eye

    fill(random(210,255),random(210,255),random(210,255));
    circle(77,100,15);    //right pupil

    circle(120,100,30); //left eye

    stroke(random(0,50),random(0,50),random(0,50));
    strokeWeight(5);
    line(110,100,130,100);  //left pupil

    stroke(255);
    strokeWeight(3);
    fill(0);
    arc(100,140,50,20,15.7,PI+PI,PIE);  //mouth

    strokeWeight(0); 
    fill(255);
    square(55,38,45); //hair front

    strokeWeight(0); 
    fill(255);
    arc(100,38,50,20,10.5,PI,PIE) //hair front

    strokeWeight(0); 
    fill(255);
    beginShape();
    vertex(100,38);
    bezierVertex(100,38,100,100,150,60)
    bezierVertex(100,20,120,70,150,50)
    endShape();     //hair front

     noloop()


}