Author: Yanina

Faces of Randomness

Randomness. Such a broad idea in this world. Whenever I try to randomly pick numbers while filling up the lottery ticket, I close my eyes and move my hand in the air to pick a number thus trying to imitate the effect of randomness. Yet, despite the fact that I don’t see the numbers, I still feel the need to stop at some specific point. So, … maybe it’s not random after all? Just a so-called “gut feeling” or “woman intuition”?
For this Looking Outwards assignment I chose a digital art by Martin Krzywinski called “Faces of Randomness”. This project inspires me because it shows that even though all generated drawings look very similar, they’re all unique with their own random variables in algorithms. It’s very similar to humans – we all buy the same clothes, yet our personalities are all unique.
In his art, Martin Krzywinski used “sixteen random numbers with 1000 digits each represented by their digit transition paths and frequencies.” I assume Martin wrote an algorithm that generates 16 random numbers with 1000 digits each which draws random lines from one point to another and the color depends on the location of the line at the random points. Very similar to our previous project of “String Art”.
The creator’s artistic sensibilities manifest in the final form by creating a beautiful string art effect using only 16 random digits that show color transitions based on the random paths that the lines were drawn in.
I chose this project because it is very similar to what we are doing in class. In this sense, I feel some kind of connection and realization that anything is possible. Even though this idea of computer scince for design and creative usage was new to me, I was able to learn so much in such short amount of time to even understand the methods behind some computational art. And I think it’s beautiful.

https://fineartamerica.com/featured/1-faces-of-randomness-martin-krzywinski.html

 Martin Krzywinski, “Faces of Randomness”, 2013

Wallpaper Project

sketchDownload

/*
Yanina Shavialenka
Section B
yshavial@andrew.cmu.edu
Project 5: Wallpaper
*/

var x = 100;
var y = 45;
var s = 8;

var xS1 = 193;
var yS1 = 60;
var xS2 = 193;
var yS2 = 115;


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

function draw() { 
    background(0, 0, 51);
    
    //Hexagonal background
    for(var xH = 0; xH <= 600; xH += 15){
        for (var yH = 0; yH <= 600; yH += 2*s*sqrt(3)/2){
            fill(0, 0, 51);
            hexagon(xH, yH);
        }
    }
    for (var xH = 10; xH <= 600; xH += 15){
        for (var yH = s*sqrt(3)/2; yH <= 600; yH += 2*s*sqrt(3)/2){
            fill(0, 0, 95)
            hexagon(xH, yH);
        }
    }


    //Solar Systems
    for(x = 100; x <= width; x += 200){
        for(y = 85; y <=height; y += 300){
            solarSystem();
        }
    }
    for(x = 0; x <= width; x += 200){
        for(y = 235; y <= height; y += 300){
            solarSystem();
        }
    }

    //Yellow Stars
    for(xS1 = -7; xS1 <= width; xS1 += 200){
        for(yS1 = 45; yS1 <=height; yS1 += 300){
            star();
        }
    }
    for(xS1 = 93; xS1 <= width; xS1 += 200){
        for(yS1 = 195; yS1 <= height; yS1 += 300){
            star();
        }
    }

    //Pink Stars
     for(xS2 = -7; xS2 <= width; xS2 += 200){
        for(yS2 = 115; yS2 <=height; yS2 += 300){
            star();
        }
    }
    for(xS2 = 93; xS2 <= width; xS2 += 200){
        for(yS2 = 265; yS2 <= height; yS2 += 300){
            star();
        }
    }
}

function star() {
    /*
    This function draws yellow and pink stars.
    The star is made out of a square in the middle and 4
    triangles that surround that square.
    */

    //Yellow Star
    noStroke();
    fill(255, 255, 102);
    rect(xS1, yS1, 13, 13);
    triangle(xS1, yS1, xS1+6.5, yS1-13, xS1+13, yS1);
    triangle(xS1, yS1, xS1-13, yS1+6.5, xS1, yS1+13);
    triangle(xS1, yS1+13, xS1+6.5, yS1+26, xS1+13, yS1+13);
    triangle(xS1+13, yS1, xS1+26, yS1+6.5, xS1+13, yS1+13);

    //Pink Star
    noStroke();
    fill(255, 178, 153);
    rect(xS2, yS2, 13, 13);
    triangle(xS2, yS2, xS2+6.5, yS2-13, xS2+13, yS2);
    triangle(xS2, yS2, xS2-13, yS2+6.5, xS2, yS2+13);
    triangle(xS2, yS2+13, xS2+6.5, yS2+26, xS2+13, yS2+13);
    triangle(xS2+13, yS2, xS2+26, yS2+6.5, xS2+13, yS2+13);
}

