Tag: Project-01-Face

Project 1: My Self Portrait

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

function draw() {
    ears ();
    drawFace();
    noFill();
    drawMouth();
    drawTeeth();
    drawLip();
    eyeBallOne();
    eyeBallTwo();
}

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

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

function drawTeeth() {
    strokeWeight(3);
    stroke(255);
    line(105, 200, 135, 248);
    line(295, 200, 265, 248);
    line(135, 248, 165, 195);
    line(265, 248, 235, 195);
    line (165, 195, 200, 275);
    line (235, 195, 200, 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);
    bezier(50, 225, 50, 400, 350, 400, 350, 225);
    bezier(50, 225, 50, -50, 350, -50, 350, 225);
}

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 (250,150,50);
    let angle = atan2(mouseY - 150, mouseX - 250); // calculate arctangent //
    let x = 250 + 20*0.75*cos(angle);
    let y = 150 + 20*0.75*sin(angle);
    fill(150,150,0);
    circle (x,y,15);
}

function ears() {
    strokeWeight(5);
    let xValue = mouseX/width*255;
    let yValue = mouseY/width*255;
    let zValue = (xValue+yValue)/4;
    fill(xValue,yValue,zValue+120,100);
    ellipse (350,150,50.100);
    ellipse (50,150,50.100);
}

LO: My Inspiration

The technological art/game that I admire the most is the pokemon series, especially the first pokemon game ever – Pokemon red and blue. The first reason that I admire it the most is that it is first of its kind, a capture and collect JRPG game, and the second reason is that the developer secretly hid one easter egg inside the game which made the game super popular. The game itself is created and directed by Satoshi Tajiri using the C++ language on the gameboy platform, and according to the director, Tajiri himself, the game was influenced by another JRPG game called The Final Fantasy Legend. Because of the unexpected popularity that the game received due to its unique gameplay, art style, and merchandise, the team is able to create dozens of its squeals even till today.

Project 01

Self-Portrait

sketchDownload
// Ilia Urgen
// Section B

function setup() {
    createCanvas (1000, 1000);     //width is 1000, height is 1000
    background (164,244,255);       //Dark Tan canvas background          
}                                   
                                    
