September 2022 – Page 35 – [OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice

Project 02: Variable Face

This project was challenging because it took a lot of trial and error. Commenting helped a lot when going back and forth between editing different things to match them up.

sketch

/*
    Joan Lee
    Section D

    Aspects of variability
        4 different expressions with mouse movement
        switching hair color each click
        different posture each click
        background changes every click
*/

var eyeSize = 20;
var faceWidth = 150;
var faceHeight = 180;
var shoulderHeight = 480;
var bodyColor = "white";
var on = false;
var r = 100;
var g = 74;
var b = 65;
var bgColor = 0;

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

function draw() {
    background(bgColor);

    //hair behind face
    if(on == true){
        fill(r, g, b);
    } else{
        fill(255 - r, 255 - g, 255 - b);
    }
    ellipse(width / 2, height / 2 + (faceHeight / 4), faceWidth + 50, 330);

    //person
    noStroke();
    fill(bodyColor);
    ellipse(width / 2, height, 170, shoulderHeight);    //body
    fill(250, 230, 180);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);     //head
   
    //eyes
    stroke(0);
    strokeWeight(1);
    fill("white");
    var eyeLX = width / 2 - faceWidth / 4;
    var eyeRX = width / 2 + faceWidth / 4;
    var x = constrain(mouseX, 20, 35);  //eyes getting bigger with mouse moving right
    circle(eyeLX, height / 2, x);
    circle(eyeRX, height / 2, x);   //whites of eyes
    fill(63, 35, 11);
    circle(eyeLX + 1, height / 2, 5);
    circle(eyeRX - 1, height / 2, 5);   //pupils considering interpupillary distance

    //nose
    noFill();
    stroke(205, 179, 156);  //shadow
    strokeWeight(1);
    beginShape();
    curveVertex(width / 2 + 5, height / 2 + 10);
    curveVertex(width / 2 + 5, height / 2 + 10);
    curveVertex(width / 2, height / 2 + 20);
    curveVertex(width / 2 - 5, height / 2 + 10);
    curveVertex(width / 2 - 5, height / 2 + 10);
    endShape();
    
    //mouth
    strokeWeight(4);
    stroke(255, 200, 200);
    fill(0);
    var x1 = constrain(mouseX, 1, 40);
    ellipse(width / 2, height / 2 + 50, 60, x1);    //making mouth bigger with mouse placement
    
    //bangs
    noStroke();
    if(on == true){
        fill(r, g, b);
    } else{
        fill(255 - r, 255 - g, 255 - b);
    }
    arc(width / 2, height / 2 - faceHeight / 6, faceWidth + 10, faceHeight - 30, PI, 0);

    //eyebrows
    fill(73, 45, 35);
    var y = constrain(mouseY, height / 2 - 50, height / 2 - 30);
    rect((width / 2) - (faceWidth / 3), y, 30, 5);      
    rect((width / 2) + (faceWidth / 8), y, 30, 5);  //raised vs furrowed eyebrows with mouse moving up or down
}

function mousePressed() {
    bgColor = random(0, 255);
    faceWidth = random(110, 160);
    faceHeight = random(160, 200);
    shoulderHeight = random(330, 450);
    if(on == true){     //changing hair color each click
        on = false;
    } else{
        on = true;
    }
}

function mousePressed() {
// when the user clicks, these variables are reassigned
// to random values within specified ranges
faceWidth = random(75, 150);
faceHeight = random(100, 200);
eyeSize = random(10, 30);
faceColor = fill(random(140, 255));
pupilSize = random(5, 8);
}

Looking Outwards 02

https://n-e-r-v-o-u-s.com/index.php

The project and business “Nervous System” is created by cofounders Jessica Rosenkrantz and Jesse Louis-Rosenberg, who were studying at Harvard, and MIT, respectively when they began their generative design company, which designs puzzles, jewelry, and lampshades using computer-generated designs. I was specifically drawn to this project because of how they approached it in a very architectural manner, and coincidentally Jessica was studying for her Masters’s in Architecture at Harvard’s GSD when she created Nervous System. I’m very drawn to the organic and biological quality of the computer-generated forms which they use in all their works, specifically the jewelry. Additionally, the fact that their art is for sale at relatively reasonable prices (for handmade wooden puzzles and silver jewelry) is really inspiring, because not only did they choose a super exploratory and playful field (as opposed to architecture), they are actually making a living off of it. This lively exploration of biomimicry as a precedent for shape and form in relation to computer science is, to me, clearly her chosen artistic style, seeing as Jessica is the lead artist and also studied biology as an undergrad. The algorithm that is used to create these forms is undoubtedly designed to prioritize and create these natural forms, and while the shapes are all seemingly random, it is clear that a lot of technical effort has been put into making the forms cohesive.

