September 2017 – Page 41 – [OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice

rmanagad-project03-sectionE

//Robert Managad
//Section E
//rmanagad@andrew.cmu.edu
//Project-03

//changes in color, position, size, and angle
//contrary behaviours in rotations.

//attributes of the wave vector "big circle"
var circleHW = 200; //height and width of circle
	circleColorR = 141;
	circleColorG = 168;
	circleColorB = 186;
	circlestrokeW = 0;

//attributes of dot rings. All rotating objects follow these conventions.
var dotcircleHW = 100;
	dotcircleStrokeW  = 0;
	dotstrokeW = 0; 

	dotcircle2HW = 200
	dotcirclestrokeW2 = 0;
	dotstrokeW2 = 0;


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

function draw(){
	background(5);
	//wave vector
	noFill();
	stroke(141, circleColorG, 186);
	strokeWeight(circlestrokeW);
		ellipse(width/2, height/2, circleHW, circleHW);
			circleHW = mouseY*4; // Size of circle gets bigger as mouse moves downward by a factor of 4.
			circleColorG = mouseX/3; // color of circle changes as mouse moves downward by a factor of 1/3.
			circlestrokeW = mouseY/25; // strokeweight of circle changes as mouse moves downward by a factor of 1/25.
	
	//dot circle outer
		noFill();
		stroke(circleColorR, 168, 186);
		strokeWeight(dotcirclestrokeW2);
			ellipse(width/2, height/2, dotcircle2HW, dotcircle2HW);
				dotcircle2HW = mouseY*8; // size of circle gets bigger as mouse moves downward by a factor of 8
				circleColorR = mouseX/3;// Red channel of circle changes as mouse moves downward by a favtor of 1/3
				dotcirclestrokeW2 = mouseY/20;// strokeweight changes as mouse moves downward by  factor of 20
	//dots outer
	fill(5);
	stroke(141, circleColorG, 186);
	strokeWeight(dotstrokeW2);
	
	push(); //performing rotations only for these elements
		translate(width/2, height/2);
		rotate(-mouseY); //negative mouseY makes element rotate counter-clockwise.
		//dotcircle is the diameter of the orbited circle, placing each dot at the edge of the circle when the other coordinate is 0.
			ellipse(dotcircle2HW/2, 0, dotcircle2HW/8, dotcircle2HW/8); 
			dotstrokeW2 = mouseY/15;
	pop();
	push(); 
		translate(width/2, height/2);
		rotate(mouseY);
			ellipse(dotcircle2HW/2, dotcircle2HW/2, dotcircle2HW/8, dotcircle2HW/8);
			dotstrokeW2 = mouseY/15;
	pop();
	push(); 
		translate(width/2, height/2);
		rotate(-mouseY);
			ellipse(0 - dotcircle2HW/2, 0, dotcircle2HW/8, dotcircle2HW/8); 
			dotstrokeW2 = mouseY/15;
	pop();
	push(); 
		translate(width/2, height/2);
		rotate(mouseY);
			ellipse(0 - dotcircle2HW/2, 0 - dotcircle2HW/2, dotcircle2HW/8, dotcircle2HW/8); 
			dotstrokeW2 = mouseY/15;
	pop();
	push(); 
		translate(width/2, height/2);
		rotate(-mouseY);
			ellipse(0, dotcircle2HW/2, dotcircle2HW/8, dotcircle2HW/8); 
			dotstrokeW2 = mouseY/15;
	pop();
	push(); 
		translate(width/2, height/2);
		rotate(-mouseY);
			ellipse(0, 0 -dotcircle2HW/2, dotcircle2HW/8, dotcircle2HW/8);
			dotstrokeW2 = mouseY/15;
	pop();



	//dot circle inner
	fill(5);
	stroke(circleColorR, 168, 186);
	strokeWeight(dotcircleStrokeW);
		ellipse(width/2, height/2, dotcircleHW, dotcircleHW);
			dotcircleHW = mouseY; // Expands at slower rate than first circle.
			circleColorR = mouseX/3;
			dotcircleStrokeW = mouseY/45;
	//dots inner
	fill(5);
	stroke(141, circleColorG, 186);
	strokeWeight(dotstrokeW);
	
	push(); //performing rotations only for these elements
		translate(width/2, height/2);
		rotate(mouseY);
			ellipse(dotcircleHW/2, 0, dotcircleHW/5, dotcircleHW/5); //dotcircle is the diameter of the orbited circle.
			dotstrokeW = mouseY/80;
	pop();
	push();
		translate(width/2, height/2);
		rotate(mouseY);
			ellipse(0 - dotcircleHW/2, 0, dotcircleHW/5, dotcircleHW/5);
			dostrokeW = mouseY/100;
	pop();
	push();
		translate(width/2, height/2);
		rotate(-mouseY);
			ellipse(0 - dotcircleHW/2, 0 - dotcircleHW/2, dotcircleHW/5, dotcircleHW/5);
			dostrokeW = mouseY/100;
	pop();
	push();
		translate(width/2, height/2);
		rotate(mouseY);
			ellipse (0, dotcircleHW/2, dotcircleHW/5, dotcircleHW/5);
			dostrokeW = mouseY/100;
	pop();
	push();
		translate(width/2, height/2);
		rotate(-mouseY);
			ellipse (dotcircleHW/2, dotcircleHW/2, dotcircleHW/5, dotcircleHW/5);
			dostrokeW = mouseY/100;
	pop();
	push();
		translate(width/2, height/2);
		rotate(mouseY);
			ellipse (0, 0 - dotcircleHW/2, dotcircleHW/5, dotcircleHW/5);
			dostrokeW = mouseY/100;
	pop()
	

	}

My approach to this project came from motions emulated by a ship moving through space, with waves and particles approaching the person viewing the work by expanding in size. In my sketches, I explored multiple variants of rotational elements before choosing on ellipses to maintain simplicity. As always, I used Adobe Illustrator to assist me in mapping out the composition of the work.

hyt-03-Looking Outwards: Generative Cloud

Caption: Cumulus In Progression – by SOFTLab.

When I was browsing on the websites given by the professor, I came across project Cumulus on Behance created by SOFTLab. This is an interactive installation that enables the light, as well as geometric shapes to change in response to the sounds in its environment. However, the changes are not constant, but rather irregular based on a series of algorithms coded through Processing, which sets up “tubes” of lightning connecting from one end to another, hence creating a mysterious cloud-shaped sculpture. The “tube” materials consist of acrylic along with 3D printed joints, as well as over 70 meters of LED lights installed within the structure.

This project intrigued me as I enjoyed its interactivity engaging with the audience. Its futuristic shape in combination with a very nature-centered concept with lightning, cloud, and sounds can be confusing but eyeopening at the same time. On the other hand, its analytic aspect of breaking down the system of sounds also adds a technological meaning to the piece. I am curious to learn about how Processing helped to generate an art piece like this, and I am excited to try out the process as well!

hyt-Project-03: Dynamic Drawing

Dynamic Drawing

// helen tsui
// 15-104 section d
// hyt@andrew.cmu.edu
// project-03-dynamic-drawing

var x1 = 100; // top left coordinate of the quad
var x2 = 150; 
var x3 = 200;
var x4 = 250;
var y = 230; // top left coordinate of the quad
var v = 150; // random variable, refer to attached pic in post 
var TH = 120; // triangle height, refer to attached pic in post
var TW = 170;
var radius = 20; // radius
var lightOn = false;
var curveOn = false; 
var arrived1 = false;
var arrived2 = false;
var arrived3 = false;
var arrived4 = false;


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


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

// lights turn on the screen
    fill(255, 255, mouseX / 3); // yellow
    text("~press me~", 80, 100);
    noStroke();
    ellipse(200, 200, radius, radius); // light source

// mouse approach the light source and light fills the screen
    var distance = dist(mouseX, mouseY, 200, 200);
    if (distance < 10) {
        lightOn = true;
    }
    if (lightOn == true){
        radius += 5;
    }

// a sequential order from quad1+3 to quad2+4
    if (radius > 500) {
        if (x1 < 150) {
            x1 += 1
        } else {
            arrived1 = true; 
        }
        if (x2 < 200 & arrived1 == true) {
            x2 += 1;
        } else {
            arrived2 = true;
        }
        if (x3 < 250 & arrived2 == true) {
            x3 += 1;
        } else {
            arrived3 = true;
        }
        if (x4 < 300 & arrived3 == true) {
            x4 += 1;
        } else {
            arrived4 == true;
        }
    }

// original quad lines
    b = mouseX; // color gradient for background
    stroke(0);
    strokeWeight(3);
    v = random(120, 125);
    // quad 1
        line(x1, y, x1 + TW, y - TH); 
        line(x1 + TW, y - TH, x1 + TW, y - TH + v); 
        line(x1 + TW, y - TH + v, x1, y + v);
        line(x1, y + v, x1, y);
    // quad 2
    if (arrived1 == true) {
        line(x2, y, x2 + TW, y - TH); 
        line(x2 + TW, y - TH, x2 + TW, y - TH + v); 
        line(x2 + TW, y - TH + v, x2, y + v);
        line(x2, y + v, x2, y);
    }
    // quad 3
    if (arrived2 == true) {
        line(x3, y, x3 + TW, y - TH); 
        line(x3 + TW, y - TH, x3 + TW, y - TH + v); 
        line(x3 + TW, y - TH + v, x3, y + v);
        line(x3, y + v, x3, y);
    }    
    // quad 4
    if (arrived3 == true) {
        line(x4, y, x4 + TW, y - TH); 
        line(x4 + TW, y - TH, x4 + TW, y - TH + v); 
        line(x4 + TW, y - TH + v, x4, y + v);
        line(x4, y + v, x4, y);
    }

}

