Category: Project Week 1

Hi all!

Here’s what I worked on for Project 1. I was inspired by some of the driving concepts behind pointillism and used them to create a perspectival view of my face. I decided to use a closely linked color palette to distort the image and allow for a varied interpretation between different people.

I recognize that the length of my code is a pretty significant issue – 711 lines is pretty excessive. I did some readings on types of loops that could potentially streamline this process, but had trouble getting there because I knew that the circles had to be different in size from one another. I’d love to revisit this project later in the semester once I’ve become well acquainted with some of the different methods to do this. I’d also be interested in creating a code that allows users to upload photographs that are then converted to images like the one below. If anyone has any ideas, leave a comment!

Warning: really long code ahead
 

hamza

function setup(){
  createCanvas(500, 500);
}

function draw(){
  background (0,0,150);
  //grid of circles!!
  fill(40,40,255);
  stroke(40,40,255)
  //column one!!
  ellipse(0,0,18,18);
  ellipse(0,20,18,18);
  ellipse(0,40,18,18);
  ellipse(0,60,18,18);
  ellipse(0,80,18,18);
  ellipse(0,100,18,18);
  ellipse(0,120,18,18);
  ellipse(0,140,18,18);
  ellipse(0,160,18,18);
  ellipse(0,180,18,18);
  ellipse(0,200,18,18);
  ellipse(0,220,18,18);
  ellipse(0,240,18,18);
  ellipse(0,260,18,18);
  ellipse(0,280,18,18);
  ellipse(0,300,18,18);
  ellipse(0,320,18,18);
  ellipse(0,340,18,18);
  ellipse(0,360,18,18);
  ellipse(0,380,18,18);
  ellipse(0,400,18,18);
  ellipse(0,420,18,18);
  ellipse(0,440,18,18);
  ellipse(0,460,18,18);
  ellipse(0,480,18,18);
  ellipse(0,500,18,18);
  //column two!!
  ellipse(20,0,18,18);
  ellipse(20,20,18,18);
  ellipse(20,40,18,18);
  ellipse(20,60,18,18);
  ellipse(20,80,18,18);
  ellipse(20,100,18,18);
  ellipse(20,120,18,18);
  ellipse(20,140,18,18);
  ellipse(20,160,18,18);
  ellipse(20,180,18,18);
  ellipse(20,200,18,18);
  ellipse(20,220,18,18);
  ellipse(20,240,18,18);
  ellipse(20,260,18,18);
  ellipse(20,280,18,18);
  ellipse(20,300,18,18);
  ellipse(20,320,18,18);
  ellipse(20,340,18,18);
  ellipse(20,360,18,18);
  ellipse(20,380,18,18);
  ellipse(20,400,18,18);
  ellipse(20,420,18,18);
  ellipse(20,440,18,18);
  ellipse(20,460,18,18);
  ellipse(20,480,18,18);
  ellipse(20,500,18,18)
  //column three!!
  ellipse(40,0,18,18);
  ellipse(40,20,18,18);
  ellipse(40,40,18,18);
  ellipse(40,60,18,18);
  ellipse(40,80,18,18);
  ellipse(40,100,18,18);
  ellipse(40,120,18,18);
  ellipse(40,140,18,18);
  ellipse(40,160,18,18);
  ellipse(40,180,18,18);
  ellipse(40,200,18,18);
  ellipse(40,220,18,18);
  ellipse(40,240,18,18);
  ellipse(40,260,18,18);
  ellipse(40,280,18,18);
  ellipse(40,300,18,18);
  ellipse(40,320,18,18);
  ellipse(40,340,18,18);
  ellipse(40,360,18,18);
  ellipse(40,380,18,18);
  ellipse(40,400,18,18);
  ellipse(40,420,18,18);
  ellipse(40,440,18,18);
  ellipse(40,460,18,18);
  ellipse(40,480,18,18);
  ellipse(40,500,18,18);
  //column four!!
  ellipse(60,0,18,18);
  ellipse(60,20,18,18);
  ellipse(60,40,10,10);
  ellipse(60,60,10,10);
  ellipse(60,80,10,10);
  ellipse(60,100,10,10);
  ellipse(60,120,15,15);
  ellipse(60,140,15,15);
  ellipse(60,160,15,15);
  ellipse(60,180,15,15);
  ellipse(60,200,10,10);
  ellipse(60,220,10,10);
  ellipse(60,240,10,10);
  ellipse(60,260,10,10);
  ellipse(60,280,10,10);
  ellipse(60,300,10,10);
  ellipse(60,320,10,10);
  ellipse(60,340,10,10);
  ellipse(60,360,10,10);
  ellipse(60,380,18,18);
  ellipse(60,400,18,18);
  ellipse(60,420,18,18);
  ellipse(60,440,18,18);
  ellipse(60,460,18,18);
  ellipse(60,480,18,18);
  ellipse(60,500,18,18);
  //column five!!
  ellipse(80,0,10,10);
  ellipse(80,20,10,10);
  ellipse(80,40,10,10);
  ellipse(80,60,10,10);
  ellipse(80,80,10,10);
  ellipse(80,100,10,10);
  ellipse(80,120,15,15);
  ellipse(80,140,10,10);
  ellipse(80,160,10,10);
  ellipse(80,180,10,10);
  ellipse(80,200,15,15);
  ellipse(80,220,10,10);
  ellipse(80,240,10,10);
  ellipse(80,260,10,10);
  ellipse(80,280,10,10);
  ellipse(80,300,10,10);
  ellipse(80,320,10,10);
  ellipse(80,340,10,10);
  ellipse(80,360,10,10);
  ellipse(80,380,10,10);
  ellipse(80,400,10,10);
  ellipse(80,420,18,18);
  ellipse(80,440,18,18);
  ellipse(80,460,18,18);
  ellipse(80,480,18,18);
  ellipse(80,500,18,18);
  //column six!!
  ellipse(100,0,10,10);
  ellipse(100,20,10,10);
  ellipse(100,40,10,10);
  ellipse(100,60,10,10);
  ellipse(100,80,10,10);
  ellipse(100,100,10,10);
  ellipse(100,120,15,15);
  ellipse(100,140,10,10);
  ellipse(100,160,18,18);
  ellipse(100,180,10,10);
  ellipse(100,200,15,15);
  ellipse(100,220,10,10);
  ellipse(100,240,10,10);
  ellipse(100,260,10,10);
  ellipse(100,280,10,10);
  ellipse(100,300,10,10);
  ellipse(100,320,10,10);
  ellipse(100,340,10,10);
  ellipse(100,360,10,10);
  ellipse(100,380,10,10);
  ellipse(100,400,10,10);
  ellipse(100,420,10,10);
  ellipse(100,440,10,10);
  ellipse(100,460,18,18);
  ellipse(100,480,18,18);
  ellipse(100,500,18,18);
  //column seven!!
  ellipse(120,0,10,10);
  ellipse(120,20,10,10);
  ellipse(120,40,10,10);
  ellipse(120,60,10,10);
  ellipse(120,80,10,10);
  ellipse(120,100,10,10);
  ellipse(120,120,15,15);
  ellipse(120,140,10,10);
  ellipse(120,160,18,18);
  ellipse(120,180,10,10);
  ellipse(120,200,15,15);
  ellipse(120,220,10,10);
  ellipse(120,240,10,10);
  ellipse(120,260,10,10);
  ellipse(120,280,10,10);
  ellipse(120,300,10,10);
  ellipse(120,320,10,10);
  ellipse(120,340,10,10);
  ellipse(120,360,10,10);
  ellipse(120,380,10,10);
  ellipse(120,400,10,10);
  ellipse(120,420,10,10);
  ellipse(120,440,10,10);
  ellipse(120,460,10,10);
  ellipse(120,480,18,18);
  ellipse(120,500,18,18);
  //column eight!!
  ellipse(140,0,10,10);
  ellipse(140,20,10,10);
  ellipse(140,40,10,10);
  ellipse(140,60,10,10);
  ellipse(140,80,10,10);
  ellipse(140,100,10,10);
  ellipse(140,120,15,15);
  ellipse(140,140,10,10);
  ellipse(140,160,10,10);
  ellipse(140,180,10,10);
  ellipse(140,200,15,15);
  ellipse(140,220,10,10);
  ellipse(140,240,10,10);
  ellipse(140,260,10,10);
  ellipse(140,280,10,10);
  ellipse(140,300,10,10);
  ellipse(140,320,10,10);
  ellipse(140,340,10,10);
  ellipse(140,360,10,10);
  ellipse(140,380,10,10);
  ellipse(140,400,10,10);
  ellipse(140,420,10,10);
  ellipse(140,440,10,10);
  ellipse(140,460,10,10);
  ellipse(140,480,10,10);
  ellipse(140,500,18,18);
  //column nine!!
  ellipse(160,0,10,10);
  ellipse(160,20,10,10);
  ellipse(160,40,10,10);
  ellipse(160,60,10,10);
  ellipse(160,80,10,10);
  ellipse(160,100,10,10);
  ellipse(160,120,15,15);
  ellipse(160,140,15,15);
  ellipse(160,160,15,15);
  ellipse(160,180,15,15);
  ellipse(160,200,15,15);
  ellipse(160,220,10,10);
  ellipse(160,240,10,10);
  ellipse(160,260,10,10);
  ellipse(160,280,10,10);
  ellipse(160,300,10,10);
  ellipse(160,320,10,10);
  ellipse(160,340,10,10);
  ellipse(160,360,10,10);
  ellipse(160,380,12,12);
  ellipse(160,400,10,10);
  ellipse(160,420,10,10);
  ellipse(160,440,10,10);
  ellipse(160,460,10,10);
  ellipse(160,480,10,10);
  ellipse(160,500,10,10);
  //column ten!!
  ellipse(180,0,10,10);
  ellipse(180,20,10,10);
  ellipse(180,40,10,10);
  ellipse(180,60,10,10);
  ellipse(180,80,10,10);
  ellipse(180,100,10,10);
  ellipse(180,120,15,15);
  ellipse(180,140,15,15);
  ellipse(180,160,15,15);
  ellipse(180,180,10,10);
  ellipse(180,200,10,10);
  ellipse(180,220,10,10);
  ellipse(180,240,10,10);
  ellipse(180,260,10,10);
  ellipse(180,280,10,10);
  ellipse(180,300,10,10);
  ellipse(180,320,10,10);
  ellipse(180,340,10,10);
  ellipse(180,360,10,10);
  ellipse(180,380,13,13);
  ellipse(180,400,12,12);
  ellipse(180,420,10,10);
  ellipse(180,440,10,10);
  ellipse(180,460,10,10);
  ellipse(180,480,10,10);
  ellipse(180,500,10,10);
  //column eleven!!
  ellipse(200,0,10,10);
  ellipse(200,20,10,10);
  ellipse(200,40,10,10);
  ellipse(200,60,10,10);
  ellipse(200,80,10,10);
  ellipse(200,100,10,10);
  ellipse(200,120,15,15);
  ellipse(200,140,15,15);
  ellipse(200,160,10,10);
  ellipse(200,180,10,10);
  ellipse(200,200,10,10);
  ellipse(200,220,10,10);
  ellipse(200,240,10,10);
  ellipse(200,260,13,13);
  ellipse(200,280,16,16);
  ellipse(200,300,14,14);
  ellipse(200,320,10,10);
  ellipse(200,340,10,10);
  ellipse(200,360,14,14);
  ellipse(200,380,13,13);
  ellipse(200,400,13,13);
  ellipse(200,420,14,14);
  ellipse(200,440,10,10);
  ellipse(200,460,10,10);
  ellipse(200,480,10,10);
  ellipse(200,500,10,10);
  //column twelve!!
  ellipse(220,0,10,10);
  ellipse(220,20,10,10);
  ellipse(220,40,10,10);
  ellipse(220,60,10,10);
  ellipse(220,80,10,10);
  ellipse(220,100,10,10);
  ellipse(220,120,15,15);
  ellipse(220,140,10,10);
  ellipse(220,160,12,12);
  ellipse(220,180,14,14);
  ellipse(220,200,15,15);
  ellipse(220,220,15,15);
  ellipse(220,240,14,14);
  ellipse(220,260,12,12);
  ellipse(220,280,10,10);
  ellipse(220,300,16,16);
  ellipse(220,320,10,10);
  ellipse(220,340,10,10);
  ellipse(220,360,15,15);
  ellipse(220,380,14,14);
  ellipse(220,400,15,15);
  ellipse(220,420,16,16);
  ellipse(220,440,10,10);
  ellipse(220,460,10,10);
  ellipse(220,480,10,10);
  ellipse(220,500,10,10);
  //column thirteen!!
  ellipse(240,0,10,10);
  ellipse(240,20,10,10);
  ellipse(240,40,10,10);
  ellipse(240,60,10,10);
  ellipse(240,80,10,10);
  ellipse(240,100,10,10);
  ellipse(240,120,15,15);
  ellipse(240,140,10,10);
  ellipse(240,160,10,10);
  ellipse(240,180,10,10);
  ellipse(240,200,10,10);
  ellipse(240,220,10,10);
  ellipse(240,240,10,10);
  ellipse(240,260,10,10);
  ellipse(240,280,10,10);
  ellipse(240,300,16,16);
  ellipse(240,320,10,10);
  ellipse(240,340,12,12);
  ellipse(240,360,15,15);
  ellipse(240,380,10,10);
  ellipse(240,400,15,15);
  ellipse(240,420,18,18);
  ellipse(240,440,10,10);
  ellipse(240,460,10,10);
  ellipse(240,480,10,10);
  ellipse(240,500,10,10);
  //column fourteen!!
  ellipse(260,0,10,10);
  ellipse(260,20,10,10);
  ellipse(260,40,10,10);
  ellipse(260,60,10,10);
  ellipse(260,80,10,10);
  ellipse(260,100,10,10);
  ellipse(260,120,15,15);
  ellipse(260,140,15,15);
  ellipse(260,160,10,10);
  ellipse(260,180,10,10);
  ellipse(260,200,10,10);
  ellipse(260,220,10,10);
  ellipse(260,240,10,10);
  ellipse(260,260,10,10);
  ellipse(260,280,10,10);
  ellipse(260,300,16,16);
  ellipse(260,320,10,10);
  ellipse(260,340,10,10);
  ellipse(260,360,15,15);
  ellipse(260,380,10,10);
  ellipse(260,400,15,15);
  ellipse(260,420,18,18);
  ellipse(260,440,10,10);
  ellipse(260,460,10,10);
  ellipse(260,480,10,10);
  ellipse(260,500,10,10);
  //column fifteen!!
  ellipse(280,0,10,10);
  ellipse(280,20,10,10);
  ellipse(280,40,10,10);
  ellipse(280,60,10,10);
  ellipse(280,80,10,10);
  ellipse(280,100,10,10);
  ellipse(280,120,15,15);
  ellipse(280,140,15,15);
  ellipse(280,160,15,15);
  ellipse(280,180,13,13);
  ellipse(280,200,13,13);
  ellipse(280,220,13,13);
  ellipse(280,240,13,13);
  ellipse(280,260,10,10);
  ellipse(280,280,10,10);
  ellipse(280,300,16,16);
  ellipse(280,320,10,10);
  ellipse(280,340,12,12);
  ellipse(280,360,15,15);
  ellipse(280,380,14,14);
  ellipse(280,400,15,15);
  ellipse(280,420,16,16);
  ellipse(280,440,10,10);
  ellipse(280,460,10,10);
  ellipse(280,480,10,10);
  ellipse(280,500,10,10);
  //column sixteen!!
  ellipse(300,0,10,10);
  ellipse(300,20,10,10);
  ellipse(300,40,10,10);
  ellipse(300,60,10,10);
  ellipse(300,80,10,10);
  ellipse(300,100,10,10);
  ellipse(300,120,15,15);
  ellipse(300,140,15,15);
  ellipse(300,160,15,15);
  ellipse(300,180,15,15);
  ellipse(300,200,15,15);
  ellipse(300,220,10,10);
  ellipse(300,240,10,10);
  ellipse(300,260,10,10);
  ellipse(300,280,14,14);
  ellipse(300,300,13,13);
  ellipse(300,320,10,10);
  ellipse(300,340,10,10);
  ellipse(300,360,14,14);
  ellipse(300,380,13,13);
  ellipse(300,400,13,13);
  ellipse(300,420,14,14);
  ellipse(300,440,10,10);
  ellipse(300,460,10,10);
  ellipse(300,480,10,10);
  ellipse(300,500,10,10);
  //column seventeen!!
  ellipse(320,0,10,10);
  ellipse(320,20,10,10);
  ellipse(320,40,10,10);
  ellipse(320,60,10,10);
  ellipse(320,80,10,10);
  ellipse(320,100,10,10);
  ellipse(320,120,15,15);
  ellipse(320,140,10,10);
  ellipse(320,160,10,10);
  ellipse(320,180,10,10);
  ellipse(320,200,15,15);
  ellipse(320,220,10,10);
  ellipse(320,240,10,10);
  ellipse(320,260,10,10);
  ellipse(320,280,10,10);
  ellipse(320,300,10,10);
  ellipse(320,320,10,10);
  ellipse(320,340,10,10);
  ellipse(320,360,10,10);
  ellipse(320,380,13,13);
  ellipse(320,400,12,12);
  ellipse(320,420,10,10);
  ellipse(320,440,10,10);
  ellipse(320,460,10,10);
  ellipse(320,480,10,10);
  ellipse(320,500,10,10);
  //column eighteen!!
  ellipse(340,0,10,10);
  ellipse(340,20,10,10);
  ellipse(340,40,10,10);
  ellipse(340,60,10,10);
  ellipse(340,80,10,10);
  ellipse(340,100,10,10);
  ellipse(340,120,15,15);
  ellipse(340,140,10,10);
  ellipse(340,160,18,18);
  ellipse(340,180,10,10);
  ellipse(340,200,15,15);
  ellipse(340,220,10,10);
  ellipse(340,240,10,10);
  ellipse(340,260,10,10);
  ellipse(340,280,10,10);
  ellipse(340,300,10,10);
  ellipse(340,320,10,10);
  ellipse(340,340,10,10);
  ellipse(340,360,10,10);
  ellipse(340,380,12,12);
  ellipse(340,400,10,10);
  ellipse(340,420,10,10);
  ellipse(340,440,10,10);
  ellipse(340,460,10,10);
  ellipse(340,480,10,10);
  ellipse(340,500,10,10);
  //column nineteen!!
  ellipse(360,0,10,10);
  ellipse(360,20,10,10);
  ellipse(360,40,10,10);
  ellipse(360,60,10,10);
  ellipse(360,80,10,10);
  ellipse(360,100,10,10);
  ellipse(360,120,15,15);
  ellipse(360,140,10,10);
  ellipse(360,160,18,18);
  ellipse(360,180,10,10);
  ellipse(360,200,15,15);
  ellipse(360,220,10,10);
  ellipse(360,240,10,10);
  ellipse(360,260,10,10);
  ellipse(360,280,10,10);
  ellipse(360,300,10,10);
  ellipse(360,320,10,10);
  ellipse(360,340,10,10);
  ellipse(360,360,10,10);
  ellipse(360,380,10,10);
  ellipse(360,400,10,10);
  ellipse(360,420,10,10);
  ellipse(360,440,10,10);
  ellipse(360,460,10,10);
  ellipse(360,480,10,10);
  ellipse(360,500,10,10);
  //column twenty!!
  ellipse(380,0,10,10);
  ellipse(380,20,10,10);
  ellipse(380,40,10,10);
  ellipse(380,60,10,10);
  ellipse(380,80,10,10);
  ellipse(380,100,10,10);
  ellipse(380,120,15,15);
  ellipse(380,140,10,10);
  ellipse(380,160,10,10);
  ellipse(380,180,10,10);
  ellipse(380,200,15,15);
  ellipse(380,220,10,10);
  ellipse(380,240,10,10);
  ellipse(380,260,10,10);
  ellipse(380,280,10,10);
  ellipse(380,300,10,10);
  ellipse(380,320,10,10);
  ellipse(380,340,10,10);
  ellipse(380,360,10,10);
  ellipse(380,380,10,10);
  ellipse(380,400,10,10);
  ellipse(380,420,10,10);
  ellipse(380,440,10,10);
  ellipse(380,460,10,10);
  ellipse(380,480,10,10);
  ellipse(380,500,18,18);
  //column twenty one!!
  ellipse(400,0,10,10);
  ellipse(400,20,10,10);
  ellipse(400,40,10,10);
  ellipse(400,60,10,10);
  ellipse(400,80,10,10);
  ellipse(400,100,10,10);
  ellipse(400,120,15,15);
  ellipse(400,140,15,15);
  ellipse(400,160,15,15);
  ellipse(400,180,15,15);
  ellipse(400,200,10,10);
  ellipse(400,220,10,10);
  ellipse(400,240,10,10);
  ellipse(400,260,10,10);
  ellipse(400,280,10,10);
  ellipse(400,300,10,10);
  ellipse(400,320,10,10);
  ellipse(400,340,10,10);
  ellipse(400,360,10,10);
  ellipse(400,380,10,10);
  ellipse(400,400,10,10);
  ellipse(400,420,10,10);
  ellipse(400,440,10,10);
  ellipse(400,460,10,10);
  ellipse(400,480,18,18);
  ellipse(400,500,18,18);
  //column twenty two!!
  ellipse(420,0,10,10);
  ellipse(420,20,10,10);
  ellipse(420,40,10,10);
  ellipse(420,60,10,10);
  ellipse(420,80,10,10);
  ellipse(420,100,10,10);
  ellipse(420,120,15,15);
  ellipse(420,140,10,10);
  ellipse(420,160,10,10);
  ellipse(420,180,10,10);
  ellipse(420,200,10,10);
  ellipse(420,220,10,10);
  ellipse(420,240,10,10);
  ellipse(420,260,10,10);
  ellipse(420,280,10,10);
  ellipse(420,300,10,10);
  ellipse(420,320,10,10);
  ellipse(420,340,10,10);
  ellipse(420,360,10,10);
  ellipse(420,380,10,10);
  ellipse(420,400,10,10);
  ellipse(420,420,10,10);
  ellipse(420,440,10,10);
  ellipse(420,460,18,18);
  ellipse(420,480,18,18);
  ellipse(420,500,18,18);
  //column twenty three!!
  ellipse(440,0,10,10);
  ellipse(440,20,10,10);
  ellipse(440,40,10,10);
  ellipse(440,60,10,10);
  ellipse(440,80,10,10);
  ellipse(440,100,15,15);
  ellipse(440,120,10,10);
  ellipse(440,140,10,10);
  ellipse(440,160,10,10);
  ellipse(440,180,10,10);
  ellipse(440,200,10,10);
  ellipse(440,220,10,10);
  ellipse(440,240,10,10);
  ellipse(440,260,10,10);
  ellipse(440,280,10,10);
  ellipse(440,300,10,10);
  ellipse(440,320,10,10);
  ellipse(440,340,10,10);
  ellipse(440,360,10,10);
  ellipse(440,380,10,10);
  ellipse(440,400,10,10);
  ellipse(440,420,10,10);
  ellipse(440,440,18,18);
  ellipse(440,460,18,18);
  ellipse(440,480,18,18);
  ellipse(440,500,18,18);
  //column twenty four!!
  ellipse(460,0,10,10);
  ellipse(460,20,10,10);
  ellipse(460,40,10,10);
  ellipse(460,60,10,10);
  ellipse(460,80,15,15);
  ellipse(460,100,10,10);
  ellipse(460,120,10,10);
  ellipse(460,140,10,10);
  ellipse(460,160,10,10);
  ellipse(460,180,10,10);
  ellipse(460,200,10,10);
  ellipse(460,220,10,10);
  ellipse(460,240,10,10);
  ellipse(460,260,10,10);
  ellipse(460,280,10,10);
  ellipse(460,300,10,10);
  ellipse(460,320,10,10);
  ellipse(460,340,10,10);
  ellipse(460,360,10,10);
  ellipse(460,380,10,10);
  ellipse(460,400,18,18);
  ellipse(460,420,18,18);
  ellipse(460,440,18,18);
  ellipse(460,460,18,18);
  ellipse(460,480,18,18);
  ellipse(460,500,18,18);
  //column twenty five!!
  ellipse(480,0,10,10);
  ellipse(480,20,10,10);
  ellipse(480,40,10,10);
  ellipse(480,60,15,15);
  ellipse(480,80,10,10);
  ellipse(480,100,10,10);
  ellipse(480,120,10,10);
  ellipse(480,140,10,10);
  ellipse(480,160,10,10);
  ellipse(480,180,10,10);
  ellipse(480,200,10,10);
  ellipse(480,220,10,10);
  ellipse(480,240,10,10);
  ellipse(480,260,10,10);
  ellipse(480,280,10,10);
  ellipse(480,300,10,10);
  ellipse(480,320,10,10);
  ellipse(480,340,10,10);
  ellipse(480,360,18,18);
  ellipse(480,380,18,18);
  ellipse(480,400,18,18);
  ellipse(480,420,18,18);
  ellipse(480,440,18,18);
  ellipse(480,460,18,18);
  ellipse(480,480,18,18);
  ellipse(480,500,18,18);
  //column twenty six!!
  ellipse(500,0,10,10);
  ellipse(500,20,10,10);
  ellipse(500,40,15,15);
  ellipse(500,60,10,10);
  ellipse(500,80,10,10);
  ellipse(500,100,10,10);
  ellipse(500,120,10,10);
  ellipse(500,140,10,10);
  ellipse(500,160,10,10);
  ellipse(500,180,10,10);
  ellipse(500,200,10,10);
  ellipse(500,220,10,10);
  ellipse(500,240,10,10);
  ellipse(500,260,10,10);
  ellipse(500,280,10,10);
  ellipse(500,300,18,18);
  ellipse(500,320,18,18);
  ellipse(500,340,18,18);
  ellipse(500,360,18,18);
  ellipse(500,380,18,18);
  ellipse(500,400,18,18);
  ellipse(500,420,18,18);
  ellipse(500,440,18,18);
  ellipse(500,460,18,18);
  ellipse(500,480,18,18);
  ellipse(500,500,18,18);
  //voila!!
}

