Author: Jiayi

Looking Outward 5: 3D Computer Graphics

Author’s Name:Joan Madrid

Title of the Work:“The Kiss”

Year of Creation:2019

Link:https://vimeo.com/340175147

Il Bacio “The Kiss” by Joan Madrid is a 3D video that depicts the short story between a knight and a prince. The feature I admire about “The kiss” are the characters were intriguingly puppets and the clip was done by about 70 students from BigRock Institute of Magic Technologies. It’s really inspiring and encouraging to me how students can work together to build such high-quality 3D videos. The software used to create this project are: Mudbox, HTC Vive Proprietary System, Adobe After Effects, Adobe Premiere Pro, and Adobe Audition. Autodesk Arnold was used to render the clip, and the HTC Vive Proprietary System was used to generate 3D models. The creator’s artistic sensibilities manifest in the final form of 3D videos that convey sorrowness of two protagonists, who can only kiss each other by killing themself because puppets can’t kiss.

Video:

https://vimeo.com/340175147

Project-04: String Art-Pineapple

Although it’s a bit abstract, but it is a pineapple. Everything is made by “string”.

sketchDownload
/* Jiayi Chen
   jiayiche    Section A */
function setup() {
    createCanvas(300, 400);
    background('yellow');
}

var numLines = 50;
var dx1;
var dy1;
var dx2;
var dy2;

function draw() {
    // percentize width and height
    var w= width/100;
    var h= height/100;

    //body of pinapple
    //diagonals(*w,*h,*w,*h,*w,*h,*w,*h) general formula
    diagonals(0*w,0*h,0*w,100*h,0*w,100*h,100*w,100*h); //left outside
    diagonals(100*w,0*h,100*w,100*h,100*w,100*h,0*w,100*h); //right outside
    diagonals(0*w,100*h,0*w,30*h,0*w,30*h,100*w,30*h); //left inside
    diagonals(100*w,100*h,100*w,30*h,100*w,30*h,0*w,30*h); //right inside
     //smooth the vertexes of pinnaple
    diagonals(10*w,80*h,50*w,95*h,50*w,95*h,90*w,80*h); //bottom
    diagonals(10*w,50*h,50*w,35*h,50*w,35*h,90*w,50*h); //top
    diagonals(40*w,30*h,10*w,60*h,10*w,60*h,40*w,90*h); //left
    diagonals(60*w,30*h,90*w,60*h,90*w,60*h,60*w,90*h); //right
    //Green Hair
    push();
    stroke('green');
    strokeWeight(2);
    diagonals3(15*w,20*h,30*w,45*h,70*w,45*h,80*w,20*h);//sides
    diagonals3(30*w,45*h,50*w,15*h,70*w,45*h,50*w,15*h);//middle
    diagonals3(30*w,45*h,50*w,15*h,50*w,15*h,70*w,45*h);//upper middle 
    pop();
    //background
    diagonals3(0*w,0*h,0*w,30*h,100*w,0*h,100*w,30*h);
    //texture
    diagonals2(25*w,60*h,40*w,58*h,40*w,58*h,50*w,45*h);//left
    diagonals2(25*w,60*h,40*w,58*h,40*w,58*h,50*w,75*h);
    diagonals2(75*w,60*h,60*w,58*h,60*w,58*h,50*w,45*h);//right
    diagonals2(75*w,60*h,60*w,58*h,60*w,58*h,50*w,75*h);
    diagonals2(50*w,75*h,30*w,80*h,30*w,80*h,35*w,85*h);//bottom left
    diagonals2(50*w,75*h,70*w,80*h,70*w,80*h,65*w,85*h);//bottom right
    noLoop();

}


