Author: ziningy1@andrew.cmu.edu

sketch

//Zining Ye 
//15104 lecture 1 recitation C
//ziningy1@andrew.cmu.edu 
//Project-05



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

function draw() {

    background(40,40,40,40);


    //set intervals for spacings 
    var vinterval=100
    var hinterval=150

    
    //start for loop for grids 
     for (var y = 0; y < 7; y++) {

        if(y%2){  //if statement determine the even number row 

            for (var x = 0; x < 7; x++){ 

               //set variable for triangle three vertexs' position
                var tx1=60+x*hinterval;
                var ty1=y*vinterval;
                var tx2=x*hinterval;
                var ty2=60+y*vinterval;
                var tx3=120+x*hinterval;
                var ty3=60+y*vinterval;

                stroke(30,50,230,60);
                strokeWeight(3);
                noFill();

                //draw the overlapping three triangles(mountains) with offsets 
                triangle(tx1+hinterval/2,ty1,tx2+hinterval/2,ty2,tx3-10+hinterval/2,ty3);
                stroke(170,170,30);  
                triangle(tx1+hinterval/2+30,ty1+10,tx2+20+hinterval/2,ty2+10,tx3+20+hinterval/2,ty3+10);
                stroke(20,200,50);
                triangle(tx1+40+hinterval/2,ty1-10,tx2+60+hinterval/2,ty2+5,tx3+hinterval/2,ty3+5);


                
                //set variables for the ellipse(sun）and draw the ellipse on the top left of the mountain 

                var ey = 30 + y * vinterval;
                var ex = 30 + x * hinterval; 
                fill(240,120,80,70);
                stroke(200,200,50);
                ellipse(ex+hinterval/2, ey-10, 30, 30);
            }

        } else {

            for (var x = 0; x < 7; x++){


                //for odd number rows, again set variable for triangle three vertexs' position

                var tx1=60+x*hinterval;
                var ty1=y*vinterval;
                var tx2=x*hinterval;
                var ty2=60+y*vinterval;
                var tx3=120+x*hinterval;
                var ty3=60+y*vinterval;

                stroke(30,50,230,60);
                strokeWeight(3);
                noFill();

                triangle(tx1,ty1,tx2,ty2,tx3-10,ty3);
                stroke(170,170,30);  
                triangle(tx1+30,ty1+10,tx2+20,ty2+10,tx3+20,ty3+10);
                stroke(20,200,50);
                triangle(tx1+40,ty1-10,tx2+60,ty2+5,tx3,ty3+5);
                

                //set variable for sun position and draw the sun
                var ey = 30 + y * vinterval;
                var ex = 30 + x * hinterval; 
                fill(240,50,80,60);
                noStroke();
                ellipse(ex,ey-10,30,30);

                // draw the ellipses(clouds like)
                fill(200,200,200,60);
                strokeWeight(2);
                ellipse(ex+20,ey,60,20);
                ellipse(ex+50,ey+5,50,10);


            }

            
        }




    }




}
  













   


    

In this project, i was inspired by the strong geometric shapes in some clothing patterns. I also think that using the neon primary color will be a interesting choice against a black background. Building on top of what I learned from the Assignment b, my foundation pattern is a mountains with sun scenery constructed by mostly outlines.

Kazuma Morino’s project Build draws my attention immediately while I was browsing through the portfolios of the Computer Graphic World(CGW) website. Then I looked the artist up to find out more information about him. So Kazuma Morino is a Japanese computer graphic artist, who has received many awards in international competitions including SIGGRAPH and Ars Electronica. In the project Build, exhibited in the SIGGRAPH 2003 Art Gallery, many of the built structures in our contemporary urban landscapes are concatenations of pre-fab parts and standardized dimensions. I was specifically intrigued by his way of constructing the board 3D perspective from single building blocks. There is a strong sense of order and rigidity from the highly geometric shapes. Then, I also found the videos of this project(blow), which is even more dazzling from still images. The way of those building cubes distribute and recompose is just very pleasing to look at. I can kind of imagine that this is accomplished by algorithm that resetting the coordinates of each or multiple building cubes in the 3D space every time the variations occur.

sketch

//Zining Ye 
//15104 lecture 1 recitation C
//ziningy1@andrew.cmu.edu 
//Project-04

var x=100;
var xstep=3; 

var y=1;
var ystep=3;

function setup() {
    createCanvas(400, 300);
    strokeWeight(1);
}