Blog-02

I admire Mieke Marple’s personal connection to her generative art. She made a set of 2,500 NFTs called the “Medusa Collection”. The works are colorful sketch-like portraits of Medusa with rough brush layering. 25% of all the sales go to Steven Van Zandt’s national eduction profit, TeachRock.org. With a background in art school, acrylic, and colored metal leaf, Mieke had an existing style to bring to generative art. Mieke writes that watching data turn into beautiful hallucinations is reflective of what it is to be a human in the 21st century and the question of where the line is between human and computer brains.

Mieke created 6 Photoshop files for each head type, each with approximately 70 layers. Her algorithm then randomly chose a layer from each category to make the Medusa. The collection is selected out of 5.8 billion possible outputs.
Because of troubleshooting and permutations, Mieke had to leave the algorithm to do its thing and trust her intuition. Mieke considers that, “every one of the 2,500 Medusa NFTs was a very real extension of my physical body.”

https://www.artsy.net/article/artsy-editorial-making-generative-art-changed-understanding

Variable Face project 02

For this project, I wanted to make something cuter than last week’s face, so I mapped everything out in illustrator and then translated the shapes to js. This workflow was much more efficient and allowed me to create cartoon facial expressions since I wasn’t focused on generating the coordinates or RGB codes for every shape. Unfortunately wordpress cuts a bit of the right side off 🙁

sketch

// hfroling Hazel Froling Section C *\

    
    var r=170;
    var g=204;
    var b=170;
    var x= 300;
    var dir= 1;
    var speed= 5;
    var mouth= 1;
    

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

function mousePressed() {
    mouth += 1;
    if ( mouth > 3) {
        mouth = 1;        
    }
}