function draw() {                   
    

    //text
    stroke (0);
    strokeWeight (10);

    line (100,40,40,40);
    line (40,40,40,70);
    line (100,70,40,70);
    line (100,100,100,70);
    line (100,100,40,100);

    line (140,40,200,40);
    line (140,40,140,100);
    line (140,100,200,100);
    line (140,70,200,70);

    line (240,40,240,100);
    line (240,100,300,100);

    line (340,40,340,100);
    line (340,40,400,40);
    line (340,70,400,70);

    line (440,70,500,70);

    line (140,140,200,140);
    line (140,140,140,200);
    line (140,170,200,170);
    line (200,140,200,170);

    line (240,140,300,140);
    line (240,140,240,200);
    line (300,140,300,200);
    line (300,200,240,200);

    line (340,140,340,200);
    line (340,140,400,140);
    line (340,170,400,170);
    line (400,140,400,170);
    line (400,200,340,170);

    line (440,140,500,140);
    line (470,140,470,200);

    line (540,140,600,140);
    line (540,140,540,200);
    line (540,170,600,170);
    line (600,170,600,140);
    line (600,200,540,170);

    line (640,140,700,140);
    line (640,140,640,200);
    line (700,140,700,200);
    line (640,170,700,170);

    line (740,140,800,140);
    line (770,140,770,200);
    line (740,200,800,200);

    line (840,140,900,140);
    line (870,140,870,200);

    line (940,140,940,180);
    point (940,200);


    line (780,870,840,870);
    line (810,810,810,870);
    line (780,810,840,810);

    line (880,870,940,870);
    line (940,870,940,810);
    line (880,870,880,810);


    //neck outline
    noStroke();
    fill (243,207,187);
    rect (375,850,250,150);        
    
    //face outline
    noStroke();                               
    fill (243,207,187);                        
    ellipse (500,600,480,660);     

    //left ear
    arc (245,620,80,160,PI + HALF_PI,PI + HALF_PI);  
    
    //right ear
    arc (755,620,80,160,PI + HALF_PI,PI + HALF_PI);  


    //left eye
    fill (0,0,0);
    ellipse (400,575,110,60);  
    fill (255,255,255);
    ellipse (400,575,90,60); 
    fill (102,51,0);
    ellipse (400,575,60,60);
    fill (0,0,0);
    ellipse (410,575,12,12);
    fill (255,255,255);
    ellipse (413,575,5,5);

    //right eye
    fill (0,0,0);
    ellipse (600,575,110,60);
    fill (255,255,255);
    ellipse (600,575,90,60);
    fill (102,51,0);
    ellipse (600,575,60,60);
    fill (0,0,0);
    ellipse (610,575,12,12);
    fill (255,255,255);
    ellipse (613,575,5,5);

    //nose
    fill (240,190,180);
    triangle (450,700,500,540,550,700);
    
    //t-shirt                                                              
    fill (187,0,0);                                              
    quad (375,920,200,1000,800,1000,625,920);

    //t-shirt letters
    stroke (255);
    strokeWeight (6);

    //C
    line (395,940,445,940);
    line (395,940,395,980);
    line (395,980,445,980);

    //M
    line (475,940,475,980);
    line (475,940,500,980);
    line (500,980,525,940);
    line (525,940,525,980);

    //U
    line (555,940,555,980);
    line (555,980,605,980);
    line (605,980,605,940);

    //left eyebrow
    strokeWeight (30);
    stroke (55,39,45);
    arc (400,518,120,30,PI,0);

    //right eyebrow
    strokeWeight (30);
    stroke (55,39,45);
    arc (600,518,120,30,PI,0);

    //glasses
    noFill();
    strokeWeight (8);
    stroke (212,175,55);
    noFill ();
    ellipse (400,575,150,130);
    ellipse (600,575,150,130);
    arc (500,570,52,50,PI,0);
    line (400,510,600,510);
    line (244,535,340,535);
    line (660,535,754,535);

    //teeth
    fill (255);
    stroke (255);
    ellipse (500,790,105,40);

    //mouth
    noFill();
    strokeWeight (35);
    stroke (193,104,115);
    arc (500,800,140,30,0, PI);
    arc (500,780,140,30,PI,0);

    //facial hair
    stroke (55,39,45);
    strokeWeight (2);
    
    line (434,718,412,753);
    line (437,718,416,752);
    line (440,718,420,751);

    line (443,716,424,750);
    line (446,716,428,749);
    line (449,716,432,748);

    line (452,714,436,747);
    line (455,714,440,746);
    line (458,714,444,745);

    line (461,712,448,744);
    line (464,712,452,743);
    line (467,712,456,742);

    line (470,710,460,741);
    line (473,710,464,740);
    line (476,710,468,740);

    line (479,710,472,740);
    line (482,710,476,740);
    line (485,710,480,740);

    line (488,710,484,740);
    line (491,710,488,740);
    line (494,710,492,740);

    line (497,710,496,740);
    line (500,710,500,740);
    line (503,710,504,740);

    line (506,710,508,740);
    line (509,710,512,740);
    line (512,710,516,740);

    line (515,710,520,740);
    line (518,710,524,740);
    line (521,710,528,740);

    line (524,710,532,740);
    line (527,710,536,740);
    line (530,710,540,741);

    line (533,712,544,742);
    line (536,712,548,743);
    line (539,712,552,744);

    line (542,714,556,745);
    line (545,714,560,746);
    line (548,714,564,747);

    line (551,716,568,748);
    line (554,716,572,749);
    line (557,716,576,750);

    line (560,718,580,751);
    line (563,718,584,752);
    line (566,718,588,753);

    //face lines
    arc (240,625,30,100,HALF_PI, PI + HALF_PI);
    arc (760,625,30,100,PI + HALF_PI, HALF_PI);
    arc (500,875,100,30,PI,0);

    //hair

    strokeWeight (20);

    curve(300, 20, 290, 510, 500, 270, 970, 630);
    curve(270, 630, 500, 270, 700, 510, 540, 270);

    curve(300, 70, 290, 510, 500, 276, 970, 600);
    curve(270, 600, 500, 276, 700, 510, 300, 70);

    curve(300, 70, 290, 510, 500, 270, 970, 600);
    curve(270, 600, 500, 270, 700, 510, 300, 70);

    curve(300, 470, 290, 510, 500, 282, 970, 570);
    curve(270, 570, 500, 282, 710, 510, 300, 470);

    curve(100, 470, 290, 510, 500, 270, 970, 570);
    curve(270, 570, 500, 270, 710, 510, 370, 470);

    curve(300, 870, 280, 510, 500, 288, 970, 540);
    curve(270, 540, 500, 288, 720, 510, 300, 870);

    curve(300, 870, 280, 510, 500, 270, 970, 540);
    curve(270, 540, 500, 270, 720, 510, 300, 870);

    curve(300, 1070, 290, 510, 500, 294, 970, 540);
    curve(270, 540, 500, 294, 710, 510, 330, 1070);

    curve(300, 1070, 300, 510, 500, 294, 970, 540);
    curve(270, 540, 500, 294, 710, 510, 320, 1070);

    curve(300, 1070, 290, 510, 500, 270, 970, 540);
    curve(270, 540, 500, 270, 710, 510, 300, 1070);

    curve(300, 1370, 290, 510, 500, 270, 970, 540);
    curve(270, 540, 500, 270, 710, 510, 200, 1370);

    curve(500, 1070, 280, 510, 500, 300, 970, 540);
    curve(270, 540, 500, 300, 720, 510, 300, 1070);

    curve(500, 1070, 280, 510, 500, 270, 970, 540);
    curve(270, 540, 500, 270, 720, 510, 250, 1070);

    curve(700, 1070, 290, 500, 500, 306, 970, 540);
    curve(270, 540, 500, 306, 710, 500, 300, 1270);

    curve(700, 1070, 290, 500, 500, 270, 970, 540);
    curve(270, 540, 500, 270, 710, 500, 200, 1270);

    curve(700, 1070, 280, 500, 500, 312, 970, 540);
    curve(270, 540, 500, 312, 710, 500, 300, 1270);

    curve(700, 1070, 280, 500, 500, 270, 970, 540);
    curve(270, 540, 500, 270, 710, 500, 300, 1270);

    curve(700, 1070, 290, 500, 500, 318, 970, 540);
    curve(270, 540, 500, 318, 720, 500, 300, 1270);

    curve(700, 1070, 290, 500, 500, 270, 970, 540);
    curve(270, 540, 500, 270, 720, 500, 300, 1270);

    curve(200, 1070, 290, 500, 500, 306, 970, 540);
    curve(270, 540, 500, 306, 710, 500, 500, 1270);

    curve(100, 1070, 290, 500, 500, 326, 970, 540);
    curve(270, 540, 500, 306, 710, 500, 600, 1270);

    curve(500, 1070, 290, 500, 500, 306, 970, 540);
    curve(270, 540, 500, 306, 710, 500, 700, 1270);

    curve(50, 1070, 290, 500, 500, 306, 970, 540);
    curve(270, 540, 500, 306, 710, 500, 800, 1270);

    curve(0, 1070, 290, 500, 500, 306, 970, 540);
    curve(270, 540, 500, 306, 710, 500, 900, 1270);

    curve(0, 470, 290, 500, 500, 306, 970, 540);
    curve(270, 540, 500, 306, 710, 500, 900, 470);
    
    curve(0, 470, 290, 500, 500, 306, 970, 540);
    curve(270, 540, 500, 306, 710, 500, 900, 570);

    curve(0, 270, 290, 500, 500, 326, 970, 540);
    curve(270, 540, 500, 326, 710, 500, 900, 670);

    noLoop();
}