This project has been extremely challenging to me. I was struggling a lot with which idea to focus on, and eventually chose an abstract geometric, animation-like shape. I wanted to create a scenery of light litting up the screen in darkness, and surprisingly you would find moving, animated geometry sequence. The end product was not really what I expected, but in general I was glad that I learned ways to use better logic with if statements.

Project-03-sjahania

sketch

var skyColor = 150;
var sunY = 50;
var lightsOn = false;
var starsX = 100
var starsY = 320


function setup() {
    createCanvas(640, 480);
    background(0, skyColor,255);
}

function draw() {

	//sky color
	strokeWeight(1);
	var skyColor = mouseX/(640/225);
	background(0, 225 - skyColor, 225);
	
	//sun
	fill(255,228,0);
	ellipse(2*mouseX, sunY + (.2*mouseX), 80, 80);

	//moon
	fill(219,220,226);
	var moonY = 2*(-mouseX+480)
	if (moonY < 80) {
		moonY = 80;
	}
	arc(width/2, moonY, 80, 80, HALF_PI, PI + HALF_PI, CHORD);

	//stars
	fill(219,220,226);
	strokeWeight(10);
	if (mouseX > 400) {
		starsX = random(0,640);
		starsY = random(0,100);
		point(starsX,starsY);
	}


	//grass
	strokeWeight(1);
	var grassColor = mouseX/(640/177);
	noStroke();
	fill(0, 177 - grassColor, 0);
	rect(0, 420, 640, 60);


	//house
		//house part
	fill(165, 0, 0);
	rect(400, 270, 175, 180);

		//roof part
	fill(0);
	triangle(350,270,487,200,625,270);

		//door
	fill(0);
	arc(487,450,40,150,PI, TWO_PI)

		//door handle
	fill(255,228,0);
	ellipse(500,430,10,10);

		//window color
	if (lightsOn == true) {
		fill(255,228,0);
	} else {
		fill(0);
	}

		//windows
	ellipse(487,300,30,30);
	rect(430,320,40,40);
	rect(505,320,40,40);
	stroke(0);
	line(525,320,525,360);
	line(450,320,450,360);
	line(505,340,545,340);
	line(430,340,470,340);



}