function solarSystem() {
    /*
    This function draws Solar System with sun in the middle
    and planets rotating around the sun on their orbits.
    */
    
    //Orbits
    stroke(255);
    fill(0, 0, 0, 0);
    ellipse(x, y, 25, 25);
    ellipse(x, y, 45, 45);
    ellipse(x, y, 65, 65);

    push();
    strokeWeight(3);
    stroke(180);
    ellipse(x, y, 85, 85);
    pop();
    ellipse(x, y, 105, 105);

    ellipse(x, y, 125, 125);
    ellipse(x, y, 145, 145);
    ellipse(x, y, 165, 165);


    //Sun
    noStroke();
    fill(255, 255, 0);
    ellipse(x, y, 12, 12);

    //Venus
    noStroke();
    fill(160, 160, 160);
    ellipse(x+8, y+10, 8, 8);

    //Earth
    noStroke();
    fill(0, 102, 204);
    ellipse(x+10, y-20, 13, 13);
    fill(0,220,0);
    ellipse(x+11, y-22, 8, 4);
    ellipse(x+11, y-17, 4, 2.5);
    ellipse(x+7, y-19, 5, 2);

    //Mars
    noStroke();
    fill(204, 65, 0);
    ellipse(x-30, y-10, 12, 12);

    //Jupiter
    noStroke();
    fill(255, 155, 0);
    ellipse(x+40, y+35, 18, 18);
    stroke(195, 0, 0);
    line(x+35, y+28, x+48, y+34);
    stroke(205, 50, 0);
    line(x+32, y+33, x+46, y+40);

    //Saturn
    stroke(255);
    fill(0, 0, 0, 0);
    ellipse(x+37, y-50, 30, 9);
    noStroke();
    fill(190, 190, 190);
    ellipse(x+37, y-50, 16.5, 16.5);

    //Uranus
    noStroke();
    fill(153, 204, 255);
    ellipse(x-53, y+50, 15, 15);

    //Neptune
    noStroke();
    fill(10, 76, 153);
    ellipse(x-45, y-70, 15, 15);
}


function hexagon(xH,yH){
    /*
    This function draws one hexagon with a side of 8 pixels 
    that is made out of 8 triangles.
    */
    push();
    translate(xH,yH)
    noStroke();
    triangle(0,0,-s,0,-s/2,-s*sqrt(3)/2)
    triangle(0,0,-s/2,-s*sqrt(3)/2,s/2,-s*sqrt(3)/2)
    triangle(0,0,s,0,s/2,-s*sqrt(3)/2)
    triangle(0,0,-s,0,-s/2,s*sqrt(3)/2)
    triangle(0,0,-s/2,s*sqrt(3)/2,s/2,s*sqrt(3)/2)
    triangle(0,0,s,0,s/2,s*sqrt(3)/2)
    pop();
}

|

This project was very interesting in the fact that I get to design whatever I want which also made this project hard as if it was hard to stop on one idea only. I came up with the idea of Solar system with planets surrounding a sun in the middle. All of the systems are identical and are separated by yellow and pink stars.

Cambot

When I was a little girl, I grew fond of one animated Pixar movie called “WALL-E”. I loved it because it showed people that even robots can learn how to love, how to feel and express emotions for those around them and be more human than many humans on this earth. 

I chose a 3D Graphic Project by Dong Liang called “Cambot”. Dong Liang created a touching story where a “Cambot,  short for Camera Robot, is a type of robot that will go around and shoot photos under its owner’s command.” However, there was one abandoned Cambot, NO. 406, who encountered a glitch during its production and now doesn’t follow the commands of its owner and only wanders around taking pictures of things he finds interesting, attractive and fascinating. How cute is that? I admire this project because the creator didn’t just create a 3D image, no, he gave this image its own life by having a story behind it. This so-called glitch made this robot have its own personality, look for beautiful things in the world on its own – this glitch made NO. 406 be alive.