function diagonals(x1,y1,x2,y2,x3,y3,x4,y4){ //diagonal/straight lines between 2 lines
    line(x1,y1,x2,y2);
    line(x3,y3,x4,y4);
    dx1=(x2-x1)/numLines;
    dy1=(y2-y1)/numLines;
    dx3=(x3-x4)/numLines;
    dy3=(y3-y4)/numLines;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1,y1,x3,y3);
        x1 += dx1;
        y1 += dy1;
        x3 -= dx3;
        y3 -= dy3; 
    }
}

function diagonals2(x1,y1,x2,y2,x3,y3,x4,y4){ //less lines
    line(x1,y1,x2,y2);
    line(x3,y3,x4,y4);
    numLines=20;
    dx1=(x2-x1)/numLines;
    dy1=(y2-y1)/numLines;
    dx3=(x3-x4)/numLines;
    dy3=(y3-y4)/numLines;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1,y1,x3,y3);
        x1 += dx1;
        y1 += dy1;
        x3 -= dx3;
        y3 -= dy3; 
    }
}

function diagonals3(x1,y1,x2,y2,x3,y3,x4,y4){ //less lines second version
    line(x1,y1,x2,y2);
    line(x3,y3,x4,y4);
    numLines=30;
    dx1=(x2-x1)/numLines;
    dy1=(y2-y1)/numLines;
    dx3=(x3-x4)/numLines;
    dy3=(y3-y4)/numLines;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1,y1,x3,y3);
        x1 += dx1;
        y1 += dy1;
        x3 -= dx3;
        y3 -= dy3; 
    }
}

LookingOutwards-04 Sound Arts

Light & Sound Synthesis: In Conversation with Amay Kataria by Amay Kataria

The project Supersynthesis use creates an interaction between light and sounds. I admire how the project changes the patterns of the lights depending on the patterns of the sounds. I admired the changing light patterns, because it satisfied my imagination of how programming influences reality by creating lights that simultaneously change in pattern with sound waves. In this sense, these lights just visualized sound waves.

It’s complicated for me to understand how the programs behind this work, but I can summarize it in an abstract manner. The artwork was divided into 24 light sources that have 24 pitches, which will be triggered when different pitches are detected. The program Amay created can allow machines to detect each pitch and control the light sources.

The Amay Kataria’s artistic sensibilities manifest in the final form through visualization of the invisible sounds waves with lights. It was visually pleasant to watch these light changes in wave patterns in the dark according to the sound of the drums.

Link: Light & Sound Synthesis: In Conversation with Amay Kataria – CreativeApplications.Net

Video:

Project-03-Dynamic-Drawing

-The triangles rotate clockwise when mouse moving to the right, and counterclockwise when moving to the left

-The color become lighter when mouse moving to the bottom right, and darker when moving to the top left

-The triangle and change distance as mouse moving left, and it do the opposite when moving right.

– The smile faces shrink as mouse moves.

sketchDownload
/* Jiayi Chen
   jiayiche    Section A */
function setup() {
     createCanvas(600, 450);
     rectMode(CENTER);
}

function draw() {
    print('mouseX='+ mouseX +'mouseY'+mouseY)
    //change background
    backgroundchange();

    // smile face background
    for (var a=5;a<600;a=a+35){
        for (var b=0;b<450;b=b+35){
        push();
        translate(a,b);
        smileface();
        //change size
        var mx =constrain(mouseX,0,450)
        var my =constrain(mouseY,0,300)
            if(dist(mx,my,a,b)<= 150){ 
                d=30* dist(mx,my,a,b)/150;
            }
        pop();
        } 
    }
    //floating triangle and rectangle
    translate(constrain(mx,0,575),constrain(my,0,425));
    push();
    noStroke()
    cr=mx/450*255
    fill(cr,cr,cr,200)
    rect(0,0,50,50);
    var ang=mouseX/600*360
    //6 triangles
    push();
    scale(3*constrain(my,0,450)/450*3)
    push();
    triDist=100*constrain(mx,0,600)/600
    rotate(radians(ang));
    translate(triDist,0);
    triangle(0, 30, 30, 30, 15, 15);
    pop();
    push();
    rotate(radians(ang+60));
    translate(triDist,0);
    triangle(0, 30, 30, 30, 15, 15);
    pop();
    push();
    rotate(radians(ang+120));
    translate(triDist,0);
    triangle(0, 30, 30, 30, 15, 15);
    pop();
    push();
    rotate(radians(ang+180));
    translate(triDist,0);
    triangle(0, 30, 30, 30, 15, 15);
    pop();
    push();
    rotate(radians(ang+240));
    translate(triDist,0);
    triangle(0, 30, 30, 30, 15, 15);
    pop();
    push();
    rotate(radians(ang+300));
    translate(triDist,0);
    triangle(0, 30, 30, 30, 15, 15);
    pop();
    pop();
    pop();
}