sketch

//Isabelle Vincent
//15-104 E
//ifv@andrew.cmu.edu
//Project-01-Face
function setup() {
    createCanvas(600, 600);
    background(76,143,193);
}
function draw() {
//Back of hair Oval
    fill(245,120,44);
    stroke(245,120,44);
    ellipseMode(CENTER);
    ellipse(300,150,430,250);
//Back of hair rectangle
    fill(245,120,44);
    stroke(245,120,44);
    rect(85,150,430,500);
//Main Head Ellipse
    fill(255, 229, 204);
    stroke(255, 229, 204);
    ellipseMode(CENTER);
    ellipse(300,280,330,430);
//Chin Defining Quad left
    fill(245,120,44);
    stroke(245,120,44);
    quad(135,420,300,495,135,495,125,420);
//Chin defining Quad Right
    fill(245,120,44);
    stroke(245,120,44);
    quad(465,420,475,420,475,495,300,495);
//Forehead Hair Right
    fill(245,120,44);
    stroke(245,120,44);
    quad(320,45,465,150,465,270,300,63,);
//Forehead Hair Left
    fill(245,120,44);
    stroke(245,120,44);
    quad(125,150,280,45,300,63,125,270);
//Nose Line Left
    fill(255,210,153);
    stroke(255,204,153);
    strokeWeight(6);
    line(283,240,283,320);
//Nose Line Right
    fill(255,204,153);
    stroke(255,210,153);
    strokeWeight(6);
    line(317,240,317,320);
//Nostril left
    fill(255,204,153);
    stroke(255,210,153);
    strokeWeight(6);
    line(290,335,270,330);
//Nostril Right
    fill(255,204,153);
    stroke(255,210,153);
    strokeWeight(6);
    line(310,335,330,330);
//Eye Left
    fill(253,251,244);
    stroke(255,210,153);
    strokeWeight(6);
    ellipseMode(CORNER);
    ellipse(173,240,90,40);
//Eye Right
    fill(253,251,244);
    stroke(255,210,153);
    strokeWeight(6);
    ellipseMode(CORNER);
    ellipse(337,240,90,40);
//Iris Left
    fill(76,143,193);
    stroke(76,127,193);
    strokeWeight(6);
    ellipseMode(CENTER);
    ellipse(218,260,33,33);
//Iris Right
    fill(76,143,193);
    stroke(76,127,193);
    strokeWeight(6);
    ellipseMode(CENTER);
    ellipse(382,260,33,33);
//Eyebrow Left
    fill(245,120,44);
    stroke(245,120,44);
    strokeWeight(6);
    line(173,215,263,215);
//Eyebrow Right
    fill(245,120,44);
    stroke(245,120,44);
    strokeWeight(6);
    line(337,215,427,215);
//Lips Ellipse
    fill(255,180,143);
    stroke(235,139,91);
    strokeWeight(6);
    ellipseMode(CENTER);
    ellipse(300,390,74,30);
//Mouth Middle line
    fill(235,139,91);
    stroke(235,139,91);
    strokeWeight(6);
    line(263,390,337,390);
//Mouth Left line
    fill(235,139,91);
    stroke(235,139,91);
    strokeWeight(6);
    line(263,390,218,360);
//Mouth Right Line
    fill(235,139,91);
    stroke(235,139,91);
    strokeWeight(6);
    line(337,390,382,360);
//Freckles Left Side
    fill(194,96,47);
    stroke(194,96,47);
    strokeWeight(6);
//Freckles
    fill(194,96,47);
    stroke(194,96,47);
    strokeWeight(6);
    point(185,300);
    point(410,300);
    point(356,300);
    point(242,300);
    point(213.5,313);
    point(383,313);

}