The first step in this project that Dong Liang has done was playing around with sketches of the robot to find the right design. Texturing of the image was done in Mari – 3D Texture Painting Software: “I exported a neutral-pose mesh for painting the generic maps such as dif, bmp, spc, and spc roughness, and then I also exported a posed mesh for the rain mask because I want the water trails to follow the gravity.”  The rain in the image was done in Maya, a 3D computer graphics application, using the nParticle; for example, to create the rain streak, Dong Liang randomly instanced 5 different streak models to a nParticle system to generate random rain drops as if it was in real life. To set up the lighting, Dog Liand used aHDRI provided by sIBL which also gave him a good bokeh effect when turning on the lens blur. Lastly, “the rain streaks and splashes were rendered as separate pass and were comped into the beauty pass in Nuke.”

The creator’s artistic sensibilities played the biggest role in the final form because, as I’ve already mentioned before, Dong Liang made his work be alive by having a story about it, by giving his robot characteristics of a human being and also, by creating a short clip of NO. 406 which brought that 3D image to life in literal sense. This project radiates warmth, happiness and truth – you might have a glitch yet you’re unique and beautiful in its own way. Maybe having a glitch is an advantage? That’s something to think about. 

Dong Liang, “Cambot”, 2016

https://obidong.wixsite.com/home/cambot-wip

String Art

class= “p5-embed” data-width = “400” data-height= “300” href= “https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/09/sketch-180.js”>sketchDownload

I really struggled with this project because I couldn’t visually where would the lines be drawn thus I used very simple drawing tactics to create overlapping rhombuses to create a star with CMU’s plaid effect.

Algorithmic Drive – Spectacular car(au)tonomy

Sound always surrounds us no matter where we are – in our rooms, on the boardwalk by the ocean, in class during final exams when everyone is focused on their work. Even during complete silence there’s a sound of our breathing or the sound of dust falling on the floor. Sound is always there and the idea of music always follows it. Many would consider a loud street in the middle of New York City to be noisy or annoying but, as a native New Yorker, I grew to hear music in the random Manhattan sounds. We can hear constant beats from honking cars or from people throwing out metal cans of soda that make a clunking sound. People’s conversations are lyrics about daily life, struggles and human routines. Music is everywhere and I think it’s beautiful. 

I chose a project called “Algorithmic Drive” created by François Quévillon. “The work plays with the tension generated by confronting the technologies used by mobile robotics with the unpredictable nature of the world.” What I admire about this project is the fact that both technology and nature are connected here because robotics were used to capture the sound of the world around us. It’s fascinating. What I know about the algorithms that generated the work is that Quévillon built his own database that consisted of camera recordings and he connected that database to his car’s on-board computer. The camera was recording videos via Bluetooth in the car’s OBD-II port of a surrounding nature and it took into consideration all of the factors such as altitude, orientation, car’s location and speed, engine RPM, stability and the temperature of various sensors. To sort all of the videos statistically from minimum to maximum value by the parameters like sounds, images, location and car’s activity, there was a specific sampling system that used signal processing, data analysis and computer vision algorithms. The parameters were “mapped using a Uniform Manifold Approximation and Projection (UMAP) dimension reduction technique.” Sound analysis software was used to get the sound and visual features of the environment based on OpenCV and road scene segmentation using the SegNet deep convolutional encoder-decoder architecture and its Model Uncertainty. Moreover, the system that François Quévillon used in his project had  “a custom-built interface with illuminated rotary encoders and a monitor installed on a road case that contains a subwoofer.”

A way the creator’s artistic sensibilities manifested in the final form is the fact that François Quévillon was able to bring life into technology: robotics were used to record videos and he managed to add sounds based on recordings of nature. It’s simply fantastic. We were able to hear music based on ocean’s waves and on trees that were growing on the side of the road. We were able to hear beats from rain drops and we were able to hear melodies based on the flying insects. This project brought together technology and nature to create music – this project shows us that technology can be used not only for practical purposes but also for spirituality. 

Algorithmic Drive – Spectacular car(au)tonomy
François Quévillon, ‘Algorithmic Drive’ , 2018

Dynamic Drawing

sketch

var angle = 80;

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