var x=16
var y=16
var d=30



//single simle face
function smileface(){
    push();
    fill('yellow')
    //head
    ellipse(x,y,d); 
    //mouth
    arc(x, y+d*1/7, d/2, d/2, 0, PI); 
    //eye
    fill(0)
    ellipse(x+d*1/5,y-d*1/5,d/6);
    ellipse(x-d*1/5,y-d*1/5,d/6);
    pop();
}


   //change in background
function backgroundchange(){
    var r = mouseX/600*255
    var g = mouseX/600*255
    var b = mouseY/600*255
    background(r,g,b)
}

Looking Outward Blog #3 TREDDY 

TREDDY by F.A.T Lab

The project I admired most is the TREDDY, which is a free software to customize rubber stamps with any artistic ideas. The part TREDDY inspired me the most was its usefulness in daily life. Although other Parametric 3D Project might be artistically pleasant, but most of them have little to do with real life. Maybe in term of stimulations other Projects are useful too, but TREDDY is the most user friendly one that’s open to the public. We can use TREDDY to improve our quality of life by making our rubber stamps visually pleasant to us, and it’s also a great way to create toys for kids.

TEDDY allows us to 3D print through CAD files. In terms of the algorithms, I think that it puts a set of variables into the parametric equations to create shapes on the rubber stamps and the rubber stamps itself. The final form of creator’s artistic sensibilities was demonstrated through the drawing created by of rubber stamps when stained with ink and the rubber stamps itself.

The link to software (found on the blog, but it not working)

TREDDY by Free Art and Technology (F.A.T.) Lab, 2013-: https://fffff.at/wheels

Video: https://vimeo.com/golanlevin/treddy

Caption- The video explaining what TREDDY achieves by Golan Levin.

Project-02 Variable Faces

I was going to try with different expressions, but my if-else statement doesn’t seem to work for random(). However, I used mouseY instead for the crying effect.

sketchDownload
/* Jiayi Chen
   jiayiche    Section A */
function setup() {
    createCanvas(480, 640);
}

var width = 480;
var height = 640;
var x=width /100;
var y=height/100;
var faceWidth= 80*x;
var faceHeight= 80*y;
var r = 0;
var g = 0;
var b = 0;
var eyebrowshape=1;
var eyebrowy2= 27*y;
var eyebrowy1= 27*y;
var mouthSizeX = 20*x;
var mouthSizeY = 10*y;