function draw() {

    if (mouth == 1) {
        background(r, g, b);
        fill(107,77,38); //hair color
        strokeWeight(0);
        rect(111,168,374,329,45); //hair back
        fill(57,91,63); //green shirt
        rect(94,509,411,168,100); //shirt rect
        fill(244,212,189); //skin color
        stroke(168,125,80) // neck line color
        strokeWeight(2); //neck stroke
        rect(244,422,120,127,50); //neck
        ellipse(478,286,60); //right ear
        ellipse(120,286,60);  //left ear
        rect(130,130,340,340,150); //face
        fill(182,95,65); //mouth fill
        ellipse(300,394,104,85); //mouth
        strokeWeight(0);
        fill(244,212,189); //skin color
        rect(220,334,160,52) //above mouth cover
        stroke(168,125,80) //skin line color
        strokeWeight(2); //2pt stroke
        fill(255); //white
        rect(248,386,104,11); //teeth
        fill(244,212,189); //skin color
        ellipse(303,335,41,26); //nose
        strokeWeight(0);
        rect(254,307,52,63); //nose cover
        fill(96,57,19); //eye liner brown
        ellipse(218,279,91,83); //eye liner shape left
        ellipse(381,279,91,83); //eye liner shape right
        fill(255); //white
        ellipse(222,280,88,83); //left eye white 
        fill(119,119,75); // green iris
        ellipse(222,280,52,49); //left eye iris
        fill(0); //black pupil
        ellipse(222,280,31,29); //left eye pupil
        fill(255); //white glint
        ellipse(232,272,10,17); //left glint
        fill(255); //white
        ellipse(377,280,88,83); //right eye white 
        fill(119,119,75); // green iris
        ellipse(377,280,52,49); //right eye iris
        fill(0); //black pupil
        ellipse(377,280,31,29); //right eye pupil
        fill(255); //white glint
        ellipse(387,272,10,17); //right glint
        fill(244,212,189); //skin color
        ellipse(201,324,133,83); // left cheek cover
        ellipse(402,324,133,83); // right cheek cover
        fill(242,200,189); //cheek color
        ellipse(203,338,107,83); //left cheek
        ellipse(396,338,107,83); //right cheek
        fill(96,57,19); //eye liner brown
        triangle(165,280,174,279,173,286); //left lower lash
        triangle(168,273,175,273,174,278); //left upper lash
        triangle(435,280,426,279,426,285); //right lower lash
        triangle(425,273,425,278,431,273); //right upper lash
        fill(107,77,38); //hair color
        ellipse(300,140,300,83); //top of hair
        ellipse(139,202,57,115); //left of hair
        ellipse(459,202,57,115); //right of hair
        ellipse(213,165,180,105); //left bangs
        ellipse(385,165,180,105); //right bangs
    }
    if (mouth == 2) {
        background(221,168,181);
        fill(107,77,38); //hair color
        strokeWeight(0);
        rect(111,168,374,329,45); //hair back
        fill(57,91,63); //green shirt
        rect(94,509,411,168,100); //shirt rect
        fill(244,212,189); //skin color
        stroke(168,125,80) // neck line color
        strokeWeight(2); //neck stroke
        rect(244,422,120,127,50); //neck
        ellipse(478,286,60); //right ear
        ellipse(120,286,60);  //left ear
        rect(130,130,340,340,150); //face
        fill(182,95,65); //mouth fill
        ellipse(300,394,104,85); //mouth
        strokeWeight(0);
        fill(244,212,189); //skin color
        rect(220,344,160,57); //above mouth cover
        stroke(168,125,80); //skin line color
        strokeWeight(2); //2pt stroke
        line(249,400,351,400); //top lip
        fill(244,212,189); //skin color
        ellipse(303,335,41,26); //nose
        strokeWeight(0);
        rect(254,307,52,63); //nose cover
        fill(96,57,19); //eye liner brown
        ellipse(218,279,91,83); //eye liner shape left
        ellipse(381,279,91,83); //eye liner shape right
        fill(255); //white
        ellipse(224,280,82,83); //left eye white 
        fill(119,119,75); // green iris
        ellipse(222,275,52,49); //left eye iris
        fill(0); //black pupil
        ellipse(222,275,31,29); //left eye pupil
        fill(255); //white glint
        ellipse(232,272,10,17); //left glint
        fill(255); //white
        ellipse(375,280,82,83); //right eye white 
        fill(119,119,75); // green iris
        ellipse(377,275,52,49); //right eye iris
        fill(0); //black pupil
        ellipse(377,275,31,29); //right eye pupil
        fill(255); //white glint
        ellipse(387,272,10,17); //right glint
        fill(244,212,189); //skin color
        ellipse(210,320,133,83); // left cheek cover
        ellipse(393,320,133,83); // right cheek cover
        fill(250,200,189); //cheek color
        ellipse(203,338,107,83); //left cheek
        ellipse(396,338,107,83); //right cheek
        fill(96,57,19); //eye liner brown
        triangle(165,280,174,279,173,286); //left lower lash
        triangle(168,273,175,273,174,278); //left upper lash
        triangle(435,280,426,279,426,285); //right lower lash
        triangle(425,273,425,278,431,273); //right upper lash
        fill(107,77,38); //hair color
        ellipse(300,140,300,83); //top of hair
        ellipse(139,202,57,115); //left of hair
        ellipse(459,202,57,115); //right of hair
        ellipse(213,165,180,105); //left bangs
        ellipse(385,165,180,105); //right bangs
        fill(221,168,181); // tounge color
        ellipse(300,450,44,39); //tounge shape
        fill(182,95,65); // mouth fill
        ellipse(300,418,63,33); //tounge cover
        strokeWeight(0);
        fill(124,54,36); //tonsil color
        ellipse(306,431,12,24) //right tonsil
        ellipse(294,431,12,24) //left tonsil
        fill(221,168,181); // tounge color
        rect(287,433,26,14); // tonsil cover
        strokeWeight(3);
        stroke(182,95,65); //tounge line color
        line(300,434,300,458) //tounge groove
        } else if (mouth == 3){ 
                background(200,200,255); //light blue
                fill(107,77,38); //hair color
                strokeWeight(0);
                rect(111,168,374,329,45); //hair back
                fill(57,91,63); //green shirt
                rect(94,509,411,168,100); //shirt rect
                fill(244,212,189); //skin color
                stroke(168,125,80) // neck line color
                strokeWeight(2); //neck stroke
                rect(244,422,120,127,50); //neck
                ellipse(478,286,60); //right ear
                ellipse(120,286,60);  //left ear
                rect(130,130,340,340,150); //face
                fill(244,212,189); //skin color
                ellipse(303,335,41,26); //nose
                strokeWeight(0);
                rect(254,307,52,63); //nose cover
                fill(96,57,19); //eye liner brown
                ellipse(218,279,91,83); //eye liner shape left
                ellipse(381,279,91,83); //eye liner shape right
                fill(255); //white
                ellipse(222,280,92,87); //left eye white 
                fill(119,119,75); // green iris
                ellipse(222,280,52,49); //left eye iris
                fill(0); //black pupil
                ellipse(222,280,31,29); //left eye pupil
                fill(255); //white glint
                ellipse(232,272,10,17); //left glint
                fill(255); //white
                ellipse(377,280,92,87); //right eye white 
                fill(119,119,75); // green iris
                ellipse(377,280,52,49); //right eye iris
                fill(0); //black pupil
                ellipse(377,280,31,29); //right eye pupil
                fill(255); //white glint
                ellipse(387,272,10,17); //right glint
                fill(244,212,189); //skin color
                ellipse(201,330,133,83); // left cheek cover
                ellipse(402,330,133,83); // right cheek cover
                fill(242,200,189); //cheek color
                ellipse(203,338,107,83); //left cheek
                ellipse(396,338,107,83); //right cheek
                fill(96,57,19); //eye liner brown
                triangle(165,280,174,279,173,286); //left lower lash
                triangle(168,273,175,273,174,278); //left upper lash
                triangle(435,280,426,279,426,285); //right lower lash
                triangle(425,273,425,278,431,273); //right upper lash
                fill(107,77,38); //hair color
                ellipse(300,140,300,83); //top of hair
                ellipse(139,202,57,115); //left of hair
                ellipse(459,202,57,115); //right of hair
                ellipse(213,165,180,105); //left bangs
                ellipse(385,165,180,105); //right bangs
                stroke(168,125,80); // neck line color
                strokeWeight(2);
                fill(182,95,65); //mouth fill
                ellipse(300,412,40,53); //round mouth
        }

    if (mouseX > width/2 & mouseY > height/2){
        strokeWeight(4);
        stroke(119,119,75); //stem green
        line(583,300,583,350); //stem
        fill(57,91,63); //dark green
        strokeWeight(0);
        rect(548,411,69,138,20); //arm
        fill(244,212,189); //skin color
        stroke(168,125,80); // skin line color
        strokeWeight(2); //neck stroke
        rect(584,335,21,60,20); //thumb
        rect(552,349,60,21,20); //top finger
        rect(552,369,60,21,20); //middle finger
        rect(552,390,60,21,20); //bottom finger
        strokeWeight(0);
        rect(583,350,21,60,20); //knuckle cover
        fill('white'); //petal color
        rect(583,292,19,19,19); //petal
        rect(564,292,19,19,19); //petal
        rect(559,275,19,19,19); //petal
        rect(573,266,19,19,19); //petal
        rect(588,275,19,19,19); //petal
        fill(255,206,0); //yellow color
        rect(573,281,19,19,19); //center petal
    }
    if( mouseX > width/2 & mouseY < height/2){
            strokeWeight(4);
            stroke(119,119,75); //stem green
            line(583,300,583,350); //stem
            fill(57,91,63); //dark green
            strokeWeight(0);
            rect(548,411,69,138,20); //arm
            fill(244,212,189); //skin color
            stroke(168,125,80); // skin line color
            strokeWeight(2); //neck stroke
            rect(584,335,21,60,20); //thumb
            rect(552,349,60,21,20); //top finger
            rect(552,369,60,21,20); //middle finger
            rect(552,390,60,21,20); //bottom finger
            strokeWeight(0);
            rect(583,350,21,60,20); //knuckle cover
            fill(240,230,255); //petal color
            rect(583,292,19,19,19); //petal
            rect(564,292,19,19,19); //petal
            rect(559,275,19,19,19); //petal
            rect(573,266,19,19,19); //petal
            rect(588,275,19,19,19); //petal
            fill('white'); //white
            rect(573,281,19,19,19); //center petal
        }
        if( mouseX < width/2 & mouseY > height/2){
            fill(57,91,63); //dark green
            strokeWeight(0);
            rect(548,411,69,138,20); //arm
            fill(244,212,189); //skin color
            stroke(168,125,80); // skin line color
            strokeWeight(2); //neck stroke
            rect(584,315,21,60,20); //thumb
            rect(552,349,60,21,20); //top finger
            rect(552,369,60,21,20); //middle finger
            rect(552,390,60,21,20); //bottom finger
            strokeWeight(0);
            rect(583,350,21,60,20); //knuckle cover

        }
            else if (mouseX < width/2 & mouseY < height/2){
            strokeWeight(0);
            fill(57,91,63); //dark green
            rect(548,411,69,138,20); //arm
            fill(244,212,189); //skin color
            stroke(168,125,80); // skin line color
            strokeWeight(2); //neck stroke
            rect(584,335,21,60,20); //thumb
            rect(552,349,60,21,20); //top finger
            rect(552,369,60,21,20); //middle finger
            rect(552,390,60,21,20); //bottom finger
            strokeWeight(0);
            rect(583,350,21,60,20); //knuckle cover
            fill('white'); //petal color
            rect(547,259,63,90,30); //bunny body
            rect(556,217,12,58,30); //bunny ear L
            rect(588,217,12,58,30); //buny ear r
            strokeWeight(4);
            stroke(0);
            fill(0);
            point(563,282); //bunny eyes
            point(592,282); //bunny eyes
            triangle(577,290,580,299,574,299); //bunny nose
            strokeWeight(2);
            line(577,299,577,308); //bun mouth
            line(577,308,583,312); //bun mouth
            line(577,308,569,312); //bun mouth
        }
}