I started this project by planning out which shapes would overlap in which order by sketching a rough sequential draft in my sketchbook. I used the center point of my main hair ellipse as an anchor for the rest of my shapes so when needed i could calculate the required points to make certain elements symmetrical. I am happy with my final product because it bears resemblance to me and has its own style.

project01_self portrait

function setup() {
    createCanvas(600, 600);
    background(248, 177, 149);

    var a = color(53, 92, 125); // Hair fill 
    fill(a);  
    noStroke();  
    rect(120, 320, 360, 300);  

    ellipseMode (RADIUS); // Face upper 
    fill (252, 235, 182);
    arc(300, 250, 190, 190, PI, 0);

    ellipseMode (RADIUS); // Face lower 
    fill (252, 235, 182);
    strokeWeight (0);
    arc(300, 250, 190, 250, 0, PI);

    ellipseMode (RADIUS); // Hair upper left 
    noFill ();
    stroke (53, 92, 125);
    strokeWeight (60);
    arc(280, 250, 190, 200, PI, -1.6);

    

    ellipseMode (RADIUS); // Hair upper right
    noFill ();
    stroke (53, 92, 125);
    strokeWeight (60);
    arc(310, 250, 190, 200, -HALF_PI, 0);

    line (90, 250, 90, 600);
    line (500, 250, 500, 600);

    ellipseMode(RADIUS);  // Set ellipseMode to RADIUS
    fill(255);  // Set fill to white
    strokeWeight (2);
    stroke (240, 120, 24);
    ellipse(200, 250, 40, 27);  // Draw white ellipse using RADIUS mode

    ellipseMode(CENTER);  // Set ellipseMode to CENTER
    fill(100);  // Set fill to gray
    strokeWeight (0);
    ellipse(200, 245, 40, 40);  // Draw gray ellipse using CENTER mode

    ellipseMode(RADIUS);  // Set ellipseMode to RADIUS
    fill(255);  // Set fill to white
    strokeWeight (2);
    stroke (240, 120, 24);
    ellipse(400, 250, 40, 27);  // Draw white ellipse using RADIUS mode

    ellipseMode(CENTER);  // Set ellipseMode to CENTER
    fill(100);  // Set fill to gray
    strokeWeight (0);
    ellipse(400, 245, 40, 40);  // Draw gray ellipse using CENTER mode
   
    noFill (); // Eyelash 
    strokeWeight (3);
    arc(150, 245, 20, 5, 0, PI);

    noFill (); // Eyelash 
    strokeWeight (3);
    arc(450, 245, 20, 5, 0, PI);

    noFill (); // Nose line 
    strokeWeight (2);
    stroke (240, 120, 24);
    arc(325, 270, 15, 100, HALF_PI, PI);

    noFill (); // Nose arc
    strokeWeight (2);
    arc(310, 340, 40, 22, 0, PI);

    noFill (); // Upper lip left 
    strokeWeight (2);
    stroke (240, 120, 24);
    arc(285, 400, 60, 22, -3.1, -0.3);

    noFill (); // Upper lip right 
    strokeWeight (2);
    arc(335, 400, 60, 22, -2.9, -0.2);

    noFill (); // Middle lip  
    strokeWeight (2);
    arc(308, 402, 110, 10, 0, PI);

    noFill (); // Lower lip  
    strokeWeight (2);
    arc(308, 406, 110, 45, 0, PI);

    noFill (); // Eyebrow left 
    strokeWeight (4);
    stroke (240, 120, 24);
    arc(200, 200, 85, 25, PI, -0.09);

    noFill (); // Eyebrow right
    strokeWeight (4);
    arc(400, 200, 85, 25, PI, -0.09);

    



}