function draw() {
	background(mouseX,mouseY, 155);

	//leaves
	/*This part of the code draws two ellipses of grass green color. I used push() and pop()
	commans to remember new positions of two ellipses due to translation and rotation*/
	if(mouseX>300) {
		push();
	    noStroke();
	    fill(124, 252, 0);
	    translate(300, 300); //chnages a (0, 0) point to (300, 300)
	    rotate(radians(50)); //rotates an ellipse 50 degrees in radians clockwise
	    ellipse(66, 20, 30, 70);
	    rotate(radians(-83)); //rotates an ellipse 80 degrees in radians counterclockwise
	    ellipse(-30, 20, 25, 50);
	    pop();
    }

	//This part of the code draws dark green stem of a flower
	noStroke();
	fill(0, 100, 0);
	rect(298, 230, 5, mouseX);
    
    //This part of the code restricts mouseX to 0-115
	var m = max(min(mouseX, 115), 0);
    var size = m * 350.0 / 400.0;

    /*I used push() and pop() commands to remember new positions of petals becuase I used 
    translation and rotation. I drew 9 petals of a flower by rotating them 40 degrees in radians
    from previous petal's location*/
    push();
    stroke(255);
    strokeWeight(1);
    fill(55, mouseX, mouseY, 150); /*This changes the color of petals in regards with (x,y)
    location and it has 150 transparency*/
    translate(300, 225); //changes a (0, 0) point to (300, 225)
    rotate(radians(40));
    ellipse(0 + m * 190.0 / 400.0, 0, 100, 35); 
    rotate(radians(40));
    ellipse(0 + m * 190.0 / 400.0, 0, 100, 35);
    rotate(radians(40));
    ellipse(0 + m * 190.0 / 400.0, 0, 100, 35);
    rotate(radians(40));
    ellipse(0 + m * 190.0 / 400.0, 0, 100, 35);
    rotate(radians(40));
    ellipse(0 + m * 190.0 / 400.0, 0, 100, 35);
    rotate(radians(40));
    ellipse(0 + m * 190.0 / 400.0, 0, 100, 35);
    rotate(radians(40));
    ellipse(0 + m * 190.0 / 400.0, 0, 100, 35);
    rotate(radians(40));
    ellipse(0 + m * 190.0 / 400.0, 0, 100, 35);
    rotate(radians(40));
    ellipse(0 + m * 190.0 / 400.0, 0, 100, 35);
    pop();
    
    //This part of the code draws a stigma of a flower
    noStroke();
    fill(150, mouseX, mouseY); /*This changes the color of stigma in regards with (x,y)
    location*/
    circle(300, 225, 15);	

    //This part of the code draws 3 cluds that are moving with regards of mouseX
    noStroke();
    fill(max(mouseX, mouseY)); /*This changes clouds' color by choosing the greater value from
    mouseX and mouseY locations*/
    ellipse(mouseX, 50, 70, 35);
    ellipse(mouseX+25, 40, 50, 20);
    ellipse(mouseX-25, 60, 50, 20);
  
    ellipse(mouseX+120, 80, 70, 35);
    ellipse(mouseX+145, 70, 50, 20);
    ellipse(mouseX+95, 90, 50, 20);

    ellipse(mouseX+240, 25, 70, 35);
    ellipse(mouseX+265, 15, 50, 20);
    ellipse(mouseX+215, 35, 50, 20);
   
    //This part of the code draws grass
    fill(55, 143, 80); 
    noStroke(); 
    //first moving part of grass in regards with mouseX
    triangle(mouseX-540, 450, mouseX-530, 400, mouseX-520, 450);
    triangle(mouseX-520, 450, mouseX-510, 400, mouseX-500, 450);
    triangle(mouseX-500, 450, mouseX-490, 400, mouseX-480, 450);
    triangle(mouseX-480, 450, mouseX-470, 400, mouseX-460, 450);
    triangle(mouseX-460, 450, mouseX-450, 400, mouseX-440, 450);
    triangle(mouseX-440, 450, mouseX-430, 400, mouseX-420, 450);
    triangle(mouseX-420, 450, mouseX-410, 400, mouseX-400, 450);
    triangle(mouseX-400, 450, mouseX-390, 400, mouseX-380, 450);
    triangle(mouseX-380, 450, mouseX-370, 400, mouseX-360, 450);
    triangle(mouseX-360, 450, mouseX-350, 400, mouseX-340, 450);
    triangle(mouseX-340, 450, mouseX-330, 400, mouseX-320, 450);
  
    //constant part of grass
    triangle(200, 450, 210, 400, 220, 450);
    triangle(220, 450, 230, 400, 240, 450);
    triangle(240, 450, 250, 400, 260, 450);
    triangle(260, 450, 270, 400, 280, 450);
    triangle(280, 450, 290, 400, 300, 450);
    triangle(300, 450, 310, 400, 320, 450);
    triangle(320, 450, 330, 400, 340, 450);
    triangle(340, 450, 350, 400, 360, 450);
    triangle(360, 450, 370, 400, 380, 450);
    triangle(380, 450, 390, 400, 400, 450);

    //second moving part of grass in regards with mouseX
    triangle(mouseX-930, 450, mouseX-920, 400, mouseX-910, 450);
    triangle(mouseX-910, 450, mouseX-900, 400, mouseX-890, 450);
    triangle(mouseX-890, 450, mouseX-880, 400, mouseX-870, 450);
    triangle(mouseX-870, 450, mouseX-860, 400, mouseX-850, 450);
    triangle(mouseX-850, 450, mouseX-840, 400, mouseX-830, 450);
    triangle(mouseX-830, 450, mouseX-820, 400, mouseX-810, 450);
    triangle(mouseX-810, 450, mouseX-800, 400, mouseX-790, 450);
    triangle(mouseX-790, 450, mouseX-780, 400, mouseX-770, 450);
    triangle(mouseX-770, 450, mouseX-760, 400, mouseX-750, 450);
    triangle(mouseX-750, 450, mouseX-740, 400, mouseX-730, 450);

    
    if(mouseX>width/2){ //checks if mouseX is on the right side of a screen
    	translate(500, 100); //changes a (0, 0) point to (500, 100)

    	var mapX = map(mouseX, 100, 300, 250, 250); //remaping a mouseX from one range to another.
        var mapY = map(mouseY, 100, 0, 100, 200); //remaping a mouseY from one range to another.
        
        //This part of the code draws sunrays that will follow mouseX and mouseY
        strokeWeight(5);
        stroke(255,165,0); //orange
        line(0, 0, mapX, mapY);
        line(0, 0, mapX-20, mapY-20);
        line(0, 0, mapX-80, mapY-80);
        line(0, 0, mapX-140, mapY-140);
        line(0, 0, mapX-200, mapY-200);

        stroke(218,165,32); //golden rod
        line(0, 0, mapX, mapY);
        line(0, 0, mapX+20, mapY-20);
        line(0, 0, mapX+80, mapY+80);
        line(0, 0, map-140, mapY+140);
        line(0, 0, mapX+200, mapY+200);

        stroke(255,215,0); //gold
        line(0, 0, mapX*1, mapY*1);
        line(0, 0,  mapX*1.5, mapY*1.5);
        line(0, 0,  mapX*2, mapY*2);
        line(0, 0,  mapX*0.5, mapY*0.5);
        line(0, 0,  mapX, mapY*1.5);
        line(0, 0, mapX*1.5, mapY);

        stroke(255,69,0); //orange red
        line(0, 0, mapX-50, mapY+20);
        line(0, 0, mapX+200, mapY);
        line(0, 0, mapX-30, mapY+55);
        line(0, 0, mapX*0.2, mapY+100);
        line(0, 0, mapX-20, mapY+130);
        line(0, 0, mapX*1.4, mapY/1.2);

        //This part of the code draws a sun
    	strokeWeight(3);
    	stroke(255);
    	fill(249, 215, 28);
    	circle(0, 0, 70);  
    }    
}