Looking Outwards 2 – Generative Art

Title: Modular Lattice
Author: Marius Watz
Link: http://mariuswatz.com/2012/08/08/modular-lattice/

I am very interested in Marius Watz’ project called “Modular Lattice”, as I enjoy that it has a 3-dimensional component to it, unlike the typical 2-dimensional drawings. Being from an architecture background, I admire how these “forms” can almost be seen as structural. It would be interesting to see these 3D elements supporting buildings or even become the overall building form. I also admire that due to a change in set of parameters, these forms not only vary in the overall form, but the textile qualities (there seems to be various densities). Unfortunately I was not able to find much information on how these 3D elements are derived specifically, however with some knowledge in 3D generative modeling; I can assume that there are variables containing height, width, percentage of infill or number of faces that want to be generated in the final form. These variables can be changed or adjusted depending on specific parameters set. This perhaps allows an unlimited number of different generations of the form (however each are similar due to the same basic / standard elements). Marius Watz’ artistic sensibilities seem to manifest in the algorithm, as he tends to create very random and radially generated works. Therefore, there has to be something in the algorithm that connects to some origin point, with perhaps a randomizer function that allows unlimited possibilities but with parameters that the artist can set / control.

Looking Outwards: 02

Panoramical, a generative video game created by Fernando Ramallo and David Kanaga responds to the player’s movements to create an audiovisual experience that combines the worlds of both music and art. The game’s psychedelic experience gives nods to virtual reality and is mostly used now by DJ’s at music sets. Not only is this video game visually beautiful, but it is admirable for the endless mediums it can be used for. Music is often a personal experience for the consumer, so Panoramical pairs well with concerts, studying, virtual and augmented reality, or even something to just play around and get mesmerized in. It’s assumed that the algorithm relies on user touch interface to randomly generate different patterns for the visual element, and different rhythms and beats for the musical element. Ramallo wants the heart of the experience to be the multiple sensory abilities that can be created within the game. One can get absolutely lost in this interface, and a very personal element arises as the user creates an experience tailored for themselves, by themselves.

