Concept: As a first time coder, I wanted to include as many shapes as possible in my self-portrait to get the know-how of how they work. During the ideation process, two things very relevant to my personality stood out to me: a) that I see the inherent good in the world, assuming positive intentions to people. I thought a good metaphor to represent this would be to show the character “seeing the world through rose colored glasses”. Secondly, I wanted to show that experiencing loss and love is a normal part of human life but what matters is having the spirit of acknowledging the loss, still smiling and moving forward. That’s why I coded a heart and incorporated motion into it giving the effect that it is shattering but my character’s smile remains undefeated. The rainbow color background just adds another happy go lucky element to the sketch. This sketch is aspirational in some ways too as it tells me to not take things too seriously and to remember to smile more often.
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
//rainbow background
//violet: fill(148, 0, 211);
//indigo: fill(75, 0, 130);
//blue: fill(0, 0, 255);
//green: fill(0, 255, 0);
//yellow: fill(255, 255, 0);
//orange: fill(255, 127, 0)
//red: fill(255, 0 , 0);
fill(255, 0, 0);
rect(1, 0, 500, 30);
fill(255, 127, 0);
rect(1, 30, 500, 30);
fill(255, 255, 0);
rect(1, 60, 500, 30);
fill(0, 255, 0);
rect(1, 90, 500, 30);
fill(0, 0, 255);
rect(1, 120, 500, 30);
fill(75, 0, 130);
rect(1, 150, 500, 30);
fill(148, 0, 211);
rect(1, 180, 500, 30);
fill(255, 0, 0);
rect(1, 210, 500, 30);
fill(255, 127, 0);
rect(1, 240, 500, 30);
fill(255, 255, 0);
rect(1, 270, 500, 30);
fill(0, 255, 0);
rect(1, 300, 500, 30);
fill(0, 0, 255);
rect(1, 330, 500, 30);
fill(75, 0, 130);
rect(1, 360, 500, 30);
fill(75, 0, 130);
rect(1, 390, 500, 30);
fill("black");
stroke("green");
strokeWeight(2);
ellipse(200, 350, 250, 370);
fill("skyblue");
ellipse(200, 180, 155, 170);
fill("#F60959");
rect(160, 150, 30, 20);
rect(207, 150, 30, 20);
stroke("#FFEB3B");
strokeWeight(1);
line(191, 161, 207, 161);
line(160, 161, 134, 138);
line(238, 161, 268, 139);
fill("red");
strokeWeight(1);
stroke("red");
triangle(122, 306, 181, 307, 152, 351);
// Semi circles - Heart
arc(139, 307, 35, 50, PI, 0, OPEN);
arc(165, 307, 35, 50, PI, 0, OPEN);
//background
fill("rgb(248,71,102)");
// curve(176, 201, 176, 219, 237, 212, 248, 195);
arc(195, 220, 40, 40, 0, PI, CHORD);
fill("#A26B58");
strokeWeight(0);
ellipse(194, 98, 50, 30);
ellipse(159, 106, 50, 30);
ellipse(140, 125, 50, 30);
ellipse(226, 101, 50, 30);
ellipse(259, 110, 50, 30);
ellipse(271, 129, 50, 30);
ellipse(128, 145, 50, 30);
ellipse(121, 169, 50, 30);
ellipse(278, 150, 50, 30);
ellipse(281, 173, 50, 30);
let coordinates = "X:" + mouseX + " Y:" + mouseY;
text(coordinates, 10, 20);
}
A code that I am particularly proud of is using two arcs and a triangle to code the heart:
triangle(122, 306, 181, 307, 152, 351);
// Semi circles - Heart
arc(139, 307, 35, 50, PI, 0, OPEN);
arc(165, 307, 35, 50, PI, 0, OPEN);
My reflection from the self portrait is that I need to brush up on my geometry and revisit the PI system as I would just use trial and error for my arcs but knowing the radian system more precisely would have helped me code faster. Further, in the next iteration, I would like for the semi-circles of the heart and the triangle to come from opposite direction so that when the viewer sees the portrait first the heart is not visible but on interaction with the mouse, the elements come together and form the heart.