function draw() {
    background(220);
    fill(255,229,204);
    ellipse(50*x, 50*y, faceWidth,  faceHeight); //head

    var leftEyex=50*x-faceWidth/4;                 //eyes
    var rightEyex=50*x+faceWidth/4;
    var leftEyey=50*y-faceHeight/8;
    var rightEyey=50*y-faceHeight/8;
    var eyeSizex=20*x;
    var eyeSizey=20*y;
    fill(255);
    ellipse(leftEyex, leftEyey, eyeSizex,eyeSizey);//Left eyes
    fill(r,g,b);
    ellipse(leftEyex, leftEyey, eyeSizex*2/3,eyeSizey*2/3);
    fill(255);
    ellipse(rightEyex,rightEyey,eyeSizex,eyeSizey);//Right eyes
    fill(r,g,b);
    ellipse(rightEyex,rightEyey,eyeSizex*2/3,eyeSizey*2/3);
    fill(r,g,b);                                     //hairs
    strokeWeight(0)
    rect(20*x,5*y,60*x,10*y);
    rect(20*x,15*y,10*x,7*y);
    rect(70*x,15*y,10*x,7*y);
    rect(30*x,15*y,10*x,5*y);
    rect(60*x,15*y,10*x,5*y);
    rect(40*x,15*y,15*x,2*y);
    rect(50*x,15*y,15*x,2*y);
    strokeWeight(10);                                  //eyebrow
    stroke(0);
    var z=5*x;
    var Leyebrowx1= 50*x-faceWidth/4-z ;
    var Reyebrowx1= 50*x+faceWidth/4-z;
    var Leyebrowx2= 50*x-faceWidth/4+10*x-z;
    var Reyebrowx2= 50*x+faceWidth/4+10*x-z;

    line(Leyebrowx1,eyebrowy1,Leyebrowx2,eyebrowy2); //left eyebrow
    line(Reyebrowx1,eyebrowy2,Reyebrowx2,eyebrowy1); //right eyebrow
    var mouthStroke = 2
    strokeWeight(mouthStroke);                       //mouthes
    fill(255,0,0);
    ellipse(50*x,70*y,mouthSizeX,mouthSizeY);     
    if(mouseY<=100*y/2) {        //tears
      fill(0,0,255)
      strokeWeight(0)
      rect(leftEyex,leftEyey+10*y,5*x,20*y)
      rect(rightEyex,rightEyey+10*y,5*x,20*y)
      rect(leftEyex-5*x,leftEyey+20*y,5*x,20*y)
      rect(rightEyex-5*x,rightEyey+20*y,5*x,20*y)
    }
    fill(204,102,0)
    ellipse(50*x,50*y,10*x,10*y);   

}


function mousePressed() {
    r = random(0,255);
    g = random(0,255);
    b = random(0,255);
    mouthSizeX =random(10*x,30*x);
    mouthSizeY =random(0*y,20*y);
    eyebrowy2= random (20*y,35*y)
    eyebrowy1= random (20*y,35*y)
}

Looking Outwards 02: Generative Art

    The project I admired the most about is the ” algorithmic modulations” by Manfred Mohr. It’s a projection of a rotating 12-D hypercube onto a 2-D surface with thin black lines in the center that changes upon the movement of the quadrilaterals to provide visual impact.

    I was first attracted because I thought the shapes of cubes looked like the shape of a human with different movements. As I watched the animated version, I was impressed by the beauty of images created by the randoms of rotating quadrilaterals. The randomness of the quadrilaterals was impressive not only for its excitement for unknown changes of the image, but also for a pattern due to the rotation of the 12-D hypercube that there are rules in the randomness.

    The work was generated by the algorithm with random transparency and random 3 colors for the quadrilaterals . The code was also created with blacks lines that extend to negative x-values with different thickness to create a visual effect of reflection of different black lines.

    The creator’s artistic sensibilities were demonstrated in the randomness that created by the rotation 12-D hypercube and the dynamicness of colors and transparency of the image.

Link: Manfred Mohr, algorithmic modulations, P2610, animation example, 2019 (emohr.com)

Project 1: My Self Portrait

My most challenging part of the post is my nose and the background, because I tried to draw curves.

jiayiheadDownload
function setup() {
    createCanvas(480, 650);
    background(250,248,242);
}