Project-02-Variable-Face

sketch


var eyeSize = 50;
var faceWidth = 300;
var faceHeight = 300;
var mouthSize=20;
var State= 0;

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

function draw() {
    background(180);
    fill (255,160,122);
    ellipse(width/2, height/2, faceWidth,  faceHeight);// face
    var eyeLX = width / 2 - faceWidth * 0.25;// x position of left eye
    var eyeRX = width / 2 + faceWidth * 0.25;// x position of right eye
    fill(255,255,255);
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);//left eye
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);//right eye
    fill(0,0,0);
    ellipse(eyeLX, height / 2, eyeSize/3, eyeSize/3);//left pupil
    ellipse(eyeRX, height / 2, eyeSize/3, eyeSize/3);//right pupil
    fill(255,0,0);
    var mouthX =width/2;
    var mouthY =height/2+0.25*faceHeight;
    ellipse(mouthX, mouthY, mouthSize, mouthSize);//mouth
    fill(139,69,19);
}

function mousePressed() {
State= int(random(1,4))
   if (State == 1) {
faceWidth= 200;
faceHeight= 400;
eyeSize= 70;
mouthSize=40;
mouthY=height/2+0.5*faceHeight;// surprise face
} else if (State == 2) {
faceWidth= 325;
faceHeight= 275;
eyeSize=30
mouthSize=10;//relaxed face 
} else {
faceWidth= 300;
faceHeight= 300;
eyeSize=50;
mouthSize=20// normal face
}
}