Project 1: My Self Portrait

Self Portrait
function setup() {
    createCanvas(500, 500);
    background(93,232,113);
}

function draw() {
    fill(0);
    rect(150,140,200,250);     //hair back

    fill(253,227,220);
    strokeWeight(0);
    ellipse(width/2,height/2,150,200);    //face

    fill(0);
    rect(150,150,200,60);    //hair 

    fill(225,199,190);
    triangle(250,250,240,300,260,300);    //nose

    strokeWeight(5);
    stroke(239,94,94);
    noFill();
    arc(250, 310, 40, 40, QUARTER_PI, PI);    //smile.  I feel like i can do a circle and the cover the top


    fill(245,249,255); 
    strokeWeight(0);
    ellipse(220,250,40,20);    //eye left
    ellipse(280,250,40,20);    // eye right

    fill(127,71,42);
    strokeWeight(0);
    ellipse(220,250,15);   //pupil left
    ellipse(280,250,15);    // pupil right 

    fill(253,227,220);
    rect(200,237,40,10);    //lid left
    rect(260,237,40,10);    //lid right

    fill(10)
    rect(200,235,40,2);   //eyebrow left
    rect(260,235,40,2);    //eyebrow right

    fill(93,232,113)
    triangle(220,100,50,100,70,300);
    triangle(500-220,100,500-50,100,500-70,300);


    noLoop()
}