function draw() {
    background(0);
    angleMode(DEGREES);
    
    //the red twisted string curve 
    stroke(250,200,200);
    for (var i = 0; i < 400; i += 2) {
      
      line(3*i, height-2*i-y, 2*i, 1.5*i+20+y);
     
    }
    
    //the right and left green string curve 
    stroke(200,250,200);
    for (var i = 0; i<200; i += 2){
    
    line(x, 2*i,3*i,height/2+2*i+x);

    line(400-x,2*i,400-3*i,height/2+2*i+x);
    }
    
    //blue rotational string curve
    stroke(200,200,250);
    for (var i = 0; i<300; i += 2){
    line(x+i,300*sin(i),width-x-20-i,100*sin(i))
      
      
    }

    //adding the xstep and ystep will make the string start moving  
    //the conditonal makes the repeat between left and right, 

    y += ystep;
    if(y>300){
    y = -y
    
    }

    x += xstep;
    if(x>600){
    x= -x;
    
    } 



}
  













   


    

It is pretty abstract for me to create a string art image in my mind before coding it. I started by randomly test some of the combination of line positions, then I started to understand more intuitively how i would like to construct my art. I find adding the xstep, ystep very effective in making the string art in motion, which also create some sort of visual illusion that is pleasing to look at.

Magenta is a project that lead by the Google Brain Team to explore how machines with computational abilities can generate music. Magenta encompasses two goals. It’s first a research project to advance the state-of-the art in music, video, image and text generation. So much has been done with machine learning to understand content—for example speech recognition and translation. Different with other artists utilize computation to generate music, songs and musics of Magenta was solely generated by computer intelligence with machine learning models. The first creation song from Magenta is a simple melody that primed with four notes. The Magenta algorithm is given four notes (C,C,G,G) to begin with, and it come up with the original melody. I personally find it very impressive that how artificial intelligence with deep learning models can already accomplished some simply content generation and creativity, which is a stark contrast to the stereotypical perspective that machine will only be capable of non-creative/systematic tasks.

There is some demo from Magenta:

Silk Pavillion 

MIT Mediated Matter Group’s project Silk Pavilion immediately attracted my attention as I am browsing through their project page. I am surprised by how computer algorithm can generated such organic form. The Silk Pavilion is done by Prof. Fiorenzo Omenetto (TUFTS University) and Dr. James Weaver (WYSS Institute, Harvard University).  Inspired by the silkworm’s ability to generate a 3D cocoon out of a single multi-property silk thread, the pavilion’s overall geometry was created using an algorithm that assigns a single continuous thread across patches, providing various degrees of density. Overall density variation was informed by deploying the silkworm as a biological “printer” in the creation of a secondary structure. Positioned at the bottom rim of the scaffold, 6,500 silkworms spun flat, non-woven silk patches as they locally reinforced the gaps across the silk fibers.

I really enjoyed this project/installation as how they explore the  relationship between digital and biological fabrication. The method of deploying the actual silk worms as biological “printer” is very impressive to me, and this also shows that the blind instinct of silkworms is sometimes revealed as almost machine-like.

Inspired by how planets in solar system orbit around the sun, I made the visualization base on orbiting and pulsing movement. The aspects of image elements that the mouse movement controls include: background color, planet color, halo size(sun), the self-orbiting speed(moon), the stroke weight of the connecting line. I utilized a lot of sin() and cos() in this project to make the change more dynamic instead of one way. It is also my first time experimenting with the time elements in programing to create graphics.

ziningy1 – project 03

//Zining Ye 
//15104 lecture 1 recitation C
//ziningy1@andrew.cmu.edu 
//Project-03   

var sunx = 300
var suny = 240
var sunw = 130
var sunh = 130
var t = 1; //time





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

    
} 