When I was designing the project, I was thinking about different states of facial expression and trying to show them in the product.

Looking Outwards 2

The project I’m choosing is Michael Hansmeyer’s Zauberflöte(2018), which is a stage design for Mozart’s Magic Flute. In my previous research about Hnsmeyer’s architectural design, I admire how he focused more on the process of generating design and the visual impact. And for this stage design specifically, Hansmeyer used the computer to generate countless details and constellations, which makes astonishing visual effects for the audience. The visual impact helps the audience directly sense the stage atmosphere. With the cooperation of actors, the audience will be able to gain novel spacial feelings about the show, using their own imagination to dig into the deeper core of the opera’s philosophical part.

Moving on to the algorithm that generated the work, Hansmeyer said that they “seek to create an architecture that defies classification and reductionism”. The algorithm runs continuously and forms a constant and holistic shape. The computer algorithm plays a major role in the design: with the organization of designers, the computer can bring some of the expected effects, while also bringing unexpected results with its own permutation.

here is a link: https://www.michael-hansmeyer.com/zauberfloete

Project 02 Variable Face

Variables:

The face changes color as u move your mouse.
Eyes and arms follows the mouse.
When mouse is pressed, the hands will grow fingers.

var mouse = false;

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

function draw() {
    background(220);
    drawFace();
    noFill();
    drawMouth();
    drawTeeth();
    drawLip();
    eyeBallOne();
    eyeBallTwo();
    handOne();
    handTwo();
}

function drawMouth() {
    strokeWeight(4);
    fill(255,0,0,255);
    curve(145, 250, 145, 200, 335, 200, 335, 250);
    curve(145, -400, 145, 200, 335, 200, 335, -400);
}

function drawLip() {
    strokeWeight(4);
    stroke(0);
    noFill();
    curve(145, 250, 145, 200, 335, 200, 335, 250);
    curve(145, -400, 145, 200, 335, 200, 335, -400);
}

function drawTeeth() {
    strokeWeight(3);
    stroke(255);
    line(145, 200, 175, 248);
    line(335, 200, 305, 248);
    line(175, 248, 205, 195);
    line(305, 248, 275, 195);
    line (205, 195, 240, 275);
    line (275, 195, 240, 275);
}

function drawFace() {
    strokeWeight(5);
    let xValue = mouseX/width*255;
    let yValue = mouseY/width*255;
    let zValue = (xValue+yValue)/4;
    fill(xValue,yValue,zValue+120);
    rect (100,100,280,320);
}

function eyeBallOne() {
    strokeWeight(4);
    fill(255,255,255);
    ellipse (150,150,50);
    let angle = atan2(mouseY - 150, mouseX - 150); // calculate arctangent //
    let x = 150 + 20*0.75*cos(angle);
    let y = 150 + 20*0.75*sin(angle);
    fill(255,0,255);
    circle (x,y,15);
}

function eyeBallTwo() {
    strokeWeight(4);
    fill(255,255,255);
    ellipse (330,150,50);
    let angle = atan2(mouseY - 150, mouseX - 250); // calculate arctangent //
    let x = 330 + 20*0.75*cos(angle);
    let y = 150 + 20*0.75*sin(angle);
    fill(150,150,0);
    circle (x,y,15);
}


