Author: Jen

Project 05

Inspired by the “Evil Eye”, project 5 illustrates a patterned wallpaper with celestial elements and different colored eyes. I enjoyed designing the pattern 🙂

sketch
//Jenny Wang
//Section B
//jiayiw3@andrew.cmu.edu
//Project-05

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

function draw() {
    background("lightyellow");

    //eye1 nested loop
    for(var x = 100; x < width; x+=200){
        for(var y = 75; y < height; y += 150){
        eye1(x,y);
        }
    }

    //eye2 nested loop
    for(var x = -200; x < width+200; x+=200){
        for(var y = -147; y < height+200; y += 149){
        eye2(x,y);
        }
    }

    //star nested loop
    for(var x = -100; x < width+180; x+=200){
        for(var y = -150; y < height+140; y += 150){
        fill(4,158,177);
        star1(x,y);
        }
    }

    //moon nested loop
    for(var x = -200; x < width+200; x+=200){
        for(var y = 75; y < height; y += 150){
        moon(x,y);
        }
    }




}

function eye1(x,y){
    //outside shape
    fill("white");
    stroke(1,35,133);
    strokeWeight(3);
    beginShape();
    vertex(x-45,y);
    bezierVertex(x-5,y-30,x+5,y-30,x+45,y);
    bezierVertex(x+5,y+30,x-5,y+30,x-45,y)
    endShape();

    //innershape
    fill(255,234,172);//yellow
    noStroke();
    beginShape();
    vertex(x-35,y);
    bezierVertex(x,y-20,x,y-20,x+35,y);
    bezierVertex(x,y+20,x,y+20,x-35,y)
    endShape();

    //iris outer
    noStroke();
    fill(4,158,177);
    ellipse(x,y,43,43);

    //array lines
    stroke(255,234,172);
    strokeWeight(2);
    line(x,y+17,x,y-17);
    line(x+17,y,x-17,y);
    line(x-14,y-14,x+14,y+14);
    line(x+14,y-14,x-14,y+14);

    //inner iris
    noStroke();
    fill(1,35,133);
    ellipse(x,y,25,25);
    fill("white");
    ellipse(x,y,5,5);
}

function eye2(x,y){
    //outside shape
    fill("white");
    stroke(4,158,177);
    strokeWeight(2);
    beginShape();
    vertex(x-45,y);
    bezierVertex(x-5,y-30,x+5,y-30,x+45,y);
    bezierVertex(x+5,y+30,x-5,y+30,x-45,y)
    endShape();

    //innershape
    fill(4,158,177);//lightblue
    noStroke();
    beginShape();
    vertex(x-35,y);
    bezierVertex(x,y-20,x,y-20,x+35,y);
    bezierVertex(x,y+20,x,y+20,x-35,y)
    endShape();

    //iris outer
    noStroke();
    fill(255,234,172);
    ellipse(x,y,43,43);

    //array lines
    stroke(4,158,177);
    strokeWeight(2);
    line(x,y+17,x,y-17);
    line(x+17,y,x-17,y);
    line(x-14,y-14,x+14,y+14);
    line(x+14,y-14,x-14,y+14);

    //inner iris
    noStroke();
    fill(1,35,133);
    ellipse(x,y,25,25);
    fill("white");
    ellipse(x,y,5,5);
}


function star1(x,y){
noStroke();
beginShape();
vertex(x-3, y+2);
vertex(x, y+20);
vertex(x+3, y+2);
vertex(x+12, y);
vertex(x+3, y-2);
vertex(x, y-20);
vertex(x-3, y-2);
vertex(x-12, y);
endShape();
}

function moon(x,y){
    fill(239,172,59);
    noStroke();
    beginShape();
    vertex(x-15,y-5);
    bezierVertex(x-5,y,x+5,y,x+15,y-5);
    bezierVertex(x+5,y+10,x-5,y+10,x-15,y-5)
    endShape();

}

Project 04 – String Art

This project consists of abstract string art made with multiple stacking of straight lines, creating an illusion of circles that look like octagons. The most challenging part of this project is organizing the direction the lines are going.

sketch
//Jenny Wang
//Section B

var dx1;
var dy1;
var dx2;
var dy2;
var dx3;
var dy3;
var dx4;
var dy4;
var dx5;
var dy5;
var dx6;
var dy6;
var dx7;
var dy7;
var dx8;
var dy8;
var numLines = 15