function mousePressed() {
	if (lightsOn == true) {
		lightsOn = false;
	} else {
		lightsOn = true;
	}
}

I had trouble coming up with an idea, so I settled for something easy because I’m artistically challenged. The sun and moon set and rise respectively when the mouse goes left to right, the colors change, the house lights turn on with a mouse click, and the stars come out when it’s dark.

Jonathan Perez Project 3

sketch



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

function draw() {
    background(255);
    fill(255);
    stroke(0);
    ellipse(width/2, height/2, 50, 50); //outer center ring

    translate(width/2, height/2);
    for (var i = 0; i < 8; i++) { //ring of 8 diamonds

        //first ring
        push();
        var mouseDist = dist(mouseX, mouseY, width/2, height/2); //mouse distance from center
        var bright = 225 - 225 * mouseDist * 1/230; //alters shade from 0 to 225 of the diamonds to be darker as they approach center
        var scaleAmount = 1.75 - 1.75 * mouseDist * 1/230; //scales diamonds from 0 to 1.75 to be larger as they move outwards
        if (mouseX > 240) {
            rotate(-acos((mouseY - height/2)/mouseDist)/2 + TWO_PI * i/8); //sets angular distance between diamonds, and rotates proportional to mouse angle
        }
        else {
            rotate(acos((mouseY - height/2)/mouseDist)/2 + TWO_PI * i/8); //accounts for the face that arccos switches direction at PI/2 and 3PI/2
        }
        if (mouseDist < 230) { //expands and contracts diamonds until just before edge of canvas
           translate(100 - 100 * mouseDist * 1/230, 0); //diamonds move towards center as mouse moves away proportional to original translation
       }
        fill(bright);
        if (mouseDist < 230) { //if statement used so that scaling does not increase after value reaches zero
            scale(scaleAmount);
            quad(0, 10, -45, 0, 0, -10, 45, 0); //diamond
        } else {
            fill(0);
            ellipse(0,0,40,40); //center circle
        }
        pop()
        //simplified comments will be used for further iterations of the ring of diamonds, refer to first ring for more info
        //second ring of diamonds
        push();
        if (mouseX > 240) { //rotation related to mouse
            rotate(acos((mouseY - height/2)/mouseDist)/4 + TWO_PI * i/8 + PI/8);
        }
        else {
            rotate(-acos((mouseY - height/2)/mouseDist)/4 + TWO_PI * i/8 + PI/8);
        }
        if (mouseDist < 230) { //distance from center related to mouse
           translate(155 - 155 * mouseDist * 1/230, 0);
       }
        fill(bright + 40); //shading related to distance from center/mouse
        if (mouseDist < 230) {
            scale(scaleAmount - .1); //scaling of diamond related to distance from center
            quad(0, 10, -45, 0, 0, -10, 45, 0); //diamond
        } else {
            fill(0);
            ellipse(0,0,40,40); //black center
        }
        pop();

        //first half of third ring of diamonds 
        push();
        if (mouseX > 240) { //rotation related to mouse
            rotate(-acos((mouseY - height/2)/mouseDist)/8 + TWO_PI * i/8 + PI/16); 
        }
        else {
            rotate(acos((mouseY - height/2)/mouseDist)/8 + TWO_PI * i/8 + PI/16); 
        }
        if (mouseDist < 230) { //distance from center related to mouse
           translate(210 - 210 * mouseDist * 1/230, 0); 
       }
        fill(bright + 80); //shading related to distance from center/mouse
        if (mouseDist < 230) { 
            scale(scaleAmount - .2); //scaling of diamond related to distance from center
            quad(0, 10, -45, 0, 0, -10, 45, 0); //diamond
        } else {
            fill(0);
            ellipse(0,0,40,40); //black center
        }
        pop();

        //second half of third ring of diamonds 
        push();
        if (mouseX > 240) { //rotation related to mouse
            rotate(-acos((mouseY - height/2)/mouseDist)/8 + TWO_PI * i/8 + 3*PI/16);
        }
        else {
            rotate(acos((mouseY - height/2)/mouseDist)/8 + TWO_PI * i/8 + 3*PI/16); 
        }
        if (mouseDist < 230) { //distance from center related to mouse
           translate(265 - 265 * mouseDist * 1/230, 0); 
       }
        fill(bright + 80); //shading related to distance from center/mouse
        if (mouseDist < 230) { 
            scale(scaleAmount - .2); //scaling of diamond related to distance from center
            quad(0, 10, -45, 0, 0, -10, 45, 0); //diamond
        } else {
            fill(0);
            ellipse(0,0,40,40); //black center
        }
        pop();

        //fourth ring first part
        push();
        if (mouseX > 240) { //rotation related to mouse
            rotate(acos((mouseY - height/2)/mouseDist)/8 + TWO_PI * i/8 + PI/16);
        }
        else {
            rotate(-acos((mouseY - height/2)/mouseDist)/8 + TWO_PI * i/8 + PI/16);
        }
        if (mouseDist < 230) { //distance from center related to mouse
           translate(320 - 320 * mouseDist * 1/230, 0); 
       }
        fill(bright + 110); //shading related to distance from center/mouse
        if (mouseDist < 230) { 
            scale(scaleAmount - .25); //scaling of diamond related to distance from center
            quad(0, 10, -45, 0, 0, -10, 45, 0); //diamond
        } else {
            fill(0);
            ellipse(0,0,40,40); //black center
        }
        pop()

         //fourth ring second part
        push();
        if (mouseX > 240) { //rotation related to mouse
            rotate(acos((mouseY - height/2)/mouseDist)/8 + TWO_PI * i/8 + 3*PI/16); 
        }
        else {
            rotate(-acos((mouseY - height/2)/mouseDist)/8 + TWO_PI * i/8 + 3*PI/16);
        }
        if (mouseDist < 230) { //distance from center related to mouse
           translate(320 - 320 * mouseDist * 1/230, 0);
        }
        fill(bright + 110); //shading related to distance from center/mouse
        if (mouseDist < 230) {
            scale(scaleAmount - .25); //scaling of diamond related to distance from center
            quad(0, 10, -45, 0, 0, -10, 45, 0); //diamond
        } else {
            fill(0);
            ellipse(0,0,40,40); //black center
        }
        pop()

        //fifth ring first part
        push();
        if (mouseX > 240) { //rotation related to mouse
            rotate(-acos((mouseY - height/2)/mouseDist)/8 + TWO_PI * i/8 + PI/8);
        }
        else {
            rotate(acos((mouseY - height/2)/mouseDist)/8 + TWO_PI * i/8 + PI/8);
        }
        if (mouseDist < 230) { //distance from center related to mouse
           translate(375 - 375 * mouseDist * 1/230, 0);
        }
        fill(bright + 120); //shading related to distance from center/mouse
        if (mouseDist < 230) {
            scale(scaleAmount - .3); //scaling of diamond related to distance from center
            quad(0, 10, -45, 0, 0, -10, 45, 0); //diamond
        } else {
            fill(0);
            ellipse(0,0,40,40); //black center
        }
        pop()

        //fifth ring second part
        push();
        if (mouseX > 240) { //rotation related to mouse
            rotate(-acos((mouseY - height/2)/mouseDist)/8 + TWO_PI * i/8 + 4*PI/16);
        }
        else {
            rotate(acos((mouseY - height/2)/mouseDist)/8 + TWO_PI * i/8 + 4*PI/16);
        }
        if (mouseDist < 230) { //distance from center related to mouse
           translate(375 - 375 * mouseDist * 1/230, 0);
        }
        fill(bright + 120); //shading related to distance from center/mouse
        if (mouseDist < 230) {
            scale(scaleAmount - .3); //scaling of diamond related to distance from center
            quad(0, 10, -45, 0, 0, -10, 45, 0); //diamond
        } else {
            fill(0);
            ellipse(0,0,40,40); //black center
        }
        pop()

    }
    fill(0);
    ellipse(0,0,40,40); //black circle over diamonds

}