During the process of my work, I thought of things that change their position or their colors all the time in real world and I came up with a small drawings of a flower, clouds, grass, sun and sky. I followed the idea that flowers grow and clouds move which made it easier to follow the procedures.

“Glitch Reality”

What do you think about when you hear the phrase “Glitch Reality”? Does a picture of a future world made out of robots and pixels pop up in your mind? Because for us glitch reality is not a future anymore but rather present, or reality as the name itself implies. British-Colombian artist Matthew Plummer-Fernández constructed a dimension variables sculpture called “Running Trophy” and the algorithms that generated that project were 3D prints software (SLS nylon), die, CNC-carved machining foam and black piano paint. This sculpture isn’t perfect since it contains chipped edges that were caused by the loss of data during the process of digitization and creation. In order to create the trophy, there was needed to be a 3D scanning of a running trophy which helped Plummer-Fernandez obtain all information about the shape of an object which later on was used to scale-up and create a trophy. The bulging shapes and the dents are what inspire me about this project since no human on planet Earth is perfect and this runner has its imperfections due to data loss which makes it flawed yet so humane at the same time. The creator’s artistic sensibilities manifest in the final form by adding life and beauty into the sculpture; many would assume that that nothing beautiful can be made using a 3D software due to chipped edges and simple design however simplicity is an art and the thought that a sculpture like that was made out of algorithm in the 3D software printing is simply unimaginable.