function setup() {

    createCanvas(400, 300);
    background("black");

    var cx = width/2 //center x
    var cy = height/2 //center y
    //draw ellipse
    noStroke();
    fill(110);
    ellipse(cx,cy,110,110);
    fill(180);
    ellipse(cx,cy,80,80);
    fill(230);
    ellipse(cx,cy,50,50);

    stroke("blue")
    line(cx,cy,width/2,0);//line 1 
    line(cx,cy, width, height/2);//line2
    line(cx,cy,width/2,height);//line 3
    line(cx,cy, 0,height/2);//line4

    //Q1
    dx1 = (cx-cx)/numLines;
    dy1 = (cy-0)/numLines;
    dx2 = (width-cx)/numLines;
    dy2 = (cy-cy)/numLines;

    //Q2
    dx3 = (cx-cx)/numLines;
    dy3 = (cy-height)/numLines;
    dx4 = (width-cx)/numLines;
    dy4 = (cy-cy)/numLines;

    //Q3
    dx5 = (cx-cx)/numLines;
    dy5 = (cy-height)/numLines;
    dx6 = (0-cx)/numLines;
    dy6 = (cy-cy)/numLines;

    //Q4
    dx7 = (cx-cx)/numLines;
    dy7 = (cy-0)/numLines;
    dx8 = (0-cy)/numLines;
    dy8 = (cy-cy)/numLines;
}

function draw() {
    //Q1.1
    var x1 = width/2;
    var y1 = 0;
    var x2 = width/2;
    var y2 = height/2;
    for (var i = 0; i <= numLines; i += 1) {
        stroke("lightblue")
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }

    //Q2.1
    var x3 = width/2;
    var y3 = height;
    var x4 = width/2;
    var y4 = height/2;
    for (var i = 0; i <= numLines; i += 1) {
        stroke("pink")
        line(x3, y3, x4, y4);
        x3 += dx3;
        y3 += dy3;
        x4 += dx4;
        y4 += dy4;
    }
    //Q2.2
    var x3 = width;
    var y3 = height/2;
    var x4 = width/2;
    var y4 = height/2;
    for (var i = 0; i <= numLines; i += 1) {
        stroke("white")
        line(x3, y3, x4, y4);
        x3 += dx3;
        y3 += dy3;
        x4 += dx4;
        y4 += dy4;
    }
    //Q2.3
    var x3 = 0;
    var y3 = height/2;
    var x4 = width/2;
    var y4 = height/2;
    for (var i = 0; i <= numLines; i += 1) {
        stroke("grey")
        line(x3, y3, x4, y4);
        x3 += dx3;
        y3 += dy3;
        x4 += dx4;
        y4 += dy4;
    }

    //Q3.1
    var x5 = width/2;
    var y5 = height;
    var x6 = width/2;
    var y6 = height/2;
    for (var i = 0; i <= numLines; i += 1) {
        stroke("lightgreen")
        line(x5, y5, x6, y6);
        x5 += dx5;
        y5 += dy5;
        x6 += dx6;
        y6 += dy6;
    }
    //Q3.2
    var x5 = 0;
    var y5 = height/2;
    var x6 = width/2;
    var y6 = height/2;
    for (var i = 0; i <= numLines; i += 1) {
        stroke("white")
        line(x5, y5, x6, y6);
        x5 += dx5;
        y5 += dy5;
        x6 += dx6;
        y6 += dy6;
    }
    //Q3.3
    var x5 = width;
    var y5 = height/2;
    var x6 = width/2;
    var y6 = height/2;
    for (var i = 0; i <= numLines; i += 1) {
        stroke("grey")
        line(x5, y5, x6, y6);
        x5 += dx5;
        y5 += dy5;
        x6 += dx6;
        y6 += dy6;
    }

    //Q4.1
    var x7 = width/2;
    var y7 = 0;
    var x8 = width/2;
    var y8 = height/2;
    for (var i = 0; i <= numLines; i += 1) {
        stroke(224,199,166)
        line(x7, y7, x8, y8);
        x7 += dx7;
        y7 += dy7;
        x8 += dx8;
        y8 += dy8;
    }
 
    noLoop();
}

Looking Outwards-04