Being completely unfamiliar and inexperienced with p5.js, I definitely struggled to produce a self-portrait that I was satisfied with. There were moments of frustration as it was difficult to achieve the geometric shapes I wanted, but through experimenting and familiarizing myself with the program I think I would be able to achieve a better outcome.

 

I first started off with hand sketch:

The hand sketch is then vectorized in Sketch with simple geometric shapes keeping in mind that this will be written with code.

The program is constructed proportions. Every variable is based on the width (w) and height (h) of the canvas. Half way through writing the program, I realized that it would be efficient to be able to visually see the proportions of the screens I am working with, so I quickly wrote a program.

Because the code is based of proportions rather than pixels, I can quickly mirror my facial features with 1-.xx. Just as I leave traces of sketch marks on my drawings, here I’ve chosen to leave the traces of code I’ve used to proportionally construct my drawing.

Supawat’s Portrait

// 
// Supawat Vitoorapakorn
// Svitoora@andrew.cmu.edu
// Section E
// 
// Self Portrait of Supawat Vitoorapakorn

// Global

    s = .65
    var w = 768*(600/768);
    var h = 1024*(650/768);

// Face Var
    var f_w = (424/768) *w;     //face width
    var f_h = (553/1024)*h;     //face height

// Neck Var
    var neck_w = .27;
    var neck_y = .75;
    var neck_h = .1;
    var neck_w2 = .365;

