Drawing with Code

Project Link

https://editor.p5js.org/kw3508/sketches/dQEvXCYP8

Introduction

This is a project from the first recitation class of the Creative Coding Lab, where we learned the basic graphic function of p5.js.  To draw a self-portrait on p5.js, I found a goofy picture my friend took of me and tried to sketch myself accordingly.  They don't sync visually but spiritually in my eyes haha. With p5.js, I also upgraded the portrait by adding interaction with the mouse -- If you touch my "face" with your mouse, I will smile... The message I'm trying to convey is that I'm more welcoming than I look :)

Demo/Visual Documentation

Coding

My hair

I permed my hair a year ago and it's still curly. I wanted to use curve() initially but realized that circle() is way more efficient.

fill(0);

  noStroke();

  circle(10,10,400);

  circle(595,50,450);

  circle(200,10,200);

  circle(400,10,250);

  circle(200,10,200);

  circle(40,200,200);

  circle(40,300,150);

  circle(60,380,150);

  circle(10,600,400);

  circle(650,300,300);

My eyebrows

curveVertex() is easier to use than curve() to me. Basically we locate the curve with three points we want the curve to pass. It's also important that the first and the last curveVertex() are used to decide the direction of the curves.

In order to make the end of the eyebrows sharp, I added two little triangles with the background color to cover part of the black color.

  noFill();

  strokeWeight(20);

  stroke(0);

  beginShape();

  curveVertex(240, 250);

  curveVertex(240, 250);

  curveVertex(180, 230);

  curveVertex(165, 240);

  curveVertex(165, 240);

  endShape();

  beginShape();

  curveVertex(365, 241);

  curveVertex(365, 241);

  curveVertex(401, 224);

  curveVertex(429, 225);

  curveVertex(429, 225);

  endShape();

  fill(150,13,13);

  noStroke();

  triangle(178,240,147,243,173,255);

  triangle(414,212,438,211,445,232);

My eyes

quaraticVertex() allows me to make a closed shape with curves and fill color into it.  bezierVertex() uses two "handles" to control the curve while quaraticVertex() uses one handle to locate the curve between two points, which is easier to use and might make more pointy shapes. I didn't understand these until the fellows and LAs explained to me! They are excellent!

  beginShape();

  noStroke();

  fill(255);

  vertex(245, 318);

  quadraticVertex(245, 280, 161, 272);

  quadraticVertex(179, 319, 221, 319);

  vertex(245, 318);

  endShape();

  beginShape();

  noStroke();

  fill(255);

  vertex(357, 313);

  quadraticVertex(370, 280, 433, 274);

  quadraticVertex(421, 320, 389, 317);

  vertex(357, 313);

  endShape();

Locating Trick 

Without this trick, I had to try the location out by altering the text bit by bit. However, this code helps us find the exact locations with our mouse. My beloved classmate Leyla taught me this!

//Display the mouse's coordinates.

  strokeWeight(1);

  stroke(250,0,0);

  textAlign(CENTER);

  textSize(16);

  text(`x: ${mouseX} y: ${mouseY}`, 80, 50); 

Question: Take one of the blocks of code and propose another way to code this to produce the same or similar results. Which one is better? Why do you like one more than the other one?

Answer: To locate the curves, what I first did was making points as references for me to know better where I wanted the curves to pass. But the mouse's coordinates are much more straightforward and less work.

Interaction

The effect I wanted was to replace the sad-looking mouth with a smiley one when the mouse is pressed. I tried the function mousePressed() first but didn't work. Later, I used the if sentence with "mouseIsPressed === true" as the condition and it worked!! Looking forward to learning about the reason in the next class!

  if (mouseIsPressed === true) {

  fill(15, 247, 42);

  noStroke();

  arc(305,448,90,120,0,PI);

  }

Findings & Lesson Learned

• Even though we just started learning the most basic functions, we could already draw a self-portrait! I feel that thinking and applying skills flexibly are sometimes even more important than the skill itself.

• It's important to figure out the real logic behind the functions instead of blindly trying. I wasted a lot of time because I wasn't aware of that.

• New things I've learned about JavaScript so far: 

Functions:

Setup: run one time, run once starts;

Draw: loop;

arc();

stroke()/fill();

beginShape/endShape - vertex;

Principles: 

Run from top to bottom;

The starting point of the coordinates is in the top left corner;

The (x,y) of rec() is not the centre of it, can be altered by recMode(CENTER);

Comment; comment a line out; comment a block out by select and ctrl+/;

Angle: 3/2PI, PI, 1/2PI

Colors: RGB (red, green, blue)each column controls the brightness (255 is the maximum; google#color picker)

• Others' works in Slack are super inspirational! They utilized the basic shapes in many creative ways. Some used triangles as the reflection of light, some added elements to express themselves smartly. I wish I could explore more in my future work as well.

Reflection Prompts

1. Did you prefer exploratory programming, or using the reference? Why? Could you imagine a situation where you would use the other technique?

I prefer using the reference because it's way more efficient. More importantly, the reference helps me better understand the computer language like a dictionary. At least for now, I feel I definitely need it. But I also don't think exploratory programming and relying on the reference are separable because I always have to have an exploratory idea first and then check if the reference could provide any functions that help bring that to reality. Meanwhile, to fully understand the information the reference provides, I also need to go through some exploratory trials afterward.

Maybe I'll use exploratory programming when there's no specific purpose and I just want to try if I'm able to communicate with the computer and see if the computer can surprise me.

2. In which ways (if any) was drawing on a piece of paper (as we did in our exercise) easier than writing the program?

To draw a specific shape, it takes many lines of instructions for the computer to understand me. Thus, drawing on paper allows more direct connections between my brain and the outcome because it's easier to control my hands. 

3. In which ways (if any) is writing the program easier than drawing on a piece of paper?

Programming allows me to locate more accurately with coordinates;

It takes only one second for the computer to complete a shape, which is much faster than hand drawing;

It's easier to make changes in programming by simply altering the numbers I put in, while it's hard to do that on paper without damaging anything.

Appendix