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);
}

Leave a Reply