// V-neck Var
    var v_x1 = (w/2) - (neck_w/2)*w ;
    var v_x2 = (w/2) + (neck_w/2)*w;
    var v_x3 = (w/2);

    var v_yshift = 0;

    var v_y2 = .795*h; 
    var v_y1 = v_y2+((83/h)*h);
    var v_y3 = v_y1

// Color
    var SKIN = "#ffe4b2";
    var T_SHIRT = "#5C5C5C";
    var BLACK = (0,0,0);
    var SKIN_GLASS = "#ffe9c1";
    var RED = "#ed2024";
    var SHADOW = 255*.125;

// MAIN FUNCTION
function setup() {
    createCanvas(w,h);
    background(255);
    rectMode(CORNER);

// Backdrop
    fill(0);
    noStroke();
    noFill();
    strokeWeight(1);
    fill(216, 216, 216);
    rectMode(CORNERS);
    rect(w*.015, (.075)*h, w*(1-.015), h*.915);
    rectMode(CORNER);

// Neck
    noStroke();
    fill(SKIN);
    rectMode(CORNERS);
    rect(w*neck_w2, h*.7, w*(1-neck_w2),h*.8)
    rectMode(CORNER);
    
// Shirt
    fill(T_SHIRT);
    neck_size = .36;
    quad(   neck_size*w,      .795*h,
            (1-neck_size)*w,  .795*h,
            (1-.015)*w, .915*h,
            .015*w,     .915*h);

// V_Neck
    fill(SKIN)
    triangle(   v_x1, v_y2,         // left
                v_x3, v_y1,         // mid
                v_x2, v_y2);        // right

// Neck Shadow
    neck_shadowH = (143.9/h)*h;
    neck_y = h*.6175;

    var n_x1 = w*.5 + (neck_w*w)*.5;
    var n_x2 = w*.5 - (neck_w*w)*.5;
    var n_x3 = w*.5 + (neck_w*w)*.5;
    var n_x4 = w*.5 - (neck_w*w)*.5;

    var n_y1 = 0+neck_y;
    var n_y2 = 0+neck_y;
    var n_y3 = neck_shadowH+neck_y;
    var n_y4 = (neck_shadowH-(1/25)*h)+neck_y;

    fill(0,0,0,SHADOW)
    quad(   n_x1,n_y1,
            n_x2,n_y2,
            n_x4,n_y4,
            n_x3,n_y3
        );
      
// Face
    noStroke();
    fill(SKIN);
    ellipse(w*.5,h*.475,f_w,f_h);

// Hair
    fill(BLACK);
    h_y = h*.33
    h_h = -h*.175

    var h_x1 = w*.5 + (neck_w*w)*.9;        // Right Base
    var h_x2 = w*.5 - (neck_w*w)*.9;        // Left Base
    var h_x3 = w*.5 + (neck_w*w)*1.33;      // Right Tip
    var h_x4 = w*.5 - (neck_w*w)*.77;        // Left Tip

    var h_y1 = h_y;
    var h_y2 = h_y+20;
    var h_y3 = h_y+h_h;        // Right Tip
    var h_y4 = h_y+h_h*.9;     // Left Tip


    quad(   h_x1,h_y1,
            h_x2,h_y2,
            h_x4,h_y4,
            h_x3,h_y3
        );

// Facial Features
    // Facial Features Left
        var glass_size = .20;
        var nose_bridge = .13;
        var eye_size = .04;
        var eye_y = .51;
        var side = 1;       //1 for left; -1 for right

        // Glasses Bottom Shadow
        var shadow_yshift = .015;
        noStroke();
        rectMode(CORNERS);
        fill(0,0,0,SHADOW);
        rect(   .223*w,  side*((.485+shadow_yshift)*h),
                (1-.223)*w,          (eye_y+shadow_yshift)*h);

        // Glass Frame
        fill(SKIN_GLASS);
        strokeWeight(10);
        stroke(BLACK);
        strokeJoin(ROUND);
        arc(     w*(.5-nose_bridge), h*(.5),     //+nose bridge to flip
                 w*glass_size, w*glass_size,
                 0-(1/15*PI), PI+(1/15*PI),
                 CHORD);

        // Eyes Round
        fill(BLACK);
        noStroke();
        arc(     w*(.5-nose_bridge), h*(eye_y),     //+nose bridge to flip
                 w*eye_size, w*eye_size,
                 0-(1/15*PI), PI+(1/15*PI),
                 CHORD);

        // Eyes Line
        strokeWeight(5);
        stroke(BLACK);
        strokeCap(SQUARE);
        line(   (.5-nose_bridge-.05)*w,h*(eye_y-.001),
                (.5-nose_bridge+.05)*w,h*(eye_y-.001));

        // Glasses Side
        rectMode(CORNERS);
        strokeJoin(MITER);
        rect(   side*(.223*w),side*(.485*h),
                .27*w, eye_y*h);
        rectMode(CORNER);

        rectMode(CORNER);
        // Top Shadow
        strokeWeight(15);
        stroke(0,0,0,SHADOW);
        line(   (side*.28)*w, .48*h,
                (side*.46)*w, .48*h);

        // Eyebrow
        var e_x1 = (side*.27)*w;
        var e_y1 = .46*h;

        var e_x2 = (side*.335)*w;
        var e_y2 = .44*h;

        var e_x3 = (side*.45)*w;
        var e_y3 = .45*h;

        // strokeWeight(7.5);
        stroke(BLACK);
        line(   e_x1,   e_y1,
                e_x2, e_y2      );
        
        line(   e_x2-(3*side),e_y2,
                e_x3, e_y3          );
    // Facial Features Right
        var side = -1;       //1 for left; -1 for right

        // Glass Frame
        fill(SKIN_GLASS);
        strokeWeight(10);
        stroke(BLACK);
        strokeJoin(ROUND);
        arc(     w*(.5+nose_bridge), h*(.5),     //+nose bridge to flip
                 w*glass_size, w*glass_size,
                 0-(1/15*PI), PI+(1/15*PI),
                 CHORD);
        // Eyes Round
        fill(BLACK);
        noStroke();
        arc(     w*(.5+nose_bridge), h*(eye_y),     //+nose bridge to flip
                 w*eye_size, w*eye_size,
                 0-(1/15*PI), PI+(1/15*PI),
                 CHORD);

        // Eyes Line
        strokeWeight(5);
        stroke(BLACK);
        strokeCap(SQUARE);
        line(   (.5+nose_bridge-.05)*w,h*(eye_y-.001),
                (.5+nose_bridge+.05)*w,h*(eye_y-.001));

        // Glasses Side
        rectMode(CORNERS);
        strokeJoin(MITER);
        rect(   (1-.223)*w,.485*h,
                (1-.27)*w, eye_y*h);
        rectMode(CORNER);

        //Cast Shadow
        rectMode(CORNER);
        // Top Shadow
        strokeWeight(15);
        stroke(0,0,0,SHADOW);
        line(   (1-.28)*w, .48*h,
                (1-.46)*w, .48*h);

        // Eyebrow
        var e_x1 = (1-.27)*w;
        var e_y1 = .46*h;

        var e_x2 = (1-.335)*w;
        var e_y2 = .44*h;

        var e_x3 = (1-.45)*w;
        var e_y3 = .45*h;


        // strokeWeight(7.5);
        stroke(BLACK);
        line(   e_x1,   e_y1,
                e_x2, e_y2      );
        
        line(   e_x2-(3*side),e_y2,
                e_x3, e_y3          );
    // Facial Features Symetrical
        // Glasses Side
        var side = 1;
        noStroke();
        fill(BLACK);
        rectMode(CORNERS);
        strokeJoin(MITER);
        rect(   (.5-.03)*w,  (.485*h),
                (.5+.03)*w, eye_y*h);
        rectMode(CORNER);

        // Nose .
        var nose_y = .63;
        var nose_width = .025

        strokeWeight(7.5)
        stroke(BLACK);
        line(   (.5-nose_width)*w,  nose_y*h,
                (.5+nose_width)*w,  nose_y*h);

        // Mouth .
        var mouth_y = nose_y+.05;
        var mouth_width = .035*1.5

        strokeWeight(7.5)
        stroke(BLACK);
        line(   (.5-mouth_width)*w,  mouth_y*h,
                (.5+mouth_width)*w,  mouth_y*h);

        // Mouth Shadow
        var mouth_shadow_y = nose_y+.05+.02;
        var mouth_shadow_width = .035*.75

        strokeWeight(7.5)
        stroke(0,0,0,25);
        line(   (.5-mouth_shadow_width)*w,  mouth_shadow_y*h,
                (.5+mouth_shadow_width)*w,  mouth_shadow_y*h);

// Hair Side
    strokeWeight(0);
    noStroke();
    fill(0,0,0);
    quad    (w*.275, h*.34,
            w*.24,  h*.45,
            w*.215,  h*.47,
            w*.20,  h*.37);

    quad    (w*(1-.275), h*.32,
            w*(1-.24),  h*.45,
            w*(1-.215),  h*.47,
            w*(1-.2),  h*.35);
}
// Creates Mouse Guider
    function draw() {
        setup();
        noStroke();
        fill(255,240,0,255*.30);
        ellipse(mouseX, mouseY, 200, 200);
        var X = (mouseX/w).toFixed(3);
        var Y = (mouseY/h).toFixed(3);
        var XY = str("("+X+","+Y+")");
        fill(RED);
        textSize(24);
        strokeWeight(1);
        text(XY,mouseX,mouseY);
    }