https://www.plummerfernandez.com/works/glitch-reality/

Matthew Plummer-Fernández, Glitch Reality – “Trophy Runner”, 2011

This imagine is of a sculpture from a Glitch Reality project called “Trophy Runner” that was made using a 3D printer software in 2011 by Matthew Plummer-Fernández.

Variable Faces

sketch

//Yanina Shavialenka
//Section B

var flipped = false;

var hairLength = 260;

var mouthShape = 0;
var mouthY = 350;
var mouthX = 330;
var mouthWidth = 105;
var mouthHeight = 70;

var eyeBrowsXL = 270;
var eyeBrowsXR = 390;
var eyeBrowsWidth = 90;
var eyeBrowsHeight = 40;
var eyebrowY = 235;
var rEyebrows = 82;
var gEyebrows = 60;
var bEyebrows = 7;

var rShirt = 107;
var gShirt = 142;
var bShirt = 35;

var rEyes1 = 0;
var gEyes1 = 0;
var bEyes1 = 255;

var rEyes2 = 30;
var gEyes2 = 144;
var bEyes2 = 255;

var earXR = 455;
var earXL = 203;
var earY = 283;
var earWidth =60;
var earHeight = 100;

var earringXL = 195;
var earringXR = 462;
var earringY = 325;
var earringWidth = 2;
var earringHeight = 15;

var earringLongXR = 458;
var earringLongXL = 191;
var earringLongY = 335;
var earringLongWidth = 10;
var earringLongHeight = 25;

var studSmallX = 478;
var studBigX= 472;
var studSmallY = 302;
var studBigY = 310;
var studSmallWidth = 4;
var studBigWidth = 6;
var studBSmallHeight = 4;
var studBigHeight = 6;

var faceX = 330;
var faceY = 250;
var faceWidth = 280;
var faceHeight = 330;

var  bangsXL = 250;
var bangsXR = 415;
var bangsY = 160;
var bangsWidth = 120;
var bangsHeight = 80;

var eyeXL = 270;
var eyeXR = 390;
var eyeY = 255;
var eyeWidth = 65;
var eyeHeight = 55;

var eyeXL1 = 270;
var eyeXR1 = 390;
var eyeY1 = 255;
var eyeWidth1 = 50;
var eyeHeight1 = 50;

var reflectionBigX = 273;
var reflectionBigY = 252;
var reflectionBigWidth = 8;
var reflectionBigHeight = 8;

var reflectionSmallX = 393;
var reflectionSmallY = 252;
var reflectionSmallWidth = 4;
var reflectionSmallHeight =4;

var glassesXL = 270;
var glassesXR = 390;
var glassesY = 255;
var glassesWidth = 90;
var glassesHeight = 80;

var noseX = 330;
var noseY = 315;
var noseWidth = 35;
var noseHeight = 40;

var tX1 = 280;
var tY1 = 450;
var tX2 = 325;
var tY2 = 500;
var tX3 = 280;
var tY3 = 500;

var tXX1 = 325;
var tYY1 = 500;
var tXX2 = 370;
var tYY2 = 450;
var tXX3 = 370;
var tYY3 = 500; 

var tXXX1 = 475;
var tYYY1 = 450;
var tXXX2 = 575;
var tYYY2 = 550;
var tXXX3 = 475;
var tYYY3 = 550;

var tXXXX1 = 175;
var tYYYY1 = 450;
var tXXXX2 = 70;
var tYYYY2 = 550;
var tXXXX3 = 175;
var tYYYY3 = 550;

var rectX1 = 370;
var rectX2 = 175;
var rectY = 450;
var rectWidth = 105;
var rectHeight = 150;

function setup() {
   createCanvas(640, 480);
   background(65, 105, 225);
   text("p5.js vers 0.9.0 test.", 10, 15);  
}

