jackie – Page 2 – [OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice

Project-06-Abstract-Clock

The Flower Clock

My idea is to represent time through the growth of an Equinox Flower. This kind of flower is associated with final goodbyes, and legend has it that these flowers grow wherever people part ways for good. In old Buddhist writings, the Equinox Flower is said to guide the dead through samsara, the cycle of rebirth.

The size of the pedals is associated with the unit of time they represent. For example, the inner circle of pedals change their size according to seconds went by.

sketch


var x;
var y;
//r represent how far each pedal is from the center
var r=80;
var l=r/2*3;
var angle=0;
var size;
function setup() {
    createCanvas(400, 600);
    angleMode(DEGREES);

    
}

function draw() {
	background(0,19,30);
    var s=second();
    var m=minute();
    var h=hour();
    
    //draw the stem first;
    stem();
    //move the center of the flower to the center;
	translate(width/2,height/2-50);
	push();
		

	//the size of this set of Equinox pedal represents the hour
		if(!h%24==0){
			r=120;
			size=map(hour(),0,60,2,3.5);
			for(var i=0;i<=5;i++){
			  angle+=60;
			  Equinox(r*cos(angle),r*sin(angle),l,size,132);
		    }
		}
		
    //the size of this set of Equinox pedal represents the second
		if(!s%60==0){
			r=60;
			size=map(second(),1,60,0.2,1.5);
			for(var i=0;i<=5;i++){
			  angle+=60;
			  Equinox(r*cos(angle),r*sin(angle),l,size,236);
			
		    }
		}
	//the size of this set of Equinox pedal represents the mintue
		if(!m%60==0){
			r=80;
			size=map(minute(),0,60,1.5,2.0);
			for(var i=0;i<=5;i++){
			angle+=60;
			Equinox(r*cos(angle),r*sin(angle),l,size,181);
		}
		
		pop();
	}


 }
    
function stem(){
	
    push();
    fill(88,122,72,60);
    translate(width/2,250);
    noStroke();
    //this for loop draws the growing calyx at the center
    for (var r = 0; r < 10; r++) {
        if (frameCount <= 180) {
         ellipse(0, 6 + frameCount / 20, 6 + frameCount / 40, 12 + frameCount / 20);
        }
        if (frameCount > 180) {
        frameCount=0;
        }
         rotate(360 / 5);
    }
    pop();
    //main stem
	stroke(88,122,72,120);
	strokeWeight(5);
	line(width/2-20,600,width/2,250);
		
		
	
}
//x and y represent the location; l is the distance to the center; s is the size; c is the color
function Equinox(x,y,l,s,c){
	var w=105;
	var h=50;
	var start=135;
	var end=225;
	push();
//locate each unit's position
	translate(x,y);
	scale(size);
//c is the shade of red each layer has
	stroke(c,50,50);
	strokeWeight(0.5);
	noFill();
//move each unit further from the center
	translate(-l,-105/2);
	rotate(-90);
	for(var i=0;i<7;i++){
      arc(0,l, w,h,start,end);
      w=w*Math.pow( 1.001, 10 );
      h+=8;
      start-=5;
      end+=5;

	}

	
	pop();

	}

LookingOutwards-06

The project I want to talk about is a Perlin Noise project created by Victor Vergara. I admire how the outcome is leveraged on different factors, which gives some level of rationale for the arbitrary.

The code is consist of four functions: createPrimitive(); createGUI(); and animation(). The motion graphic started with a primitive setup, whereas the graphic user interface on the left allows the user to manipulate the input.
The contribution of the creator is more about the rules, logic, and coded relationships rather than the output of that process. Indeed, when playing with randomness, the algorithm is more emphasized than the result.

Link: http://www.dstrict.com/arttechfactory/en/34-SLS-hotel-PROPERTY-DEVELOPMENT.html

Project-05-Wallpaper

sketch

var s=10;
var col=0;
var row=0;
function setup() {
    createCanvas(600, 600);
    background(217,215,217);
}

function draw() {
	var gap=3*s;
	var xStart=gap+3;
	//background grid
	for(var y=0; y<=600;y+=gap){
       

		for(var x=xStart;x<=600;x+=2*s*sqrt(3)){
			
			
			fill(221,211,201);
			pattern1(x,y);
			col+=1;
			//if(col%5==0&row%7==0){
				//print(x.toString()+","+y.toString());
			//}
			if(col%3==0&row%9==0){
				print(x.toString()+","+y.toString());
			}

		}
		
		if(row%2==1){
        	xStart+=s*sqrt(3);
        	
        	row+=1;

        }

        else{
        	
        	xStart-=s*sqrt(3);
        	row+=1;
        }
        
	}
	//red flower
    fill(202,65,36);
	pattern1(344.7691453623978,30);
	pattern1(517.9742261192855,0);
	pattern1(67.64101615137754,420);
	pattern1(188.88457268119896,210);
	pattern1(67.64101615137754,420);
	pattern1(414.05117766515286,540);
	pattern1(587.2562584220407,120);
	pattern1(362.0896534380866,270);
	//blue triangle
    fill(26,25,58);
    pattern2(310.1281292110203,480);
    pattern2(517.9742261192855,60);
    pattern2(84.96152422706632,270);
    pattern2(292.80762113533154,90);
    pattern2(517.9742261192855,510);

	noLoop();
	
}

function pattern2(x,y){
    push();
    stroke(239,237,231);
    strokeWeight(1);
    translate(x,y);
    var u=s*sqrt(3);
    triangle(0,0,u,2*u-4,0,2*s);
    triangle(0,2*s,u,2*u-4,-u,2*u-4);
    triangle(0,0,0,2*s,-u,2*u-4);
    pop();
}
function pattern1(x,y){
    push();
    stroke(239,237,231);
    strokeWeight(1);
    translate(x,y);
    //define unit
    var u=s*sqrt(3);

    triangle(0,0,-2*u,0,-u,-s);
    triangle(0,0,-u,-s,-u,-2*u+4);
    triangle(0,0,-u,-2*u+4,0,-2*s);
    triangle(0,0,0,-2*s,u,-2*u+4);
    triangle(0,0,u,-2*u+4,u,-s);
    triangle(0,0,u,-s,2*u,0);
    triangle(0,0,2*u,0,u,s);
    triangle(0,0,u,s,u,2*u-4);
    triangle(0,0,u,2*u-4,0,2*s);
    triangle(0,0,0,2*s,-u,2*u-4);
    triangle(0,0,-u,2*u-4,-u,s);
    triangle(0,0,-u,s,-2*u,0);
  
   pop();

}

I was inspired by traditional Japanese style “和風(わふう)” patterns. Below are some screenshots of my process in illustrator:

LookingOutwards-05

The project I want to discuss is a piece of public media art, “WAVE”, created by a Korean design company called d’strict. “WAVE” is an anamorphic illusion of water surging in a giant glass jar revealed on a magnificent DOOH of COEX K-POP SQUARE, the largest & high-definition outdoor advertising screen in S.Korea at 80.1m (w) x 20.1M (h).

video

Needless to say, the astonishing visual effect attracts me. I admire how modern technology and art as well as the natural and artificial are perfectly integrated to maximize people’s sensual experience. Yes, besides visuals, “WAVE” also provides acoustic effect to enhance the realistic impression of the art.

I know that fluids are probably the hardest thing to simulate in 3D rendering software because its movements are complex and hard to predict. I suppose the creators simulated water flow using 3ds Max Fluids and the Motion Field space warp. The algorithm might have helped them to customize the dimension of video according to the size and geometry of the LED screen to create an anamorphic illusion.

The creators’ artistic sensibilities are manifest through the creative concept of manipulating sight to create a realiztic 3D effect on 2D media.

Project-04-String-Art

deer

//Jiaqi Wang SectionC
var numLines=90;
//ears variables
var dxEL1;
var dxEL2;
var dxER1;
var dxER2;
var dyEL1;
var dyEL2;
var dyER1;
var dyER2;
//face variables
var dxFL1;
var dxFL2;
var dxFM1;
var dxFM2;
var dxFR1;
var dxFR2;
var dxFM2_2;
var dyFL1;
var dyFL2;
var dyFM1;
var dyFM2;
var dyFR1;
var dyFR2;
var dyFM2_2;
//nose
var dxN1;
var dxN2;
var dyN1;
var dyN2;
//body
var dxBL1;
var dxBL2;
var dxBR1;
var dxBR2;
var dyBL1;
var dyBL2;
var dyBR1;
var dyBR2;
var dxBR2_2;
var dyBR2_2;


function setup() {

    createCanvas(300, 400);
    background(255);
    strokeWeight(0.2);
    stroke(188,88,36);
    //left ear top
    line(30,20,115,140);
    //left ear bottom
    line(50,115,150,120);
    dxEL1=(50-30)/numLines;
    dyEL1=(115-20)/numLines;
    dxEL2=(150-115)/numLines;
    dyEL2=(120-140)/numLines;

    //right ear top
    line(265,20,185,140);
    //right ear bottom
    line(250,115,150,120);
    dxER1=(250-265)/numLines;
    dyER1=(115-20)/numLines;
    dxER2=(185-150)/numLines;
    dyER2=(140-120)/numLines;

    //face left
    line(115,140,140,205);
    //face middle
    line(150,120,150,205);
    
    dxFL1=(150-115)/numLines;
    dyFL1=(120-140)/numLines;
    dxFM2=(150-140)/numLines;
    dyFM2=(205-205)/numLines;
    //face right
    line(185,140,160,205);
    dxFR1=(150-185)/numLines;
    dyFR1=(120-140)/numLines;
    dxFM2_2=(150-160)/numLines;
    dyFM2_2=(205-205)/numLines;

    //nose 1
    line(135,215,160,235);
    //nouse 2
    line(165,215,145,235);
    dxN1=(165-135)/numLines;
    dyN1=(0)/numLines;
    dxN2=(145-160)/numLines;
    dyN2=(0)/numLines;

    //body left
    line(110,185,70,235);
    line(155,255,155,385);
    dxBL1=(155-110)/numLines;
    dyBL1=(250-180)/numLines;
    dxBL2=(155-70)/numLines;
    dyBL2=(380-235)/numLines;

    //body right
    line(200,185,240,235);
    line(155,255,155,385);
    dxBR1=(155-200)/numLines;
    dyBR1=(250-180)/numLines;
    dxBR2_2=(155-240)/numLines;
    dyBR2_2=(380-235)/numLines;


}

function draw() {

//left ear
	var xEL1=30;
    var yEL1=20;
    var xEL2=115;
    var yEL2=140;
	for(var i=0;i<=numLines;i+=1){
		line(xEL1,yEL1,xEL2,yEL2);
		xEL1+=dxEL1;
		yEL1+=dyEL1;
		xEL2+=dxEL2;
		yEL2+=dyEL2;
//print(xEL1,yEL1,xEL2,yEL2);
	}
 //right ear   
    var xER1=265;
    var yER1=20;
    var xER2=185;
    var yER2=140;
	for(var i=0;i<=numLines;i+=1){
		line(xER1,yER1,xER2,yER2);
		xER1+=dxER1;
		yER1+=dyER1;
		xER2-=dxER2;
		yER2-=dyER2;
		print(xER1,yER1,xER2,yER2);
		print(i.toString());
		print(numLines.toString());


    }
//face left
	var xFL1=115;
    var yFL1=140;
    var xFM2=140;
    var yFM2=205;
	for(var i=0;i<=numLines;i+=1){
		line(xFL1,yFL1,xFM2,yFM2);
		xFL1+=dxFL1;
		yFL1+=dyFL1;
		xFM2+=dxFM2;
		yFM2+=dyFM2;

	}
	//face right
    var xFR1=185;
    var yFR1=140;
    var xFM2_2=160;
    var yFM2_2=205;
	for(var i=0;i<=numLines;i+=1){
		line(xFR1,yFR1,xFM2_2,yFM2_2);
		xFR1+=dxFR1;
		yFR1+=dyFR1;
		xFM2_2+=dxFM2_2;
		yFM2_2+=dyFM2_2;

    }

    //nose
    var xN1=135;
    var yN1=215;
    var xN2=160;
    var yN2=235;
	for(var i=0;i<=numLines;i+=1){
		line(xN1,yN1,xN2,yN2);
		xN1+=dxN1;
		yN1+=dyN1;
		xN2+=dxN2;
		yN2+=dyN2;

    }
translate(0,5);
    //body left
    var xBL1=110;
    var yBL1=180;
    var xBL2=70;
    var yBL2=235;
	for(var i=0;i<=numLines;i+=1){
		line(xBL1,yBL1,xBL2,yBL2);
		xBL1+=dxBL1;
		yBL1+=dyBL1;
		xBL2+=dxBL2;
		yBL2+=dyBL2;

	}

    //body right
    var xBR1=200;
    var yBR1=180;
    var xBR2_2=240;
    var yBR2_2=235;
	for(var i=0;i<=numLines;i+=1){
		line(xBR1,yBR1,xBR2_2,yBR2_2);
		xBR1+=dxBR1;
		yBR1+=dyBR1;
		xBR2_2+=dxBR2_2;
		yBR2_2+=dyBR2_2;

	}

noLoop()
}

Below is the initial sketch I made in illustrator.

LookingOutwards-04

BIY.HEAR is a numerological processing project that acts like a prophet or a fortune teller. It interprets what the person said and calculates a destiny and a lucky number for this person. I admire how the creator enriches the meaning of technology and computation, which used to be purely pragmatic and mechanical. BIY.HEAR gives the user the illusion that it has some mysterious connection with supernatural power, which is a power conventionally unique to psychics.

BIY.HEAR was trained on Indian numerology and Astrology. The microphone on the board takes in words from a conversation and match the words with its symbolic meaning based on traditional Indian knowledge systems.

The visual design of the chip addresses the culture from which the calculation is based on. The creator made an interesting choice to preserve the general form of a normal chip instead of using a form of a human figure. This design choice renders the user to reflect on what is the difference between humans and machines and the level of sophistication that computational artifacts can reach.

Project-03-Dynamic-Drawing

My concept is creating a very elaborated and aesthetic pattern out of one kind of simple geometric shapes.

sketch

var angle=0;
var r;
function setup() {
	createCanvas(600, 450);
	 frameRate(12);
}
function draw() {
	//switch color according to mouseX position
	if(mouseX<300){
    background(100,165,172);
	noFill();
	stroke(255,196,234);
	}
	else{
	background(255,196,234);
	noFill();
	stroke(100,165,172);
	}

	
	//set the new origin so that ellipses rotate around the center
    translate(300,235);
    push();
    //rotate the first set of ellipses 30 degrees
    rotate(radians(30));
    ellipseMode(CENTER);

    ellipse(0,100,min(100,Math.abs(mouseX-300)),min(200,Math.abs(mouseY-225)));
	ellipse(0,100,min(105,Math.abs(mouseX-255)),min(199,Math.abs(mouseY-224)));
	ellipse(0,100,min(110,Math.abs(mouseX-250)),min(198,Math.abs(mouseY-223)));
	ellipse(0,100,min(115,Math.abs(mouseX-195)),min(197,Math.abs(mouseY-222)));
	ellipse(0,100,min(120,Math.abs(mouseX-190)),min(196,Math.abs(mouseY-221)));
	//60
	rotate(radians(30));
    ellipseMode(CENTER);
    ellipse(0,100,min(100,Math.abs(mouseX-300)),min(200,Math.abs(mouseY-225)));
	ellipse(0,100,min(105,Math.abs(mouseX-255)),min(199,Math.abs(mouseY-224)));
	ellipse(0,100,min(110,Math.abs(mouseX-250)),min(198,Math.abs(mouseY-223)));
	ellipse(0,100,min(115,Math.abs(mouseX-195)),min(197,Math.abs(mouseY-222)));
	ellipse(0,100,min(120,Math.abs(mouseX-190)),min(196,Math.abs(mouseY-221)));
	//90
	rotate(radians(30));
    ellipseMode(CENTER);
    ellipse(0,100,min(100,Math.abs(mouseX-300)),min(200,Math.abs(mouseY-225)));
	ellipse(0,100,min(105,Math.abs(mouseX-255)),min(199,Math.abs(mouseY-224)));
	ellipse(0,100,min(110,Math.abs(mouseX-250)),min(198,Math.abs(mouseY-223)));
	ellipse(0,100,min(115,Math.abs(mouseX-195)),min(197,Math.abs(mouseY-222)));
	ellipse(0,100,min(120,Math.abs(mouseX-190)),min(196,Math.abs(mouseY-221)));
	//120
	rotate(radians(30));
    ellipseMode(CENTER);
    ellipse(0,100,min(100,Math.abs(mouseX-300)),min(200,Math.abs(mouseY-225)));
	ellipse(0,100,min(105,Math.abs(mouseX-255)),min(199,Math.abs(mouseY-224)));
	ellipse(0,100,min(110,Math.abs(mouseX-250)),min(198,Math.abs(mouseY-223)));
	ellipse(0,100,min(115,Math.abs(mouseX-195)),min(197,Math.abs(mouseY-222)));
	ellipse(0,100,min(120,Math.abs(mouseX-190)),min(196,Math.abs(mouseY-221)));
	//150
	rotate(radians(30));
    ellipseMode(CENTER);
    ellipse(0,100,min(100,Math.abs(mouseX-300)),min(200,Math.abs(mouseY-225)));
	ellipse(0,100,min(105,Math.abs(mouseX-255)),min(199,Math.abs(mouseY-224)));
	ellipse(0,100,min(110,Math.abs(mouseX-250)),min(198,Math.abs(mouseY-223)));
	ellipse(0,100,min(115,Math.abs(mouseX-195)),min(197,Math.abs(mouseY-222)));
	ellipse(0,100,min(120,Math.abs(mouseX-190)),min(196,Math.abs(mouseY-221)));
	//180
	rotate(radians(30));
    ellipseMode(CENTER);
    ellipse(0,100,min(100,Math.abs(mouseX-300)),min(200,Math.abs(mouseY-225)));
	ellipse(0,100,min(105,Math.abs(mouseX-255)),min(199,Math.abs(mouseY-224)));
	ellipse(0,100,min(110,Math.abs(mouseX-250)),min(198,Math.abs(mouseY-223)));
	ellipse(0,100,min(115,Math.abs(mouseX-195)),min(197,Math.abs(mouseY-222)));
	ellipse(0,100,min(120,Math.abs(mouseX-190)),min(196,Math.abs(mouseY-221)));
	//210
	rotate(radians(30));
    ellipseMode(CENTER);
    ellipse(0,100,min(100,Math.abs(mouseX-300)),min(200,Math.abs(mouseY-225)));
	ellipse(0,100,min(105,Math.abs(mouseX-255)),min(199,Math.abs(mouseY-224)));
	ellipse(0,100,min(110,Math.abs(mouseX-250)),min(198,Math.abs(mouseY-223)));
	ellipse(0,100,min(115,Math.abs(mouseX-195)),min(197,Math.abs(mouseY-222)));
	ellipse(0,100,min(120,Math.abs(mouseX-190)),min(196,Math.abs(mouseY-221)));
	rotate(radians(30));
    //240
    ellipseMode(CENTER);
    ellipse(0,100,min(100,Math.abs(mouseX-300)),min(200,Math.abs(mouseY-225)));
	ellipse(0,100,min(105,Math.abs(mouseX-255)),min(199,Math.abs(mouseY-224)));
	ellipse(0,100,min(110,Math.abs(mouseX-250)),min(198,Math.abs(mouseY-223)));
	ellipse(0,100,min(115,Math.abs(mouseX-195)),min(197,Math.abs(mouseY-222)));
	ellipse(0,100,min(120,Math.abs(mouseX-190)),min(196,Math.abs(mouseY-221)));
	rotate(radians(30));
    //270
    ellipseMode(CENTER);
    ellipse(0,100,min(100,Math.abs(mouseX-300)),min(200,Math.abs(mouseY-225)));
	ellipse(0,100,min(105,Math.abs(mouseX-255)),min(199,Math.abs(mouseY-224)));
	ellipse(0,100,min(110,Math.abs(mouseX-250)),min(198,Math.abs(mouseY-223)));
	ellipse(0,100,min(115,Math.abs(mouseX-195)),min(197,Math.abs(mouseY-222)));
	ellipse(0,100,min(120,Math.abs(mouseX-190)),min(196,Math.abs(mouseY-221)));
	//300
	rotate(radians(30));
    ellipseMode(CENTER);
    ellipse(0,100,min(100,Math.abs(mouseX-300)),min(200,Math.abs(mouseY-225)));
	ellipse(0,100,min(105,Math.abs(mouseX-255)),min(199,Math.abs(mouseY-224)));
	ellipse(0,100,min(110,Math.abs(mouseX-250)),min(198,Math.abs(mouseY-223)));
	ellipse(0,100,min(115,Math.abs(mouseX-195)),min(197,Math.abs(mouseY-222)));
	ellipse(0,100,min(120,Math.abs(mouseX-190)),min(196,Math.abs(mouseY-221)));
	//330
	rotate(radians(30));
    ellipseMode(CENTER);
    ellipse(0,100,min(100,Math.abs(mouseX-300)),min(200,Math.abs(mouseY-225)));
	ellipse(0,100,min(105,Math.abs(mouseX-255)),min(199,Math.abs(mouseY-224)));
	ellipse(0,100,min(110,Math.abs(mouseX-250)),min(198,Math.abs(mouseY-223)));
	ellipse(0,100,min(115,Math.abs(mouseX-195)),min(197,Math.abs(mouseY-222)));
	ellipse(0,100,min(120,Math.abs(mouseX-190)),min(196,Math.abs(mouseY-221)));
	//360
	rotate(radians(30));
    ellipseMode(CENTER);
    ellipse(0,100,min(100,Math.abs(mouseX-300)),min(200,Math.abs(mouseY-225)));
	ellipse(0,100,min(105,Math.abs(mouseX-255)),min(199,Math.abs(mouseY-224)));
	ellipse(0,100,min(110,Math.abs(mouseX-250)),min(198,Math.abs(mouseY-223)));
	ellipse(0,100,min(115,Math.abs(mouseX-195)),min(197,Math.abs(mouseY-222)));
	ellipse(0,100,min(120,Math.abs(mouseX-190)),min(196,Math.abs(mouseY-221)));
	
	pop();

	


	
	

	
	
	}

Looking Outward-03

This project creates jewelry out of voice by mimicking the shape of the audio’s sound wave. I like this simple yet unexpected way of transforming information. On an abstract level, this project makes use of synesthesia to bridge different sensations, in this case, the hearing and the touching. I admire the connection it builds because offers artists and designers another tool for their creative expression toolset.

The algorithm should be quite simple. The input will be an audio file. Then, the algorithm processes the file into a sound wave, turns it into a shape, and renders a form base on the shape. Lastly, the form would be sent to the 3D printer.

The creator’s artistic sensibilities are not directly manifest in the form but embedded in it. In the project, the role of the creator is more about creating more options for the users to play with.

Project-02-Variable-Face

You might need to refresh the page to see the changes because the mousePressed function does not really work in my code. I will update this post when I figure out why.

ancient beauty

//Jiaqi Wang section C
var eyeH= 15;
var eyeL= 55;
var faceW= 90;
var eyeD=20;
var eyeP=330;
var num;
var num2;
var blush=100;


function setup() {
    createCanvas(480, 640);
    background(179,187,146);
    
}

function draw() {
	//neck
	fill(244,233,222);
	noStroke();
	quad(179, 450, 91, 531, 315, 550, 252, 403);
	fill(128,17,41);
	arc(200,637,400,250,PI,0);
	//face
	var mid=182;

	noStroke();
	fill(244,233,222);
	beginShape();
	//chin point
	curveVertex(mid, 461);
	curveVertex(mid, 461);
	curveVertex(mid-(faceW*0.5), 440);
	//jaw left
	curveVertex(mid-(faceW*0.8), 403);
	//temple left
	curveVertex(mid-faceW, 330);
	//brow bridge
	curveVertex(mid-(faceW*1.03), 276);
	//hairline left
	curveVertex(mid-(faceW*0.74), 217);
	//hairline mid
	curveVertex(mid, 217);
	//hairline right
	curveVertex(mid+(faceW*0.74), 217);
	//brow bridge right
	curveVertex(mid+(faceW*1.03), 276);
	//temple right
	curveVertex(mid+faceW, 330);
    //right jaw
    curveVertex(mid+(faceW*0.8), 403);
    curveVertex(mid+(faceW*0.5), 440);
	curveVertex(mid, 461);
	curveVertex(mid, 461);
	endShape();
	//blush
	fill(235,104,119);
	ellipse(mid-faceW,328,blush,blush);
	fill(235,104,119);
	ellipse(mid+faceW,328,blush,blush);


	//eye
	//left
	//eyeball
	
	num=random(0.3,0.8);
	num2=random(0,0.3);
	fill(255);
	beginShape();
	//inner eye corner left
	curveVertex(mid-eyeD, eyeP);
	curveVertex(mid-eyeD, eyeP);
	//middle of eye
	curveVertex(mid-eyeD-(eyeL*num), eyeP-eyeH);
	//end of eye
	curveVertex(mid-eyeD-eyeL,eyeP-(eyeH*0.93));
	//bottom of eye
	curveVertex(mid-eyeD-(eyeL*num), eyeP);
	curveVertex(mid-eyeD, eyeP);
	curveVertex(mid-eyeD, eyeP);
	endShape();
	//pupil
    fill(86,70,31);
	ellipse(mid-eyeD-(eyeL*0.4),eyeP-(eyeH*0.4),eyeH*0.9,eyeH*0.9);
	noFill();
	fill(0);
	ellipse(mid-eyeD-(eyeL*0.4),eyeP-(eyeH*0.4),eyeH*0.3,eyeH*0.3);
	noFill();
	fill(255);
	ellipse(mid-eyeD-(eyeL*0.45),eyeP-(eyeH*0.45),eyeH*0.2,eyeH*0.2);
	noFill();
	//eyeline
	fill(0);
	beginShape();
	//inner eye corner left
	curveVertex(mid-eyeD, eyeP);
	curveVertex(mid-eyeD, eyeP);
	//middle of eye
	curveVertex(mid-eyeD-(eyeL*num), eyeP-eyeH);
	//end of eye
	curveVertex(mid-eyeD-eyeL,eyeP-(eyeH*0.93));
	//bottom of eye
	curveVertex(mid-eyeD-(eyeL*num), eyeP);
	curveVertex(mid-eyeD-eyeL-(num*10),eyeP-(eyeH*0.93));
	curveVertex(mid-eyeD-(eyeL*num), eyeP-eyeH-(num*9));
	curveVertex(mid-eyeD, eyeP);
	curveVertex(mid-eyeD, eyeP);
	endShape();
	//eyebrow
	fill(0);
	var x= max(num2,0.43);
	ellipse(mid-eyeD-(eyeL*0.5),eyeP-(x*100),num*90,num2*50);
	//hair
	beginShape();
	//jaw left
	curveVertex(mid-(faceW*0.8), 403);
	curveVertex(mid-(faceW*0.8), 403);
	//temple left
	curveVertex(mid-faceW, 330);
	//brow bridge
	curveVertex(mid-(faceW*1.03), 276);
	//hairline left
	curveVertex(mid-(faceW*0.74), 217);
	//hairline mid
	curveVertex(mid, 217);
	//head top
	curveVertex(mid, 145);
	//head top left
	curveVertex(mid-(faceW*0.5), 163);
	//turn
	curveVertex(mid-(faceW*0.8),193);
	//concave
	curveVertex(mid-(faceW*1.8),300);
	//bottom left
	curveVertex(mid-(faceW*1.3),395);
	//bottom right
	curveVertex(mid-(faceW*0.9),395);
	curveVertex(mid-(faceW*0.8), 403);
	curveVertex(mid-(faceW*0.8), 403);
	endShape();
	beginShape();
	//jaw left
	curveVertex(mid+(faceW*0.8), 403);
	curveVertex(mid+(faceW*0.8), 403);
	//temple left
	curveVertex(mid+faceW, 330);
	//brow bridge
	curveVertex(mid+(faceW*1.03), 276);
	//hairline left
	curveVertex(mid+(faceW*0.74), 217);
	//hairline mid
	curveVertex(mid, 217);
	//head top
	curveVertex(mid, 145);
	//head top left
	curveVertex(mid+(faceW*0.5), 163);
	//turn
	curveVertex(mid+(faceW*0.8),193);
	//concave
	curveVertex(mid+(faceW*1.8),300);
	//bottom left
	curveVertex(mid+(faceW*1.3),395);
	//bottom right
	curveVertex(mid+(faceW*0.9),395);
	curveVertex(mid+(faceW*0.8), 403);
	curveVertex(mid+(faceW*0.8), 403);
	endShape();
	ellipse(153-(num*20),155,190-(num*40),150-(num*90));
	ellipse(245+(num2*20),177,80,50);
	ellipse(245+(num2*20),130,80+(num*40),80+(num*40));






	


	//right
	//eyeball
	fill(255);
	beginShape();
	//inner eye corner left
	curveVertex(mid+eyeD, eyeP);
	curveVertex(mid+eyeD, eyeP);
	//middle of eye
	curveVertex(mid+eyeD+(eyeL*num), eyeP-eyeH);
	//end of eye
	curveVertex(mid+eyeD+eyeL,eyeP-(eyeH*0.93));
	//bottom of eye
	curveVertex(mid+eyeD+(eyeL*num), eyeP);
	curveVertex(mid+eyeD, eyeP);
	curveVertex(mid+eyeD, eyeP);
	endShape();
	noLoop()
	//pupil
    fill(86,70,31);
	ellipse(mid+eyeD+(eyeL*0.7),eyeP-(eyeH*0.7),eyeH*0.9,eyeH*0.9);
	noFill();
	fill(0);
	ellipse(mid+eyeD+(eyeL*0.7),eyeP-(eyeH*0.7),eyeH*0.3,eyeH*0.3);
	noFill();
	fill(255);
	ellipse(mid+eyeD+(eyeL*0.65),eyeP-(eyeH*0.55),eyeH*0.2,eyeH*0.2);
	noFill();
	//eyeline
	fill(0);
	beginShape();
	//inner eye corner left
	curveVertex(mid+eyeD, eyeP);
	curveVertex(mid+eyeD, eyeP);
	//middle of eye
	curveVertex(mid+eyeD+(eyeL*num), eyeP-eyeH);
	//end of eye
	curveVertex(mid+eyeD+eyeL,eyeP-(eyeH*0.93));
	//bottom of eye
	curveVertex(mid+eyeD+(eyeL*num), eyeP);
	curveVertex(mid+eyeD+eyeL+(num*10),eyeP-(eyeH*0.93));
	curveVertex(mid+eyeD+(eyeL*num), eyeP-eyeH-(num*9));
	curveVertex(mid+eyeD, eyeP);
	curveVertex(mid+eyeD, eyeP);
	endShape();
    //eyebrow
	fill(0);
	var x= max(num2,0.43);
	ellipse(mid+eyeD+(eyeL*0.5),eyeP-(x*100),num*90,num2*50);

	//mouse
	fill(235,104,119);
	ellipse(mid,416,30,20);
	stroke(0);
	noFill();
	beginShape();
	curveVertex(mid-20, 414);
	curveVertex(mid-20, 414);
	curveVertex(mid-6,412);
	curveVertex(mid,416);
	curveVertex(mid+6,412);
	curveVertex(mid+20, 414);
	curveVertex(mid+20, 414);
	endShape();

	//decoration
	var x=random(112,170);
	var y=random(100,190);
     fill(255,225,90);
     noStroke();
     push();
     translate(x+(num*100), y+(num2*100));
     rotate(frameCount / 200.0);
     polygon(0, 0, 50,13);
     pop();

     fill(255,124,24);
     stroke(255);
	 push();
     translate(x, y);
     rotate(frameCount / -100.0);
     polygon(0, 0, 20, 9);
     pop();
      

      //nouse
      fill(0);
      noStroke();
      ellipse(mid-5,394,2,3);
      ellipse(mid+5,394,2,3);

      //right jaw
      stroke(255);
      noFill();

     beginShape();
    curveVertex(mid+(faceW*0.8), 403);
    curveVertex(mid+(faceW*0.8), 403);
    curveVertex(mid+(faceW*0.5), 440);
	curveVertex(mid, 461);
	curveVertex(mid, 461);
     endShape();


	








}


function mousePressed() {
    faceW = random(280, 330);
    eyeD = random(210, 300);
    eyeP = random(50, 60);
}
//I do not know why this function is not working

function polygon(x, y, radius, npoints) {
  let angle = TWO_PI / npoints;
  beginShape();
  for (let a = 0; a < TWO_PI; a += angle) {
    let sx = x + cos(a) * radius;
    let sy = y + sin(a) * radius;
    vertex(sx, sy);
  }
  endShape(CLOSE);
}

I was inspired by ancient Chinese woman makeups from different periods of time.

LO-02

In one of Quayola’s work, Jardins d’Été, a realistic video of flowers gently brushed by the breeze gradually evolves into an impressionism oil painting as if the movement of the petals blurred the paint on the canvas. The whole transitional process is so smooth and subtle that it successfully captures the sensual artistic aspect of impressionism painting and the subtle nuances beyond human perception. I like how the artist employs technology as a lens to explore the tension and balance between the old and new. Through this lens, we can travel back through time and imagine what the artist saw that inspired him or her to capture that beautiful moment.

The website does not provide much info about the algorithm behind the scene, but I suppose it involves detecting which area in the video moves the most and this part will be processed first and so on until the entire image is modified.

The artist’s sensibility is embedded in the ways in which nature is synthesized and represented. The color, movement, lighting, and sounds all worked well together.