SaveSave

SaveSave

SaveSave

gyueun_selfportrait

// GyuEun Park
// 15-104 E
// gyueunp@andrew.cmu.edu
// Project-01

function setup() {
	createCanvas(600, 600);
	background(93,129,182);
}

function draw() {
	// head
	fill(0);
	noStroke();
	ellipse(270,220.7,261,290);

	// right hair
	smooth(0);
	fill(0);
	quad(214,190,419,550,400.9,220,213,190);

	// left hair
	fill(0);
	quad(142,250,190,150,420,550,190,550);

	// face
	fill(255);
	noStroke();
	quad(175,300,210,150,330,396,230,396);
	fill(0);
	triangle(303,400,335,400,317,370);

	// eye
	fill(237,240,251);
	stroke(178,188,195);
	strokeWeight(0.6);
	arc(218,275,55,50,0,PI, CHORD);

	//eye details
	fill(108,125,140);
	arc(218,275,35,30,0,PI, CHORD);

	fill(0);
	strokeWeight(0.4);
	arc(218,275,17.5,15,0,PI, CHORD);

	fill(0);
	stroke(0);
	strokeWeight(3);
	line(186,272.5,245,274);

	//mouth
	fill(0);
	stroke(0);
	strokeWeight(2);
	line(254,346,275,346);

	//lip piercing
	fill(178,191,199);
	noStroke(0);
	ellipse(256,352,5,5);

	fill(255);
	noStroke(0);
	ellipse(255,351.4,2,2);
}