function draw() {
   background(5, 105, 225);
   noStroke(30, 144, 255);
   fill(30, 144, 255);
   rect(width/8-30, height/10+2, width-100, height-100);

   noStroke();
   fill(100, 149, 237, 130);
   rect(width/6.4, height/4.8, width-200, height-200);

   noStroke();
   fill(135, 206, 250, 50);
   rect(width/4-10, height/3-10, width-300, height-300);

   noStroke();
   fill(176, 196, 222, 50);
   rect(width/4+4*10, height/2-4*10, width-400, height-400);

   noStroke();
   fill(240, 248, 255, 20);
   rect(width/2-10*2, height/2-10*2, width-500, height-440);

   //Hair
   noStroke();
   fill(160, 82, 45);
   rect(width/5+30, height/2-10*4, width-300, hairLength);
   ellipse(width/2+8, height/3+10*3, width-300, height-200);

   //Neck
   noStroke();
   fill(255, 218, 185);
   rect(width/2-10*4+2, height-10*8, width/8+10, height/4.8);

   //Ears
   stroke(1);
   fill(255, 218, 185);
   arc(earXR, earY, earWidth, earHeight, PI, PI, CHORD);
   arc(earXL, earY, earWidth, earHeight, PI, PI, CHORD);

   //Earrings
   stroke(1);
   fill(211, 211, 211);
   rect(earringXL, earringY, earringWidth, earringHeight);
   rect(earringXR, earringY, earringWidth, earringHeight);
   fill(192, 192, 192);
   ellipse(width/4+36, height/1.5, width/64, height/48);
   ellipse(width/1.6+10*6+3, height/1.5, width/64, height/48);
   rect(earringLongXL, earringLongY, earringLongWidth, earringLongHeight);
   rect(earringLongXR, earringLongY, earringLongWidth, earringLongHeight);

   //studs
   ellipse(studBigX, studBigY, studBigWidth, studBigHeight);
   ellipse(studSmallX, studSmallY, studSmallWidth, studBSmallHeight);

   //Face
   stroke(1);
   fill(255, 218, 185);
   ellipse(faceX, faceY, faceWidth, faceHeight);

   //Hair(Bangs)
   noStroke();
   fill(160, 82, 45);
   ellipse(330, 130, 200, 150);
   ellipse(bangsXL, bangsY, bangsWidth, bangsHeight);
   ellipse(bangsXR, bangsY, bangsWidth, bangsHeight);

   //Eyes(Shape)
   stroke(1);
   fill(255, 255, 255);
   ellipse(eyeXL, eyeY, eyeWidth, eyeHeight);
   ellipse(eyeXR, eyeY, eyeWidth, eyeHeight);

   //Eyes(Color)
   noStroke();
   fill(rEyes1, gEyes1, bEyes1, 170);
   ellipse(eyeXL1, eyeY1, eyeWidth1, eyeHeight1);
   ellipse(eyeXR1, eyeY1, eyeWidth1, eyeHeight1);

   //Eyes(Color)
   noStroke();
   fill(rEyes2, gEyes2, bEyes2, 100);
   ellipse(eyeXL1, eyeY1, eyeWidth1-15, eyeHeight-15);
   ellipse(eyeXR1, eyeY1, eyeWidth1-15, eyeHeight1-15);

   //Eyes(Pupils)
   noStroke();
   fill(0, 0, 0);
   ellipse(eyeXL1, eyeY1, eyeWidth1-15*2, eyeHeight1-15*2);
   ellipse(eyeXR1, eyeY1, eyeWidth1-15*2, eyeHeight1-15*2);

   //Eyes(Reflection)
   noStroke();
   fill(255, 255, 255);
   ellipse(reflectionBigX, reflectionBigY, reflectionBigWidth, reflectionBigHeight);
   ellipse(reflectionBigX+6, reflectionBigY+6, reflectionSmallWidth, reflectionSmallHeight);
   ellipse(reflectionSmallX, reflectionSmallY, reflectionBigWidth, reflectionBigHeight);
   ellipse(reflectionSmallX+6, reflectionSmallY+6, reflectionSmallWidth, reflectionSmallHeight);

   //Eyebrows
   fill(rEyebrows, gEyebrows, bEyebrows);
   arc(eyeBrowsXL, eyebrowY, eyeBrowsWidth, eyeBrowsHeight, PI, PI + HALF_PI + QUARTER_PI, CHORD);
   arc(eyeBrowsXR, eyebrowY, eyeBrowsWidth, eyeBrowsHeight, PI + QUARTER_PI, 2*PI, CHORD);

   //Glassses
   stroke(1);
   fill(240, 248, 255, 100);
   ellipse(glassesXL, glassesY, glassesWidth, glassesHeight);
   ellipse(glassesXR, glassesY, glassesWidth, glassesHeight);

   line(width/2-5, height/2+5*3, width/2+5*5, height/2+5*3);
   line(width/1.6+5*7, height/2+5*3, width/1.6+10*7, height/2);
   line(width/2.5-3*10-2, height/2+5*3, width/4+3*10+1, height/2-1);

   //Mouth
   noStroke();
   fill(205, 92, 92);
   arc(mouthX, mouthY, mouthWidth, mouthHeight, mouthShape, mouthShape+PI, CHORD);

   //Nose
   noStroke();
   fill(228, 167, 187);
   arc(noseX, noseY, noseWidth, noseHeight, PI, 2*PI, PIE);

   //Tshirt
   stroke(1);
   fill(rShirt,gShirt,bShirt);
   line(width/2-10*4, height-10*3, width/2+5, height+20);
   line(width/2+5, height+20, width/2+5*10, height-10*3);
   line(width/2-10*4, height-10*3, width/4+5*3, height-10*3);
   line(width/4+5*3, height-10*3, width/8 + 2*5, height*1.1+30);
   line(width/2+5*10, height-10*3, width-165, height-10*3);
   line(width-165, height-10*3, width-3*20, height*1.1 + 2*13);
   
   noStroke();
   triangle(tX1, tY1, tX2, tY2, tX3, tY3);
   triangle(tXX1, tYY1, tXX2, tYY2, tXX3, tYY3);
   triangle(tXXX1, tYYY1, tXXX2, tYYY2, tXXX3, tYYY3);
   triangle(tXXXX1, tYYYY1, tXXXX2, tYYYY2, tXXXX3, tYYYY3);
   rect(rectX1, rectY, rectWidth, rectHeight);
   rect(rectX2, rectY, rectWidth, rectHeight);

}