I honestly had no idea what I was going to do with this project. Given that, the creative process was pretty interesting. Honestly, the only thing I was going off of to begin with was that I wanted the diamond shape to be a central theme of the drawing. After that, the rest of the ideas sort of haphazardly tumbled together. The diamond shape led me to a sort of stylized star/space concept, so then I knew I wanted to work with concentric circles rotating alternately. Once I started drawing those, the way the circles condensed into a tight, compact star shape made me think of a supernova. So after that, I intentionally themed the drawing around a sort of explosive, supernova idea.

Although I had the theme all figured out, achieving that idea turned out to be pretty difficult. I had no idea how I was going to get the different rows of diamonds to rotate in regards to the mouses angle to the center of the canvas, not to mention to get them to rotate at different rates related the the mouses angle. The math was pretty tricky, but also I feel like that gives the code a sense of beauty. This was definitely the first thing that I have coded that I felt the code should be seen as well as the product. The code is just as much art.

If I had more time (and I might just go back and do this on my own time) I want to develop the background more. Give it a sense of depth, like a star in space.

hdw – Looking Outwards 3

Manfred Mohr is a generative artist who was first making generative art in the 1960’s. He was one of the earliest adopters of this field.

“Artificia II ” is a artwork based on the book Artificia he published in 1969. The artwork itself came out in 2012. He was inspired by the rhythm of the work and felt it was complimentary to the book he wrote.