function draw() {
    stroke(0) //Background
    strokeWeight(2);
    fill(255);
    rect(0,410,31,109);
    stroke(0); 
    strokeWeight(2);
    fill(255);
    rect(0,420,20,93);
    line(62,26,480,18);
    line(61,26,40,404);
    line(0,0,61,26);
    line(0,233,48.5,233.5);
    line(0,245,48,246);
    fill(65,65,65);
    arc(240, 500, 480,68, 0, 0);
    stroke(0); //Background
    strokeWeight(0);      //shirts
    fill(65,65,65);
    rect(0,500,490,200);
    fill(250);
    quad(240, 630, 275, 630, 275, 650, 240, 650);
    fill(250);
    quad(240-50, 630+10, 275-50, 630, 275-50, 650, 240-50, 650);
    fill(250);
    quad(240+50, 630, 275+50, 630+10, 275+50, 650, 240+50, 650);
    strokeWeight(10)
    fill(65,65,65)
    ellipse(190-10, 500-40, 320, 200);
    strokeWeight(10)
    fill(65,65,65)
    ellipse(190, 500, 320, 200);
    strokeWeight(5)
    fill(65,65,65)
    ellipse(190, 500, 256, 160);
    strokeWeight(2)
    x=-40
    y=75
    triangle(190+x, 500+y,210+x,519+y, 185+x, 520+y);
    triangle(190+x, 505+y,205+x,514+y, 190+x, 515+y);
    x=+50 
    y=70
    triangle(190+x, 500+y,210+x,519+y, 185+x, 520+y);
    triangle(190+x, 505+y,205+x,514+y, 190+x, 515+y); //Shirt Ends
    stroke(0); 
    strokeWeight(5);      
    fill(255,204,153);
    rect(150,480,110,60);//head
    fill(255,204,153)
    ellipse(80,230,30,50)
    ellipse(370,230,30,50)
    fill(255,204,153);
    ellipse(225,280,300,480)
    fill(0)
    triangle(100, 140, 100, 50,180, 50);
    triangle(350, 140,350,50,270,50);
    rect(150,35,150,50)
    triangle(125, 185, 200, 190,150, 180);
    triangle(300, 185, 225, 190,275, 180)
    fill(250,245,255)
    ellipse(155,225 , 75, 25);
    ellipse(270, 225, 75, 25);
    fill(0)
    circle(155,225 , 25);
    circle(270, 225, 25);
    line(190,220,140,210)
    line(280,210,230,220)
    line(230,300,245,350)
    line(200,300,190,350)
    fill(255,204,153)
    bezier(190,350, 180,380 , 205, 350, 205, 350);
    x=20
    bezier(190+x,350, 200+x,380 , 205+x, 350, 205+x, 350);
    x=40
    bezier(190+x,350, 200+x,380 , 205+x, 350, 205+x, 350);
    fill(0)
    circle(205, 357, 13);
    circle(227, 357, 13);
    fill(233,34,74)
    ellipse(225, 450, 75, 25);
    y=-15
    x=-5
    bezier(225+x,460+y,240+x,435+y+10 ,240+x, 435+y+10,265+x, 460+y);
    y=-15
    x=-35
    bezier(225+x,460+y,240+x,435+y+10 ,240+x, 435+y+10,265+x, 460+y);
    line(225-35,450,265-5,450)
    fill(0)
    circle(130,170,3)
    //head
    noLoop()           
}

LO: My Inspiration

The interactive game I admire most about is the dark soul series of game, not only for their highly criticized high level of difficulty, but also for the art of 3D medieval dark fantasy in it. With its hardcore difficulty, it points to the future of game as a form sport instead of just a form entertainment. Hidetaka Miyazaki spend over 5 years to create this fantastic game. Hidetaka Miyazaki ‘s Dark Souls creation was inspired by real world architecture such as Milan Cathedral and Château de Chambord, and his previous creation “Demon’s Soul”. To my knowledge the game was sold by the company FormSoftware, and I assume it was developed with commercial software.

Links of Dark Soul III and Dark Soul I-III(Japanese) by Hidetaka Miyazaki:
https://store.steampowered.com/app/374320/DARK_SOULS_III/
https://www.darksouls.jp/