Mini Project 1: Drawing with code

Project link: https://editor.p5js.org/Sara-307/sketches/7r9N-iLRY

Brief Description and Concept

My first mini project is an animated version of my self-portrait. The illustration features a depiction of myself with double ponytails (I chose this hairstyle because I like double ponytails) and a little dog. I filled the scene with different shades of blue, as blue is my favorite color. As for the little dog, I currently don’t have a pet dog, but I’ve always been a dog person, so I decided to include a cute puppy in my self-portrait:) In terms of the art style, I partly referenced the aesthetic of the animated series “the Powerpuff Girls” because I find it incredibly cute.

Visual Documentation

Coding

Here are my code：

function setup() {
createCanvas(600, 420);
}

function draw() {
background(204, 230, 255);
noStroke();

fill(179, 134, 0);
beginShape();
curveVertex(128, 145);
curveVertex(115, 130);
curveVertex(100, 120);
curveVertex(80, 125);
curveVertex(60, 160);
curveVertex(70, 240);
curveVertex(30, 270);
curveVertex(70, 285);
curveVertex(120, 260);
endShape(CLOSE); //ponytail1

beginShape();
curveVertex(274, 145);
curveVertex(285, 130);
curveVertex(300, 120);
curveVertex(320, 125);
curveVertex(340, 160);
curveVertex(330, 240);
curveVertex(370, 270);
curveVertex(330, 285);
curveVertex(280, 260);
endShape(CLOSE); //ponytail2

fill(255, 230, 204);
circle(110, 210, 50); //ear
circle(290, 210, 50);

fill(179, 134, 0);
ellipse(200, 200, 200, 220); //hair

fill(255, 230, 204);
arc(200, 200, 200, 220, 0, PI, PIE); //face
triangle(100, 200, 300, 200, 200, 155);
rect(175, 280, 50, 50); //neck
fill(153, 206, 255);
square(120, 320, 160, 10); //clothes
triangle(120, 327, 120, 450, 80, 450);
triangle(280, 327, 280, 450, 320, 450);
fill(255);
triangle(140, 320, 260, 320, 200, 360);
fill(255, 230, 204);
triangle(150, 320, 250, 320, 200, 350);
fill(0, 119, 230);
circle(200, 380, 15);
circle(200, 410, 15);

fill(51, 156, 255);
circle(100, 230, 15); //earing1
circle(300, 230, 15); //earing2
fill(230, 247, 255);
triangle(275, 130, 290, 150, 285, 160);
fill(51, 133, 255);
circle(290, 160, 20);
fill(255, 170, 170);
ellipse(140, 255, 35, 25); //cheek
ellipse(260, 255, 35, 25);
fill(255);
ellipse(150, 220, 45, 55);
fill(51, 133, 255);
circle(154, 214, 37);
fill(0);
circle(157, 213, 28); //eye1
fill(255);
circle(163, 208, 5);
fill(255);
ellipse(250, 220, 45, 55);
fill(51, 133, 255);
circle(254, 214, 37);
fill(0);
circle(257, 213, 28); //eye2
fill(255);
circle(263, 208, 5);
fill(255, 204, 153);
ellipse(200, 243, 15, 10); //nose
fill(255, 170, 170);
arc(200, 265, 55, 45, 0, PI, PIE); //mouth

fill(255);
square(270, 350, 100); //dog's face
triangle(270, 350, 270, 390, 240, 400); //dog's ears
triangle(370, 350, 370, 390, 410, 400);
fill(0);
circle(300, 390, 15); //dog's eye1
circle(340, 390, 15); //dog's eye2
fill(255);
circle(303, 385, 6);
circle(343, 385, 6);
fill(0);
ellipse(320, 410, 15, 5);

fill(255);
ellipse(430, 100, 220, 110); //bubble
triangle(380, 130, 370, 180, 430, 140);
fill(0);
textSize(28);
text("Hiii I'm Sara!", 340, 110); //text
}

Reflection

• Prompt 1: Did you prefer exploratory programming, or using the reference? Why? Could you imagine a situation where you would use the other technique?Personally, I prefer using the reference list to facilitate my coding. Take my project  as an example, at first I started smoothly because I only use some fundamental functions like ellipse, rectangles and triangles to draw things. For these functions, I didn’t seek help from reference and chose to have a guess of the syntax and parameters.However, when it came to some details, I needed to use some unfamiliar functions that are more complex, such as curveVertex function I used in my code. I had no idea what to do without references. I even didn’t know if I wanted to create something like this, what function should I use. Therefore, I believe that go to the reference list is always the safest way to help m finish the code. But maybe we can also try exploratory programming when the functions we would use are not so hard or when we cannot find a satisfactory answer in reference.

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

There are some curves in my project and I think drawing them on paper is much easier than creating them by programming. And when I was sketching, I can easily draw some rotated images. But I need to calculate things like angle and starting point when I do coding.

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

Filling images with color would be more efficient when we write a program to do so. And we don’t need a ruler to create something made up of straight lines. What’s more, when there are something wrong with my code, the “console” column would give me a hint so that I can correct them.