The algorithm is made up of segmented lines that cross and change directions on a 11 and 15 dimension cute. The colors are calculated based on the x-vertext. The baseline algorithm gives the artwork its rhythm. You can read more about it here.

Some works in his collection. You can view the rest here.

ssontag-fireworks-Project-03-DynamicDrawing

For this project I let my knowledge of certain functions built into p5.js. I researched Perlin Noise and became pretty comfortable with the way it worked in conjunction with the rotate function to create a firework effect.

sketch


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

function draw() {
    background(220);
//these rectangles following are lined up one after the other 
//they follow the x value of the mouse, but are offset by the rectangles next to them
    fill(219, 112, 147);
    rect(mouseX + 525, 0, 300, 480);

    fill(176, 224, 230);
    rect(mouseX + 500, 0, 25, 480);

    fill(255, 218, 185);
    rect(mouseX + 350, 0, 150, 480);

    fill(135, 206, 250);
    rect(mouseX + 300, 0, 50, 480);

    fill(30, 144, 255);
    rect(mouseX, 0, 300, 480);

    fill(143, 188, 143);
    rect(mouseX - 100, 0, 100, 480);

    fill(255, 140, 0);
    rect(mouseX - 300, 0, 200, 480);

    fill(173, 216, 230);
    rect(mouseX - 350, 0, 50, 480);

    fill(224, 255, 255);
    rect(mouseX - 450, 0, 100, 480);

    fill(240, 128, 128);
    rect(mouseX - 750, 0, 300, 480);
 
//my goal was to modulate the position of the cirlces rotated around the translated orgin 
//in order to create a firework effect
//by using push, pop, and rotate i can make a circular array of ellipses
//by using the perlin noise i can make the circles ungulate based on the perlin noise number sequence
    translate(width/2, height/2);
        for (var i = 0; i < 16; i++) {
            push();
            rotate(TWO_PI * i / 16);
            var tx = 200 * noise(0.01*frameCount);
            translate(tx, 0);
            fill(255, 239, 213);
            ellipse(mouseX - 400, 0, 20, 20);
            translate();
            pop();
        }

        for (var i = 0; i < 8; i++) {
            push();
            rotate(TWO_PI * i / 8);
            var tx = 200 * noise(0.01*frameCount);
            translate(tx, 0);
            fill(102, 51, 153)
            ellipse(mouseX - 200, 0, 50, 50);
            translate();
            pop();
        }

//this translation puts a firework in the bottom right corner
    translate(width/2, height/2);
        for (var i = 0; i < 32; i++) {
            push();
            rotate(TWO_PI * i / 32);
            var tx = 200 * noise(0.01*frameCount);
            translate(tx, 0);
            fill(0, 128, 128);
            ellipse(mouseX - 200, 0, 10, 10);
            translate();
            pop();
        }
//this translation places a firework in the top left corner
    translate(-640, -480);
        for (var i = 0; i < 32; i++) {
            push();
            rotate(TWO_PI * i / 32);
            var tx = 200 * noise(0.01*frameCount);
            translate(tx, 0);
            fill(0, 128, 128);
            ellipse(mouseX - 200, 0, 10, 10);
            translate();
            pop();
        }


}