The most recent iteration, ‘FORMS – String Quartet,’ invites musicians on stage to interpret a series of graphic scores, which build up the visual scenery, giving the audience the experience of anticipating the “music to come.” Each instrument on the score is identified by a color code, with white representing the random engine itself. This performance was recorded in collaboration with the Brossa String Quartet at Barcelona’s CosmoCaixa Science Museum in April 2021, as part of the art+science NEO cycle curated by Irma Vilà and Pau Alsina. According to their website, ​​the generative graphics were written in Processing, while the image sonification was done in Max/MSP. The part that I was most intrigued by was how music/sound could be visualized in a sense. And it’s not just any visuals but interactive visuals with cool light effects. That could be a way for people with hearing impairments to enjoy music. I think this style of performance has excellent potential.

Link:https://www.creativeapplications.net/maxmsp/forms-string-quartet/

Forms – String Quartet – Irma Vilà and Pau Alsina

Project 03: Dynamic Drawing

This is my project for dynamic drawing. The most difficult part for me is understanding the relationship between the size of the hearts and the distance between the hearts and my mouse.

sketch 

//Jenny Wang
//Section B

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

var s = 30 //space in between
var x = 0
var y = 0
var heart
var angle = 0
function draw() {
    background("lightblue");

    //set color variation
    var R = (dist(x,y,mouseX,mouseY)/100)*30;
    var G = (dist(x,y,mouseX,mouseY)/100)*20;
    var B = (dist(x,y,mouseX,mouseY)/100)*30;

    
     
    //draw hearts with for loops
    var maxD = 50;
    var maxS = 3;

    for (x = 0; x < width; x += s) {
      for (y = 0; y < height; y += s) {
      fill (R,G,B);
      var size = (dist(x,y,mouseX,mouseY)/maxD)*maxS;
      //set size variation
      heart(x+s/2, y+s/2, size);
      }
    }

    //draw heart
    var r = mouseX/2
    
    push()//square1
    fill("lightyellow");
    translate(width/2,height/2);
    rotate(radians(angle)+10);
    ellipse(mouseX/2,mouseY/2,r*2+mouseX/2);
    pop();
    angle += 2;

    push()//square2
    fill("lightgreen");
    translate(width/2,height/2);
    rotate(radians(angle)+20);
    ellipse(mouseX/2,mouseY/2,r*2+mouseX/2);
    pop();
    angle += 2;
    

    push();
    fill("pink");//circle 3
    translate(width/2,height/2);
    rotate(radians(angle)+30);
    ellipse(mouseX/2,mouseY/2,r*2+mouseX/2);
    pop()
    angle += 2;


function heart (x,y,size){
    // fill(R,G,B);
    beginShape();
    vertex(x, y);
    bezierVertex(x - size / 2, y - size / 2, x - size, y + size / 3, x, y + size);
    bezierVertex(x + size, y + size / 3, x + size / 2, y - size / 2, x, y);
    endShape(CLOSE);
}
//draw a heart


}

Looking Outwards 03: Computational Fabrication

The project that’s inspirational to me is a project done by a CMU Architecture student Madeline Gannon. Her project Reverb is a context-aware 3D modeling environment that allows you to create ready-to-print wearables that are based on your own body. Reverb employs computer vision, digital design, and digital fabrication techniques to translate your real-world hand gestures into intricate geometry that can be printed and worn on the body immediately. It employs a chronomorphologic modeling technique to generate complex forms quickly around a 3D scan. I picked this project because I’m interested in fashion and accessories and it’s interesting to see computational algorithms being applied to these fields in ways that we never expected. The modeling interface uses a three-phase workflow — 3D scanning, 3D modeling, and 3D printing — to enable a designer to craft intricate digital geometries around pre-existing physical contexts. Chronomorphology is a composite recording of an object’s movement. It helps record a full three-dimensional model of the object. The creator’s artistic sensibilities manifest in the final form by aggregating the animated 3D model to create complex geometries around the 3D scanned context.

Project Name: Reverb
Creator: Madeline Gannon
Year of Creation: 2016

Collar Studies & Wrist Studies
Source of Image: http://www.madlab.cc/reverberating-across-the-divide/

Project 02: Variable Faces

This is my project 02 “Variable Faces”. The most challenging part of this project is organizing the logic of my code. Once the logic is sorted out it was actually not too complicated. I struggled a bit with certain shapes.

sketch
/* Jenny Wang
   Section B */

var eyes = 3;
var features = 3;
var mouth = 3;
var hair = 3;

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

