Assignment 1: Self Portrait

screenshot of the sketch on p5js.org

For the first assignment in my Creative Coding course, we were told to draw a self portrait using the P5js library’s draw functions. The “self portrait” requisite was intentionally ambiguous in order to encourage creativity with the few skills we had in our arsenal thus far. Having a bit of prior knowledge about the P5js library, I decided to program a smiley face whose color would change in response to user input, and a “name tag” that would display the HTML name of the color chosen.

Check it out here!

Step 1

I began by creating the smiley face. To do this, I wrote a function that I could later call in the draw function containing the shapes, whose x, y, and size values were set to global variables.

var x = 200;
var y = 120;
var diameter = 200;

var drawSmiley = function() {
  fill(colors[n]);
  stroke("black");
  strokeWeight(diameter / 20);
  ellipse(x, y, diameter, diameter);
  arc(x, y, diameter / 2, diameter / 2, 0, 135);
  fill("black");
  ellipse(x * 0.85, y - 30, diameter / 16, diameter / 8);
  ellipse(x * 1.15, y - 30, diameter / 16, diameter / 8);
};

Step 2

I then created an array of 100 colors that would be randomly reassigned to variable [n] in response to user input, in this case a mouseClicked function.

var colors = ["yellow", "navy", "darkblue", "mediumblue", "blue", "darkgreen", "green", "teal", "drakcyan", "deepskyblue", "darkturquoise", "mediumspringgreen", "lime", "springgreen", "aqua", "cyan", "mignightblue", "dodgerblue", "lightseagreen", "forestgreen", "seagreen", "darkslategrey", "limegreen", "mediumseagreen", "turquoise", "royalblue", "steelblue", "darkslateblue", "mediumturqoise", "indigo", "darkolivegreen", "cadetblue", "cornflowerblue", "rebeccapurple", "mediumaquamarine", "slateblue", "olivedrab", "slategray", "lawngreen", "aquamarine", "maroon", "purple", "olive", "skyblue", "blueviolet", "darkred", "darkmagenta", "saddlebrown", "darkseagreen", "lightgreen", "mediumpurple", "darkviolet", "palegreen", "darkorchid", "yellowgreen", "sienna", "brown", "darkgray", "powderblue", "firebrick", "darkgoldenrod", "rosybrown", "darkkhaki", "indianred", "peru", "chocolate", "tan", "thistle", "orchid", "crimson", "gainsboro", "plum", "burlywood", "lavender", "darksalmon", "palegoldenrod", "aliceblue", "honeydew", "wheat", "whitesmoke", "mintcream", "antiquewhite", "linen", "red", "magenta", "deeppink", "hotpink", "darkorange", "orange", "pink", "gold", "peachpuff", "ivory", "floralwhite", "lightyellow", "lemonchiffon", "cornsilk", "seashell", "papayawhip", "white"];
var n = 0;

function mouseClicked() {
  n = floor(random(0, colors.length));
  clickCount++
}

Step 3

In order to draw the “name tag,” I wrote a function similar to that of the smiley face so I could later call it into the draw function.

var drawTag = function() {
  fill("red");
  stroke("red");
  rect(75, 250, 250, 125, 10);
  fill("white");
  stroke("white");
  rect(75, 300, 250, 60);
  fill("white");
  noStroke();
  textAlign(CENTER);
  textSize(24);
  text("HELLO", 200, 272);
  textSize(16);
  text("my name is", 200, 288);
  fill("black")
  textSize(30)
  if (clickCount>0) {
    text(colors[n], 200, 338);
  } else {
    text("try clicking!", 200, 338);
  }
}

Step 4

Finally, I set a variable that counts the number of mouse clicks so that on launch the name tag displays “Try clicking!” to prompt the user to click, but changes to the name of the randomly assigned color after the first click.

And Viola! Here is the code in full:

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

var x = 200;
var y = 120;
var diameter = 200;
var colors = ["yellow", "navy", "darkblue", "mediumblue", "blue", "darkgreen", "green", "teal", "drakcyan", "deepskyblue", "darkturquoise", "mediumspringgreen", "lime", "springgreen", "aqua", "cyan", "mignightblue", "dodgerblue", "lightseagreen", "forestgreen", "seagreen", "darkslategrey", "limegreen", "mediumseagreen", "turquoise", "royalblue", "steelblue", "darkslateblue", "mediumturqoise", "indigo", "darkolivegreen", "cadetblue", "cornflowerblue", "rebeccapurple", "mediumaquamarine", "slateblue", "olivedrab", "slategray", "lawngreen", "aquamarine", "maroon", "purple", "olive", "skyblue", "blueviolet", "darkred", "darkmagenta", "saddlebrown", "darkseagreen", "lightgreen", "mediumpurple", "darkviolet", "palegreen", "darkorchid", "yellowgreen", "sienna", "brown", "darkgray", "powderblue", "firebrick", "darkgoldenrod", "rosybrown", "darkkhaki", "indianred", "peru", "chocolate", "tan", "thistle", "orchid", "crimson", "gainsboro", "plum", "burlywood", "lavender", "darksalmon", "palegoldenrod", "aliceblue", "honeydew", "wheat", "whitesmoke", "mintcream", "antiquewhite", "linen", "red", "magenta", "deeppink", "hotpink", "darkorange", "orange", "pink", "gold", "peachpuff", "ivory", "floralwhite", "lightyellow", "lemonchiffon", "cornsilk", "seashell", "papayawhip", "white"];
var n = 0;
var clickCount = 0

function mouseClicked() {
  n = floor(random(0, colors.length));
  clickCount++
}

var drawSmiley = function() {
  fill(colors[n]);
  stroke("black");
  strokeWeight(diameter / 20);
  ellipse(x, y, diameter, diameter);
  arc(x, y, diameter / 2, diameter / 2, 0, 135);
  fill("black");
  ellipse(x * 0.85, y - 30, diameter / 16, diameter / 8);
  ellipse(x * 1.15, y - 30, diameter / 16, diameter / 8);
};

var drawTag = function() {
  fill("red");
  stroke("red");
  rect(75, 250, 250, 125, 10);
  fill("white");
  stroke("white");
  rect(75, 300, 250, 60);
  fill("white");
  noStroke();
  textAlign(CENTER);
  textSize(24);
  text("HELLO", 200, 272);
  textSize(16);
  text("my name is", 200, 288);
  fill("black")
  textSize(30)
  if (clickCount>0) {
    text(colors[n], 200, 338);
  } else {
    text("try clicking!", 200, 338);
  }
}

function draw() {
  background(220);

  drawSmiley();
  drawTag();
}

Click here to check it out in the p5js.org sketch editor and play around with the program!