function handOne() {
  var x = 100;
  var y = 420;
  var tan = atan2(mouseX-x,mouseY-y);
  if (dist (mouseX,mouseY,x,y) < 200)
    //if arm mouse is within arm distance//
  { var dis = dist (mouseX,mouseY,x,y) /2;
    // mid point of distance between mouse and arm//
    var num = (10000)-(dis*dis);
    var sid = sqrt(num);
    //pathegoriam therom//
    stroke (10);
    line (x,y, (mouseX-x)/2+x+cos(tan)*sid, (mouseY-y)/2+y-sin(tan)*sid);
    line ((mouseX-x)/2+x+cos(tan)*sid, (mouseY-y)/2+y-sin(tan)*sid, mouseX, mouseY);
    fill(255,255,255);
    ellipse ((mouseX-x)/2+x+cos(tan)*sid, (mouseY-y)/2+y-sin(tan)*sid, 25,25);
    if (mouse)
    {
        strokeWeight(5);
        line (mouseX, mouseY, mouseX+30, mouseY-30);
        line (mouseX, mouseY, mouseX-30, mouseY-30);
        line (mouseX, mouseY, mouseX, mouseY-60);
        ellipse (mouseX,mouseY,50,50);
    }
    else {
        ellipse (mouseX,mouseY,50,50);
    }
  }

  else
    {
        stroke(10);
        line (x,y, x+sin(tan)*200, y+cos(tan)*200);
        fill(255,255,255);
        ellipse (x+sin(tan)*100, y+cos(tan)*100, 25,25);
        if (mouse)
    {
        //hand//
        strokeWeight(5);
        line (x+sin(tan)*200, y+cos(tan)*200, x+sin(tan)*200+30, y+cos(tan)*200-30);
        line (x+sin(tan)*200, y+cos(tan)*200, x+sin(tan)*200-30, y+cos(tan)*200-30);
        line (x+sin(tan)*200, y+cos(tan)*200, x+sin(tan)*200, y+cos(tan)*200-60);
        //fingers//
        ellipse (x+sin(tan)*200, y+cos(tan)*200,50,50);
    }
    else {
        ellipse (x+sin(tan)*200, y+cos(tan)*200,50,50);
    }
    }
}

function handTwo() {
  var x = 380;
  var y = 420;
  var tan = atan2(mouseX-x,mouseY-y);
  if (dist (mouseX,mouseY,x,y) < 200)
    //if arm mouse is within arm distance//
  { var dis = dist (mouseX,mouseY,x,y) /2;
    // mid point of distance between mouse and arm//
    var num = (10000)-(dis*dis);
    var sid = sqrt(num);
    //pathegoriam therom//
    stroke (10);
    line (x,y, (mouseX-x)/2+x-cos(tan)*sid, (mouseY-y)/2+y+sin(tan)*sid); 
    //origin point to the medien of the triangle (isosceles)//
    line ((mouseX-x)/2+x-cos(tan)*sid, (mouseY-y)/2+y+sin(tan)*sid, mouseX, mouseY);
    fill(255,255,255);
    ellipse ((mouseX-x)/2+x-cos(tan)*sid, (mouseY-y)/2+y+sin(tan)*sid, 25,25);
    if (mouse)
    {
        strokeWeight(5);
        line (mouseX, mouseY, mouseX+30, mouseY-30);
        line (mouseX, mouseY, mouseX-30, mouseY-30);
        line (mouseX, mouseY, mouseX, mouseY-60);
        ellipse (mouseX,mouseY,50,50);
    }
    else {
        ellipse (mouseX,mouseY,50,50);
    }
  }

  else
    {
        stroke(10);
        line (x,y, x+sin(tan)*200, y+cos(tan)*200);
        fill(255,255,255);
        ellipse (x+sin(tan)*100, y+cos(tan)*100, 25,25);
    if (mouse)
    {
        strokeWeight(5);
        line (x+sin(tan)*200, y+cos(tan)*200, x+sin(tan)*200+30, y+cos(tan)*200-30);
        line (x+sin(tan)*200, y+cos(tan)*200, x+sin(tan)*200-30, y+cos(tan)*200-30);
        line (x+sin(tan)*200, y+cos(tan)*200, x+sin(tan)*200, y+cos(tan)*200-60);
        ellipse (x+sin(tan)*200, y+cos(tan)*200,50,50);
    }
    else {
        ellipse (x+sin(tan)*200, y+cos(tan)*200,50,50);
    }
    }
}


function mousePressed() {
    mouse =!mouse;
    // when pressed show fingers//
}