Project name: me and cats
Link to my project: https://editor.p5js.org/Sky-Falling/sketches/b7PbR1tFz
Description: This a drawing that I stand in the middle of the canvas while cats from all corners staring at me. The image in the middle is quite representative of me as it embodies some of my features like round chin, long bangs and disobedient hair. The reason I draw so many cats is because I want to make the drawing more playful and stress the fact that I love cats.
Picture:
Coding:
function setup() {
createCanvas(600, 600); //the display board that you draw
}
function draw() {
background("#BE9C9C"); //I want the background to be calming and warm
fill("rgb(235,215,215)");
noStroke();
beginShape();
vertex(277, 0);
vertex(367, 0);
vertex(356, 600);
vertex(199, 600);
endShape(CLOSE);
beginShape();
vertex(600, 275);
vertex(600, 367);
vertex(0, 344);
vertex(0, 199);
endShape(CLOSE); //create the space accomadating cats
stroke(0);
strokeWeight(0.5);
fill(241, 194, 125); //the color of my skin
arc(300, 300, 100, 100, 0, PI); //the chin
fill(235, 211, 197);
arc(250, 285, 10, 20, 0.5 * PI, 1.5 * PI);
arc(350, 285, 10, 20, 1.5 * PI, 2.5 * PI);
fill(100, 100, 100); //my ears
fill(241, 194, 125);
line(250, 300, 250, 270);
line(350, 300, 350, 270); //draw the upper part of the face
noStroke();
rect(250, 270, 100, 30);
stroke(0); //I use rectangle to fill the color of the remaining part of the face
fill(0); //the color of eyes and hair is not the same as face
arc(300, 270, 100, 75, PI, 2 * PI);
arc(300, 270, 100, 15, 0, PI); //the hair part
circle(275, 294, 10);
circle(325, 294, 10); //eye part
noFill();
strokeWeight(3);
arc(275, 285, 25, 5, PI, 2 * PI);
arc(325, 285, 25, 5, PI, 2 * PI); //eyebrow
strokeWeight(1);
fill(215, 107, 120);
arc(300, 323, 30, 30, 0, PI);
line(285, 323, 315, 323); //my mouth
fill(0);
triangle(300, 307, 297, 312, 303, 312); //my nose
triangle(306, 287, 299, 270, 316, 270); //my bang
noFill();
arc(299.5, 333, 20, 3, PI, 2 * PI); //my tongue which is in my mouth
print(mouseX, mouseY); //help find the coordinate
fill(0);
triangle(291, 232, 300, 245, 299, 222);
cat(493, 112, 3, "L", "rgba(149,154,36,0.89)");
cat(142, 458, 1, "R", "rgb(212,92,195)");
cat(100, 101, 2, "R", "rgb(99,159,87)");
cat(460, 502, 0, "L", "rgb(115,205,194)"); //create 4 cats
}
function cat(a, b, TYPE, POSITION, COLOR) {
//first 2 are coordinates, third is which side
//the cat is pointing to,forth is the color
fill(COLOR); //color
if (POSITION == "L") {
ellipse(a + 15, b, 155, 120);
} //point to which direction
if (POSITION == "R") {
ellipse(a - 15, b, 155, 120);
}
fill(100, 100, 100);
triangle(a - 30, b - 40, a - 15, b - 70, a, b - 40);
triangle(a + 30, b - 40, a + 15, b - 70, a, b - 40); //ears
fill(0);
ellipse(a - 15, b - 10, 18, 18);
ellipse(a + 15, b - 10, 18, 18); //eyes
fill(0);
triangle(a, b + 8, a - 6, b + 14, a + 6, b + 14); //nose
if (TYPE == 0) {
fill(215, 107, 120);
rect(a - 15, b + 20, 30, 12);
} //embarassed cat
if (TYPE == 1) {
fill(215, 107, 120);
ellipse(a, b + 30, 30, 17);
} //shocked cat
if (TYPE == 2) {
fill(215, 107, 120);
arc(a, b + 25, 30, 24, 0, PI);
line(a - 15, b + 25, a + 15, b + 25);
} //happy cat
if (TYPE == 3) {
fill(215, 107, 120);
arc(a, b + 35, 30, 24, PI, 2 * PI);
line(a - 15, b + 35, a + 15, b + 35);
} //sad cat
stroke(0);
strokeWeight(2);
line(a - 18, b + 18, a - 42, b + 12);
line(a + 18, b + 18, a + 42, b + 12);
line(a - 18, b + 30, a - 42, b + 36);
line(a + 18, b + 30, a + 42, b + 36); //beard of cat
}
Explaining the code:
1. The most time consuming part must be drawing curves. Whenever it comes to drawing bangs or mouth, I always spent lots of times on finding a reasonable curve that resemble the shapes. And, after doing so, I then found it difficult to fill the space enclosed by the 2 curves with desired colors. So I searched online but still failed to achieve that effect. There is no doubt that curves are “nightmare to me” and I should learn more about this.
2. It’s unnecessary to draw the cats for 4 times. So I create a “cat function” instead to save some time. To add diversity to these cats, I employed some parameters like facing direction, skin color and position.
3. Actually, part of the reason I added cats is because I drew my head too small at the beginning and I found it difficult to stretch my head at the same proportion. So I have to find a way to fill out the vacancy. And at the beginning, I’ve tried to fill some complex patterns composed of various types of shapes with colors but failed. So I had to use simple shapes like ellipses and lines as the outlines which are easy to fill colors.
Reflection:
- It’s not my first time “coding a drawing” as I have used processing for interaction lab before. Although it’s quite similar to JavaScript in lots of senses, I still felt I gained lots of new experience from this work. The most valuble one is probably about painting-style. Due to the limitation and inconvenience of handling slight details in computer drawing, we shouldn’t focus on making the painting as close to reality as possible, or it will be too time-consuming as you need to calculate every single point and curve, if you really want to make it precise. Rather, just use straight lines and arcs to highlight the most eyecatching features of the object in an exaggerated way. This is what computer really good at.
- Think twice before you act. Although you can always erase something on the canvas, it’s still quite time-consuming to find the sentences that went wrong and find out what cause the errors. So remember to add detailed comments for yourself and also rememeber to change fill(), stroke() and strokeWeight() whenever you start to draw a new part. However, like changing the size of your head or stretch the cat to be longer, there’re still lots of changes difficult to make. So the best solution is always to decide the coordinate of the starting point or centre point, length or type of curves and width-height proportion beforehand.
Additional questions:
- I prefer reading reference beforehand. But I have to admit that some references are quite confusing, so sometimes exploratory programming may work better in such case. And if I have little idea about what to draw exactly, then I would probably explore some new techiniques by myself to draw some inspiration.
- When drawing on a paper, what you need to concern at is how to make the line straight and circle like a circle, but in the sense of computer, what you need to worry about is to make the drawing less machine-like, which means add some imperfectness. And also, it’s very hard to draw a curve as you want because it involves finding the exact locations of anchor points, but for drawing on paper, it’s much easier. You just convert what you think onto the paper. But computer is better at coping with something requires great precision and iteration. Like it’s time-consuming to draw 4 similar cats on paper but it’s just the matter of copy and paste for computer.
Leave a Reply