function draw() {
    background(250,160,150);
    noStroke()
    fill(230,89,132);
    ellipse()
    noStroke();
    fill(226,190,134);
    ellipse(234,258,199,250);//face
    strokeWeight(2); //nose
    stroke(177,123,60);
    line(231,272,220,300);
    strokeWeight(2);
    stroke(177,123,60);
    line(220,300,236,302);


    if(eyes<=1){ //round eyes
        noStroke();
        fill(255,255,255);
        circle(182,252,46);
        noStroke();
        fill(162,196,231);
        circle(182,252,29);
        noStroke();
        fill(43,91,137);
        circle(182,252,17);
        //left eye
        noStroke();
        fill(255,255,255);
        circle(292,252,46);
        noStroke();
        fill(162,196,231);
        circle(292,252,29);
        noStroke();
        fill(43,91,137);
        circle(292,252,17);
        //right eye
    }
    else if(eyes<=2){ //squint eyes
        strokeWeight(3);
        stroke(65,50,20)
        line(170,253,197,265);
        line(170,280,197,265);//left eye
        line(270,265,297,254);
        line(297,280,270,265);//right eye
    }
    else if (eyes<=3){ //half eyes
        noStroke();
        fill(255,255,255);
        arc(182,252,46,46,2.6,0.5,open)
        noStroke();
        fill(164,209,125);
        circle(182,252,29);
        noStroke();
        fill(177,123,57);
        circle(182,252,17);
        //left eye
        noStroke();
        fill(255,255,255);
        arc(292,252,46,46,2.6,0.5,open)
        noStroke();
        fill(164,209,125);
        circle(292,252,29);
        noStroke();
        fill(177,123,57);
        circle(292,252,17);
    }

    if(features<=1){ //mole
        strokeWeight(3);
        fill(177,123,57)
        point(186,321);
    }
    else if(features<=2){ //freckles
        strokeWeight(3);
        fill(177,123,57);
        point(162,301);
        strokeWeight(3);
        fill(177,123,57);
        point(177,309);
        strokeWeight(3);
        fill(177,123,57);
        point(194,303);
        strokeWeight(3);
        fill(177,123,57);
        point(265,306);
        strokeWeight(3);
        fill(177,123,57);
        point(283,299);
        strokeWeight(3);
        fill(177,123,57);
        point(298,308);
    }
    else if(features<=3){ //blush
        noStroke();
        fill(239,171,199);
        ellipse(164,306,28,16);
        noStroke();
        fill(239,171,199);
        ellipse(305,306,28,16);
    }

    if(mouth<=1){ //happy laugh
        noStroke();
        fill(246,166,193);
        arc(237,324,80,70,0,0.6 + 2.6, OPEN);
    }
    else if(mouth<=2){//sad mouth
        strokeWeight(4);
        stroke(246,160,193);
        line(214,350,235,343);
        strokeWeight(4);
        stroke(246,160,193);
        line(256,350,235,343);
    }
    else if(mouth<=3){ //mouth with teeth
        noStroke();
        fill(237,10,124);
        arc(237,324,80,70,0,0.6 + 2.6, OPEN);
        noStroke();
        fill(255,255,255);
        rect(227,323,21,11);
    }

    if(hair<=1){ //red hair
        noStroke();
        fill(199,102,29);
        arc(233,179,160,93,2.6,0.5, OPEN);
        noStroke();
        fill(199,102,29);
        circle(347,197,95);
        noStroke();
        fill(199,102,29);
        circle(116,197,95);
    }
    else if(hair<=2) { //blonde hair
        noStroke();
        fill(231,209,100);
        circle(234,124,98);
        noStroke();
        fill(231,209,100);
        circle(305,148,84);
        noStroke();
        fill(231,209,100);
        circle(342,203,58);
        noStroke();
        fill(231,209,100);
        circle(347,244,45);
        noStroke();
        fill(231,209,100);
        circle(160,148,84);
        noStroke();
        fill(231,209,100);
        circle(127,203,58);
        noStroke();
        fill(231,209,100);
        circle(121,244,45);
    }
    else if(hair<=3){ //brown hair
        noStroke();
        fill(177,123,57);
        arc(233,180,232,126,2.6,0.5, OPEN);
        noStroke();
        fill(177,123,57);
        rect(118,180,38,205)
        noStroke();
        fill(177,123,57);
        rect(311,180,38,205);
    }
    
    noStroke(); //neck
    fill(226,190,134);
    rect(210,378,48,63);
    noStroke(); //body
    fill(226,190,134);
    rect(120,415,231,225,65,65,0,0);
    noStroke(); //dress
    fill(184,191,225);
    quad(155,527,202,415,265,415,320,527);
    noStroke(); 
    fill(226,190,134);
    triangle(202,415,265,415,233,475);
    noStroke(); 
    fill(184,191,225);
    rect(155,527,164,113);
}