function mousePressed() {
   hairLength = random(100, 280);

   flipped =! flipped; 
      if(flipped) {
         mouthShape += PI;
         mouthY = 380;
      }
      else {
        mouthShape -= PI;
        mouthY = 350;
      }
      
   rShirt = random(255);
   gShirt = random(255);
   bShirt = random(255);

   rEyes1 = random(255);
   gEyes1 = random(255);
   bEyes1 = random(255);

   rEyes2 = random(255);
   gEyes2 = random(255);
   bEyes2 = random(255);

   rEyebrows = random(255);
   gEyebrows = random(255);
   bEyebrows = random(255);

   eyebrowY = random(210, 245);
}

I used my Self-Portrait from the previous assignment to make this Face Variables such as I randomly change the length of the hair, color of the eyes/eyebrows/shirt. The hardest part for me was to change the colors because I had trouble figuring out how it works.

“Body Paint”

Uniqueness – something that every living and nonliving object possesses. Every fingerprint, every snowflake, every grain of sand is unique. Our every action or thought somehow, even by little, is very different from the actions or thoughts of another person.  An artist and computer scientist from Istanbul, Memo Atkins, created an interactive visual piece known as “Body Paint” that uses motions made by people and transforms them into paint of certain color on an interactive canvas: “Different aspects of the motion – size, speed, acceleration, curvature, distance all have an effect on the outcome – strokes, splashes, drips, spirals – and is left up to the users to play and discover” said Memo Atkins in 2009. I admire this artist due to his vision of the world – his biggest inspiration is studying the nature of  nature. He gets inspiration to create from very little and random things such as the nuclear fusion in the heart of the sun or the photosynthesizing organisms that bring everything to life. He created “Body Paint” for people to paint on interactive canvas and not a single painting was the same – every action was different due to its speed or size of a person which makes it so beautiful. Memo Atkins uses artificial intelligence and computational creativity, maybe a language like p5.js, to generate his creative works. Memo’s artistic sensibilities play the biggest role in his algorithm because he creates it for people to have fun, he always makes sure that his new creation is something that others will enjoy. 

http://www.digiart21.org/art/body-paint

Memo Atkins, “Body Paint”, 2009