I created a simple self-portrait by using minimal details that accentuate my unique features. Although I went through a long trial-and-error process to find the most suitable shapes and angles, I enjoyed this project.

sketch.js

/*
* Anna Gusman
* agusman@andrew.cmu.edu
* Section A
*
* This program draws a self portrait out of intersecting circles and lines.
*/
  // Constants
var color1;
var color2;

function setup() {
  createCanvas(770, 830); //sets the canvas size//
  color1 = color(230, 38, 42);
  color2 = color(251, 95, 41);
  background(239, 94, 8);
  angleMode(DEGREES);
}

function draw() {
  //var backgroundcolor = color(239, 94, 8);
  //uses a orange rectangle as the background//
  //fill(backgroundcolor);
  noStroke();
  setGradient(0, 0, 770, 830, color1, color2);
  //rect(0, 0, 770, 800);

  //largest circle//
  stroke(255, 255, 255, 20);
  noFill();
  ellipse(136 + 156,189 + 156,315,314);

  var a = color(255);
  stroke(a);
  noFill();
  arc(136 + 156,189 + 156,315,314, 44, 87);

  //hair tucked behind ear, second largest circle//
  stroke(255, 255, 255, 40);
  noFill();
  ellipse(315 + 142,124 + 142,282,282);

  var a = color(255);
	stroke(a);
  noFill();
  arc(315 + 142,124 + 142,282,282, 97, 168);

  //thirds largest circle//
  stroke(255, 255, 255, 30);
  noFill();
  ellipse(331 + 125,140 + 125,248,248);

  //fourth largest circle//
  stroke(255, 255, 255, 10);
  noFill();
  ellipse(351 + 107,158 + 107,212,212);

  //top of head, fifth largest circle//
  stroke(255, 255, 255, 20);
  noFill();
  ellipse(243 + 116,289 + 116,234,234);

  var a = color(255);
	stroke(a);
  noFill();
  arc(243 + 116,289 + 116,234,234, 250, 333);

  //sixth largest circle//
  stroke(255, 255, 255, 40);
  noFill();
  ellipse(415 + 67,544 + 67,133,133);

  //eyebrow curve, seventh largest circle//
  stroke(255, 255, 255, 40);
  noFill();
  ellipse(277 + 51,350 + 54,91,96);

  //mouth curve, eigth largest circle//
  stroke(255, 255, 255, 40);
  noFill();
  ellipse(251 + 29,413 + 29,56,57);

  var a = color(255);
	stroke(a);
  noFill();
  arc(251 + 29,413 + 29, 56,57, 0, 70);

  //face curve, largest ellipse//
  stroke(255, 255, 255, 40);
  noFill();
  ellipse(281 + 192,180 + 225,384,453);

  //neck//
  var neck = color(255, 40);
  stroke(neck);
  line(439, 415.26, 439, 544.5);

  //right shoulder//
  var rightcollar = color(255, 40);
  stroke(rightcollar);
  line(439, 544, 481, 544);

  var rightshoulder = color(255, 200);
  stroke(rightshoulder);
  arc(415 + 67,544 + 67,133,133, 270, 0);

  //neck curve, second largest ellipse//
  stroke(255, 255, 255, 40);
  noFill();
  ellipse(120 + 133,355 + 133,209,267);

  var a = color(255);
	stroke(a);
  noFill();
  arc(120 + 133,355 + 133,209,267, 0, 90);

  //nose, curve is third largest ellipse//
  stroke(255, 255, 255, 40);
  ellipse(144 + 70,235 + 117,141,234);

  //nosecurve//
  var a = color(255);
	stroke(a);
  noFill();
  arc(144 + 70,235 + 117,141,234, 31, 60);

  //nosebase//
  stroke(255, 255, 255, 200);
  line(262, 437, 282, 437);

  //hair//
  var hairbase = color(255, 40)
  stroke(hairbase)
  line(647.78, 503, 286.35, 503);

  var sidehair = color(255, 200);
  stroke(sidehair);
  line(439, 406.71, 438.89, 504.29);

  var slanthair = color(255, 200);
  stroke(slanthair);
  line(463, 352, 547, 504);
  line(546.83, 504, 439.71, 504); //bottom of hair//

  //eye//
  stroke(255, 255, 255, 40);
  noFill();
  ellipse(292 + 24,366 + 24,47,47);
  var a = color(255);
	stroke(a);
  fill(255);
  //arc(292 + 24,366 + 24,47,47, 0, PI - QUARTER_PI, OPEN);

  //eyeliner//
  var diagonalline = color(255);
	stroke(diagonalline);
  line(301.36, 406.64, 344, 377);

  //ear//
  var c = color(255, 40);
  stroke(c)
  line(406, 410.26, 406, 451);

  stroke(255, 255, 255, 40);
  noFill();
  ellipse(406 + 14.5,395 + 15,28,28);

}

function setGradient(x, y, w, h, color1, color2) {

  noFill();

   //Left to right gradient
   for (var i = y; i <= y+h; i++) {
      var inter = map(i, x, x+w, 0, 1);
      var c = lerpColor(color1, color2, inter);
      stroke(c);
      line(i, y, i, y+h);
  }
}

Using and familiarizing myself with the p5 library for this assignment was an absolute blast. Having very little experience with it, I expected to feel the complete opposite as I’d cowered in fear of programming for years. Instead, setting up this composition felt oddly and incredibly satisfying, from design to debugging.

I composed my portrait from a series of intersecting ellipses and lines. Where these objects overlap is where the features of my profile are formed. I drew arcs atop the objects to highlight the important and recognizable features. I also added a slight horizontal gradient to add a smidgeon of depth.

In hindsight, it would’ve been nice to figure out how to increase the opaqueness of the parts of the objects that form the features rather than redrawing separate arcs on top. I also wish that I iterated further to explore other color relationships. Looking forward, I’d like to make this sketch respond to mouse position, specifically to have the highlighted arc areas glide around the ellipses they are based on, deconstructing and reforming my profile.