function mousePressed() {
    eyes = random (0,3);
    features = random (0,3);
    mouth = random (0,3);
    hair = random (0,3);
}

Looking Outwards 02: Generative Art

The project “The Orbitals (Variation B)” by Jared Tarbell is about a collection of particles operating on one simple rule: choose another particle in the system and orbit it with a fixed radius at a constant velocity. In this variation, a single root particle is instantiated in the center of the stage. All other particles introduced to the system fall into orbit at some level. I admire how the creator manipulates the work by finely crafting the semantics of each program. The results look random but organized, messy but beautiful. Tarbell creates his images by programming Java applets or Flash ActionScripts to construct visual images based on algorithms. Java applets are used to provide interactive features to web applications and can be executed by browsers for many platforms. In an interview with Jason Bailey, Tarbell explained his perspective on the relationship between art and math, “you can break the world down into these very simple rules that interact on orders of magnitude beyond what we’re capable of imagining.” Tarbell is a programmer and an artist, and his beautiful works seem to have minds of their own.

The Orbitals ( Variation B) August 2004 J.Tarbell

Project 1: Self Portrait

This is my self portrait. The most challenging part of this project is locating the shapes and lines on my canvas. The most difficult shape to code was the arc.

sketch
function setup() {
    createCanvas(500,300);
    background(120,120,150);
    text("Hi. I'm Jen :)", 10, 15);
}

function draw() {
    strokeWeight(0)
    fill(225,194,159); //1-beige
    ellipse(267,140,141,197);
    strokeWeight(0)
    fill(56,47,45); //2-brown
    ellipse(258,49,127,59);
    strokeWeight(0)
    fill(56,47,45); //3-brown
    ellipse(196,120,74,154)
    strokeWeight(0)
    fill(225,194,159); //5-beige
    rect(220,200,42,110);
    strokeWeight(0)
    fill(230,130,140); //6-shirt
    quad(201,252,201,300,306,300,290,252);
    strokeWeight(0)
    fill(56,47,45); //4-brown
    ellipse(196,241,43,135);
    strokeWeight(0)
    fill(230,144,151); //8-mouth
    ellipse(304,198,31,8);
    strokeWeight(0)
    fill(191,171,125); //7-nose
    triangle(301,136,307,164,295,164);
    strokeWeight(0)
    fill(255,255,255); //9-eye white
    arc(264,113,51,55,2.6,0.5,OPEN);
    strokeWeight(0)
    fill(0,0,0); //10-eyeball
    circle(275,113,35);
    strokeWeight(0)
    fill(255,255,255); //11-eye white
    arc(329,113,51,55,2.6,0.5,open);
    strokeWeight(0)
    fill(0,0,0); //12-eyeball
    circle(340,113,35);
    strokeWeight(0)
    fill(241,211,129); //13-hair tie
    ellipse(196,191,41,11);
    stroke(255,255,255); //highlight 1
    strokeWeight(5);
    point(330,110);
    stroke(255,255,255); //highlight 2
    strokeWeight(5);
    point(265,110);
    strokeWeight(2)
    fill(225,100,10); //13-hair tie middle
    square(192,186,11);
    stroke(255)
    strokeWeight(3)
    line(299,196,309,196)
    strokeWeight(1)
    stroke(100)
    line(301,136,307,164)
    strokeWeight(1)
    stroke(100)
    line(307,164,295,164)
}

My Inspiration

A project that inspired me a lot is Walt Disney Pictures and Pixar Animation Studio’s collaboration movie “Up”. Released in 2009, the movie took the team 5 years to create. Besides the touching plot line of the movie, I also admire the movie’s stunning animation, including the thousands of balloons, the character’s realistic and detailed looks, and the beautifully illustrated landscape views. To animate the movie, the studio uses their unique software “Presto”. It is developed and used in-house by Pixar Animation Studios in the animation of its features and short films. Presto is not available for sale and is only used by Pixar. According to the movie director Pete Docter, the movie’s animation style took inspiration from “Toy Story”. New programs were made to simulate the cloth and other textures. These new designs would bring animation to new levels in the future.

Up ( 2009 film) The Balloon House