Interactive Self Portrait

Computational Media

PLAY WITH ME — Move the mouse around and click for a wink! Refresh for a fresh choker.

http://alpha.editor.p5js.org/amena91/sketches/HkN9-Ks9W

Inspired by this photo of me 🙂

Changes to my code: 

[Please visit the post:

SELF PORTRAIT IN P5.JS!

for a refresher on my earlier code]

  • Surprise choker colour every time the sketch is run:

let c1;
let c2;
let c3;

function setup() {
createCanvas(800, 690);
c1= random(0,255);
c2= random(0,255);
c3= random(0,255);

//Choker [PLACED IN FUNCTION DRAW()]
noFill();
strokeWeight(30);
stroke(c1,c2,c3);
arc(376, 618, 155, 20, 0, PI);


  • Fading the background and dancing stars from black to while inversely:

let sinval = sin(angle/10);
let sky = map(sinval, -1, 1, 0, 255);
let stars = map(sinval, -1, 1, 255, 0);
background(sky);
angle += 0.1;


  • Making the eyes follow mouseX position without them leaving their socket

+

  • Creating a wink with one eye while the mouse is pressed:

via GIPHY

let eyeX2 = 439 + ((mouseX/width)*20);
let eyeX1 = 295 + ((mouseX/width)*20);

ellipse(305, 348, 54, 31);
ellipse(449, 348, 54, 31);
fill(0);
ellipse(eyeX1, 348, 30, 30);
ellipse(eyeX2, 348, 30, 30);

Here, to make the eyes follow the mouse X position without leaving the eye socket, the map function could’ve been used but I used pure math to solve the problem. I learned about map later into the exercise while fading the background.

Following the mouse position within the eye socket

 


if (mouseIsPressed)
{
noStroke();
fill(197,154,131);
ellipse(449,348,59,39);
strokeWeight(2);
stroke(0);
line(430,360,425,366);
line(437,364,437,373);
line(448,367,448,374);
line(459,364,466,372);
line(473,359,484,364);

noFill();
strokeWeight(7);
stroke(0);
arc(449,348,54,34,0,PI);
}
else
{ellipse(eyeX2,348,30,30);
}

 

Leave a Reply

Your email address will not be published. Required fields are marked *