function draw() { 
   

    angleMode(DEGREES); 

    background(32,50,74+(mouseX-mouseY)/13);
 
    noStroke();

    //multiple pulsing halo 

    fill(50+mouseY,100+mouseX,0,30);

    ellipse(sunx,suny,sunw+50*cos(-mouseX)+50,sunh+50*cos(-mouseX)+50); //halo changes size and color with the mouse moverment 

    fill(100+mouseX,mouseX/2,30,40);

    ellipse(sunx,suny,sunw+20*sin(mouseY)+40,sunh+20*sin(mouseY)+40); 

    fill(150+mouseY,mouseY,30,70);

    ellipse(sunx,suny,sunw+20*cos(mouseX)+10,sunh+20*cos(mouseX)+20); 


    

   
    
  

    //mercury, closest ball to the sun

    var merx = 100*cos(mouseX)+sunx 
    var mery = 100*sin(mouseX)+suny // the x, y coordinates of the first circle will move in a circle with the mouse movement, same for other orbiting circle


    fill(60+mouseX/2);

    stroke(210);
    strokeWeight(1+7*sin(mouseX)); //stroke line of the first orbiting ball changes with the mouse 
    line(merx,mery,sunx,suny);

    strokeWeight(2);
    ellipse(merx, mery, 20, 20);



    //venice 

    var venx = 140*cos(0.5*mouseX)+sunx //same with the first ball 
    var veny = 140*sin(0.5*mouseX)+suny

    fill(150+mouseX,mouseX/4,20);

    stroke(180);
    strokeWeight(1+5*sin(-mouseY));
    line(venx,veny,sunx,suny);

    strokeWeight(1+10*sin(-mouseY))

    ellipse(venx, veny, 30, 30);



    // earth

    fill(40,40+mouseY,100+mouseX);


    var earthX = 190*cos(-mouseX)+sunx;
    var earthY = 210*sin(-mouseX)+suny;


    stroke(200);
    strokeWeight(1+5*cos(-mouseX));
    line(earthX,earthY,sunx,suny);

    ellipse(earthX ,earthY, 50, 50);

    
    //the sun 

    fill(100+mouseX/3,mouseY/2,20);

    ellipse(sunx,suny,sunw,sunh);

  

    //self orbiting moon 
   

    t = t+(mouseY+mouseX)/80; // change the orbiting speed with the mouse movement 

    stroke(150)
    strokeWeight(1+3*sin(2*mouseX));
    noFill();
    ellipse(earthX,earthY,100,100)

    fill(100+mouseX/2,80+mouseX/4,40);




    ellipse(50*cos(t)+earthX ,50*sin(t)+earthY, 15, 15);



}




  













   


    

ziningy1-variable face

 
//Zining Ye 
//15104 lecture 1 recitation C
//ziningy1@andrew.cmu.edu 
//Project-02 variable face 


//variables 

//face 
var faceWidth=90;
var fX=185
var fY=190

//mouth
var mWidth=120
var mHeight=40 

//head 
    var aX=220 
    var aY=190
    var bX=320
    var bY=180
    var cX=350
    var cY=100
    var dX=230
    var dY=60
    var eX=170
    var eY=120
    var gX=180
    var gY=190

     //head 

    var aX=220 
    var aY=190
    var bX=320
    var bY=180
    var cX=350
    var cY=100
    var dX=230
    var dY=60
    var eX=170
    var eY=120
    var gX=180
    var gY=190

    //eye
    var eyeSize=32;
    var eyeX=197;
    var eyeY=135;

    //nose 
    var Nax=180
    var Nay=160
    var Nbx=173
    var Nby=193
    var Ncx=192
    var Ncy=200


function setup() {
    createCanvas(500, 350);
}
 
function draw() {
    background(50);

     //face
    noStroke();
    fill(120);
    
   
    rect(fX,fY,faceWidth,faceWidth-25,10);

    fill(50);
    noStroke();

    triangle(fX+faceWidth,fY+30,fX+faceWidth,fY+faceWidth-25,fX+30,fY+faceWidth-25,50);


    //mouth
    

    noStroke
    fill(30)
    arc(fX,fY+22,mWidth,mHeight,0, HALF_PI);

   
    //head 
    noStroke();
    fill(175);

    beginShape();
    curveVertex(0, 0);
    
    curveVertex(aX, aY);
    curveVertex(bX,bY)
    curveVertex(cX, cY);
    curveVertex(dX, dY);
    curveVertex(eX, eY);
    curveVertex(gX, gY);
    
    
    curveVertex(0, 0);
    endShape();


     //eye
    noStroke; 
    fill(120)
    
    ellipse(eyeX,eyeY,eyeSize,eyeSize+10);

    fill(220)

    ellipse(random(-4,4)+eyeX,random(-6,6)+eyeY+5,eyeSize-16,eyeSize-15); 

   

    //nose 
    
    noStroke;
    fill(250);
    triangle(Nax,Nay,Nbx,Nby+random(-10,10),Ncx,Ncy);




    }



function mousePressed() {

    //head

    aX=random(190,240);
    aY=random(180,210);

    bX=random(280,360);
    bY=random(160,200);
    
    cX=random(320,380);
    cY=random(50,120);

    dX=random(210,250);
    dY=random(40,80);
    eX=random(150,210);
    eY=random(110,140);
    gX=random(150,190);
    gY=random(170,200);

    //face

    faceWidth=random(80,110);
    fX=random(160,200);
    fY=random(180,220);

    //mouth 
    mHeight=random(10,80);
    mWidth=random(40,160);

    //eye
    eyeSize=random(16,60);
    eyeX=random(189,207);
    eyeY=random(125,145);

    //nose 

    Nax=random(175,185);
    Nay=random(150,170);
    Nbx=random(45,173);
    Nby=random(153,213);
    Ncx=random(187,197);
    Ncy=random(190,210);







}