jwchou-project03-dynamicdrawing

sketch 285

//Jackie Chou
//Section E
//jwchou@andrew.cmu.edu
//Project-Week-03

var bkgndR = 241;
var bkgndG = 240;
var bkgndB = 120;
var appleR = 241;
var appleG = 98;
var appleB = 72;

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

function draw() {
	background(bkgndR, bkgndG, bkgndB);
	noStroke();

    push();
    //rotates apple at the end when mouseX >500
    if (mouseX > 500) {
        translate(670, -50);
        rotate(PI/2.01);
    }

	//stem   
	fill(96, 47, 7);
	beginShape();
	curveVertex(311, 176);
	curveVertex(325, 169);
	curveVertex(323, 137);
	curveVertex(333, 111);
	curveVertex(325, 99);
	curveVertex(315, 106);
	curveVertex(318, 115);
	curveVertex(315, 130);
	curveVertex(312, 146);
	curveVertex(312, 176);
	endShape();

	//apple
	fill(appleR - 0.046 * mouseX, appleG + 0.1109 * mouseX, appleB + 0.09166 * mouseX);
    beginShape();
    curveVertex(315, 149);
    curveVertex(308, 149);
    curveVertex(285, 143);
    curveVertex(257, 149);
    curveVertex(236, 161);
    curveVertex(201, 218);
    curveVertex(214, 311);
    curveVertex(273, 371);
    curveVertex(323, 373);
    curveVertex(354, 376);
    curveVertex(399, 358);
    curveVertex(443, 283);
    curveVertex(451, 236);
    curveVertex(430, 177);
    curveVertex(376, 141);
    curveVertex(338, 140);
    curveVertex(315, 149);
    endShape();

    //bite one when mouseX > 40
    if (mouseX > 40) {
      fill(bkgndR, bkgndG, bkgndB);
      ellipse(440, 170, 80, 80);
    }

    //bite two when mouseX > 80
    if (mouseX > 80) {
      fill(bkgndR, bkgndG, bkgndB);
      ellipse(425, 230, 70, 90);
    }

    //bite three when mouseX > 20
    if (mouseX > 20) {
      fill(bkgndR, bkgndG, bkgndB);
      ellipse (200, 260, 70, 90);
    }

    //bite four when mouseX > 60
    if (mouseX > 60) {
      fill(bkgndR, bkgndG, bkgndB);
      ellipse (210, 290, 80, 60);
    }

    //bite five when mouseX > 200
    if (mouseX > 200) {
      fill(bkgndR, bkgndG, bkgndB);
      ellipse (430, 300, 100, 100);
    }

    //bite six when mouseX > 150
    if (mouseX > 150) {
      fill(bkgndR, bkgndG, bkgndB);
      ellipse (200, 160, 130, 130);
    }

    //bite seven when mouseX > 280
    if (mouseX > 280) {
      fill(bkgndR, bkgndG, bkgndB);
      ellipse (428, 270, 120, 90);
    }

    //bite eight when mouseX and seed one > 320
    if (mouseX > 320) {
      fill(bkgndR, bkgndG, bkgndB);
      ellipse (210, 250, 110, 100);
      fill(140, 98, 57);
      ellipse (300, 235, 12, 25);
    }

    //bite nine and seed two when mouseX > 400
    if (mouseX > 400) {
      fill(bkgndR, bkgndG, bkgndB);
      ellipse (215, 300, 96, 96);
      fill(140, 98, 57);
      ellipse (315, 255, 12, 25);
    }

    //bite ten and seed three when mouseX > 450
    if (mouseX > 450) {
      fill(bkgndR, bkgndG, bkgndB);
      ellipse (415, 160, 90, 105);
      fill(140, 98, 57);
      ellipse (325, 225, 12, 25);
    
    }
    pop();




}