When I first think of the assignment making the variable face, I had this idea of making this funky skull that can deform through clicking. The function itself is not difficult to learn, yet how to set the variables correctly took me some time to get used to. I also focused on how I would like the skull head to deform, such as the I designed the nose to transform longer and shorter instead of up and down. I also found the method of using “random’ to make the shaking shapes is pretty effective. The shaking eyes make the skull face funnier and less static.

Supercodex – Ryoji Ikeda

Japan’s leading electronic composer and visual artist Ryoji Ikeda has adopted a way to produce music using raw datas and mathematic models. Ikeda’s music is concerned primarily with sound in a variety of “raw” states, such as sine tones and noise, often using frequencies at the edges of the range of human hearing.  The Supercodex is live exhibition/performance by Ryoji Ikeda, which combines the auditory experience of his music with visual graphics that goes along with the music beats. I attend the Supercodex live performance last year in downtown Pittsburgh. The whole experience is 45 minutes, yet to me it does not seems to be intolerably long as I stand in the live room, listening to this “weird” highly electronic sound. However, it sounds less like music pieces that is fluent and harmonic, instead it was like some different frequency of noises composed meticulously together by the artist. The strong beat patterns and the fast changing black and white graphics brought me to a weird sensation state, where I become synchronize with the music and stop thinking about anything else. I am not sure whats the algorithm that Ikeda used to compose his music. I admired the aspect that Ikeda was able to integrate the mathematic precision and aesthetics into the world of music, and together with computed visuals he creates a incredible sensational experience for the viewers.

ziningy1_protrait

//Ethan Ye 
//ziningy1@andrew.cmu.edu 
//Project Self-Protrait 

function setup() {
    createCanvas(500,530);
    background(185,195,200);
    


    
} 

function draw() {  
     

    //shouder 
    noStroke();
    fill(110,130,150);
    ellipse(400,600,360,380);

    //neck 
    fill(230,210,177);
    rect(350,340,111,100);

    fill(110,130,150);
    triangle(460,430,330,470,460,480);
    
    fill(230)
    
    fill(90,112,130);
    ellipse(405.5,443,112,62);

    fill(230,210,177);
    ellipse(405.5,433,112,62);
    
    fill(220,200,167);
    ellipse(405.5,375,112,62);

    ellipse(390,380,112,62);

   




    //face 
    noStroke();
    fill(234,218,194);
    arc(353,267,330,270,PI+2*QUARTER_PI,HALF_PI+0.1,CHORD);
    fill(234,220,196);
    ellipse(340,280,140,245);

  
   


    //ellipse(500,270,270,300);


    //Hair
    noStroke();
    fill(50);
    triangle(220,230,300,130,360,170);
    fill(60);
    triangle(250,130,490,90,360,170);
    fill(30);
    triangle(340,80,500,110,400,135);
    fill(70);
    triangle(360,140,500,110,500,200);

    //eyebrow 
    fill(50);
    quad(313,227,360,210,370,220,313,237);
    triangle(360,210,390,215,370,220);

    //eye 
    fill(200,170,150);
    ellipse(345,258,49,28);
    
    fill(240);
    ellipse(342,255,50,27);
    fill(0);
    ellipse(329,257,13,20);
    fill(230);
    ellipse(326,252,4,3);

    //nose
    smooth();
    fill(234,220,196);
    triangle(272,256,240,310,280,310);

    //mouth 
    //fill(200,70,90);
    //arc(283,350,70,20,0,HALF_PI-0.2,PIE)

    fill(243,143,101);
    ellipse(300,355,40,25)

    fill(170,60,80);
    ellipse(291,350,50,25);

    fill(185,195,200);
    ellipse(275,350,50,25);

    //ear 

    fill(230,205,175);
    arc(440,270,100,70,5.4,1.4,CHORD);

    fill(234,218,194);
    arc(410,270,100,70,5.4,1.4,CHORD);

    //intials 
    scale(0.72);
    
    stroke(90,112,130);
    strokeWeight(3);
    line(90+60,220+110,90+60,260+110);
    line(90+60,220+110,115+60,220+110);
    line(90+60,240+110,110+60,240+110); 
    line(90+60,260+110,115+60,260+110);

    rect(130+60,260+110,2,2);
    line(145+60,220+110,160+60,240+110);
    line(160+60,240+110,175+60,220+110);
    line(160+60,240+110,160+60,260+110);


















   



   
















}

For this project, I intended to create a interesting facial expression with a simplistic style, which i decided to work with profile. I first worked on actual paper to sketch out some basic compositions, then moved to code， starting with the major geometric parts to detail adjustments. For colors, I also started with the gray scale, which is faster to begin with and provide a clear sense of hierarchy. And it works well for me to adjust all the colors together once the basic composition is laid out.