For this project, I started with an idea that I would have a plane take off and land as mouseX moved from left to right. However, I realized that I probably did not have the coding skill to pull it off successfully because I didn’t know how to make a complex object expand/shrink in size.

I was thinking of a good chronological visual, and the idea of having an apple being eaten made sense to me. I used mouseX and background-colored ellipses to convey bites being taken out of the apple. I tried making the background change color as well, but it ultimately distracted from the apple.

eeryan-LookingOutwards-03

Escapism is a collection by Iris Van Herpen in collaboration with architect Daniel Wildrig and digital manufacturer .MGX by Materialise that encapsulates feelings of emptiness that result from escaping daily struggles via digital environments. It was one of the collections of hers that was featured at the Carnegie Museum of Art last Spring. When I went to see the exhibit, I was very interested in the intersection of fashion and digital manufacturing in her designs, as a designer who has an interest in fashion. Van Herpen’s work manifests along the borders of fashion, digital manufacturing, and product design. Many of the outfits in the collection are partially made via computational fabrication, using 3D printing. Her work realizes a combination between traditional craftsmanship and digital processes, as many pieces of her collections are 3D printed. The attached piece was made without any seams, and is completely 3D printed. For the piece above, she used an algorithm to create a a garment created of thin rumpled mesh.

yunzhous-Project-01-Face

yunzhous-project-01-face

function setup() {
    createCanvas(500, 500);
    background(241, 163, 111);

}

function draw() {
    

    translate(0, 65);

    //hair
    fill(0);
    ellipse(width/2, 130, 160, 160);
    rectMode(CENTER);
    rect(width/2, 250, 160, 240);

    //hat
    fill(251, 197, 197);
    noStroke();
    triangle(325, 0, 250, 50, 325, 100);
    ellipse(325, -5, 25, 25);

    //face
    noStroke();
    fill(240, 206, 183);
    ellipse(width/2, 150, 130, 140);

    //ears
    fill(240, 206, 183);
    ellipse(183, 155, 20, 25);
    ellipse(317, 155, 20, 25);

    //dark circles
    fill(125, 60);
    arc(220, 158, 25, 20, 0, PI);
    arc(280, 158, 25, 20, 0, PI);
    fill(240, 206, 183);
    ellipse(220, 152, 25, 20);
    ellipse(280, 152, 25, 20);

    //eyes
    fill(255);
    ellipse(220, 150, 25, 20);
    ellipse(280, 150, 25, 20);
    fill(0);
    ellipse(224, 152, 14, 14);
    ellipse(284, 152, 14, 14);

    //eyebrows
    stroke(0);
    strokeWeight(4);
    line(205, 135, 235, 125);
    line(265, 125, 295, 135);

    //nose
    stroke(0);
    strokeWeight(2);
    line(width/2, 160, width/2, 165);

    //smile
    noFill();
    strokeWeight(2);
    arc(250, 180, 30, 15, 0, PI);

    //dimple
    noStroke();
    rotate(radians(20));
    translate(46, -102);
    fill(245, 169, 157, 97);
    ellipse(275, 180, 8, 5);

    //bang
    fill(0);
    rotate(PI/4);
    translate(50, -140);
    ellipse(176, 79, 45, 100);

}

I sketched this out on my sketchbook first, and then draw them using Sublime. The most time consuming part is testing and moving the xy coordinates.