ICM Week 1 – Sketch

The first week of Introduction to Computational Media, we learned about different types of programming language and how to start create sketches with p5.js.

The goal of this first sketch is to create a portrait of a creature using the following 2D Primitives,

arc

Ellipse

Rectangle

Polygon

I decide to draw Evee, and I found this reference photo from Google.

I started with a general shape of head, which is a rectangle and two arcs, added eyes and nose with ellipses, and mouse with arcs.

Then I start playing with the polygon tool to sketch the ears, spend a lot of time trying different coordinates to make it looks good, then add inside of the ear with a different fill.

Next, I created the fur below the head with ellipses and arc lines.

The toughest part of this sketch is probably the tail, i use arcs to draw the positive curves, then block it out with background colour with one negative curve.

The rest of the body are fairly simple.

Finally i touch it up with some shadow with a darker shade of colour.

heres the code:

https://editor.p5js.org/sidchou/sketches/SJoqJ83Pm

function setup() {
createCanvas(400, 400);
rectMode(CENTER);
noLoop();
}

function draw() {
background(220);
// Butt
stroke(50, 49, 47);
strokeWeight(2);
fill(155, 118, 74);
ellipse(220, 225, 80, 50);

//tail
stroke(50, 49, 47);
strokeWeight(0);

fill(155, 118, 74);
arc(255, 115, 100, 200, 5.6, 2) //shadow

fill(203, 157, 102);
// arc(255,115,100,200,5.6,2)
arc(255, 115, 100, 150, 5.6, 2)
arc(248, 165, 80, 100, 2, 5.2)
triangle(280, 135, 294, 50, 224, 125);
fill(242, 234, 197);
arc(255, 115, 100, 200, PI + 0.5, 0.5)
fill(220);
ellipse(217, 50, 150, 140);
strokeWeight(2);
arc(217, 50, 150, 140, 0, 1.34);
fill(0, 0, 0, 0);
arc(255, 115, 100, 200, 5.6, 2)
arc(248, 165, 80, 100, 2, 4.4)

//Legs
stroke(50, 49, 47);
strokeWeight(2);

fill(155, 118, 74); //shadow
rect(240, 265, 30, 50, 10);
ellipse(175, 270, 40, 60);

fill(203, 157, 102);
beginShape();
vertex(210, 320);
vertex(215, 250);
vertex(250, 250);
vertex(230, 320);
endShape();
arc(216, 320, 28, 15, 0, 5.5);

fill(155, 118, 74); //shadow
beginShape();
vertex(213, 278);
vertex(215, 250);
vertex(250, 250);
vertex(236, 299);
endShape();
strokeWeight(0);
ellipse(216, 322, 22, 8);

//pawm

fill(203, 157, 102);
strokeWeight(1);
ellipse(216, 322.5, 6, 3);

//furr
stroke(50, 49, 47);
strokeWeight(0);
fill(205, 182, 161); //shadow
ellipse(230, 250, 60, 60);
arc(200, 190, 150, 150, 1, PI – 1);

fill(241, 234, 197);
ellipse(200, 250, 60, 80);
ellipse(170, 250, 55, 60);

fill(205, 182, 161); //shadow
arc(210, 190, 150, 160, 1, PI – 1);

fill(0, 0, 0, 0); //outLine
strokeWeight(2);
arc(230, 250, 60, 60, -1, 1.8);
arc(200, 250, 60, 80, 0.5, PI);
arc(170, 250, 55, 60, 1.3, PI + 1);
// arc(200,250,50,60,0,1);
arc(190, 255, 60, 85, 0.6, HALF_PI – 0.5);
arc(190, 255, 60, 85, 0, 0.3);
arc(220, 255, 60, 85, 2.7, PI);
// arc(180,265,40,30,3.4,5);

stroke(50, 49, 47);
strokeWeight(2);
fill(203, 157, 102);
//head
rect(200, 207.5, 100, 85, 15);

arc(200, 230, 150, 150, PI + 1, -1);

fill(155, 118, 74); //shadow
arc(200, 186, 150, 150, 1, PI – 1);

fill(203, 157, 102);
strokeWeight(0);
arc(200, 176, 150, 160, 1, PI – 1);
strokeWeight(0);
//LeftEar
beginShape();
vertex(170, 180);
vertex(150, 130);
vertex(80, 90);
vertex(120, 160);
endShape(CLOSE);
//RightEar
beginShape();
vertex(230, 180);
vertex(250, 130);
vertex(320, 90);
vertex(280, 160);
endShape(CLOSE);

fill(103, 68, 51);
//LeftInEar
beginShape();
vertex(155, 160);
vertex(145, 135);
vertex(95, 105);
vertex(125, 155);
vertex(150, 165);
endShape(CLOSE);
//RightInEar
beginShape();
vertex(245, 160);
vertex(255, 135);
vertex(305, 105);
vertex(275, 155);
vertex(250, 165);
endShape(CLOSE);

fill(49, 49, 48);
//LeftInEar2
beginShape();
vertex(155, 160);
vertex(145, 135);
vertex(125, 123);
vertex(135, 135);
vertex(128, 134);
vertex(134, 143);
vertex(126, 141);
vertex(130, 148);
vertex(119, 145);
vertex(125, 155);
vertex(150, 165);
endShape(CLOSE);
//RightInEar2
beginShape();
vertex(245, 160);
vertex(255, 135);
vertex(275, 123);
vertex(265, 135);
vertex(272, 134);
vertex(266, 143);
vertex(276, 141);
vertex(270, 148);
vertex(281, 145);
vertex(275, 155);
vertex(250, 165);
endShape(CLOSE);

strokeWeight(2);
fill(0, 0, 0, 0);
strokeJoin(ROUND);
beginShape();
vertex(166, 170);
vertex(150, 130);
vertex(80, 90);
vertex(120, 160);
vertex(152.5, 173);
endShape();
beginShape();
vertex(234, 170);
vertex(250, 130);
vertex(320, 90);
vertex(280, 160);
vertex(247.5, 173);
endShape();

fill(100, 53, 77);
//LeftEyeUnder
ellipse(180, 194, 20, 25);
//RightEyeUnder212.5
ellipse(220, 194, 20, 25);

fill(50, 49, 47);
//LeftEye
ellipse(180, 189, 20, 25);
//RightEye182.5
ellipse(220, 189, 20, 25);

stroke(50, 49, 47);
strokeWeight(2);
fill(0, 0, 0, 0);
//LeftEyeIn
ellipse(180, 192, 20, 30);
//RightEyeIn
ellipse(220, 192, 20, 30);

//EyeRefl
stroke(0, 0);
strokeWeight(0);
fill(255);
ellipse(178, 184, 8, 10);
ellipse(218, 184, 8, 10);

//nose
fill(50, 49, 47);
ellipse(200, 212, 6, 3);
//mouth
strokeWeight(0);
fill(91, 58, 64);
arc(200, 221, 30, 50, 0, PI);
fill(210, 140, 137);
ellipse(200, 240, 18, 12);

stroke(50, 49, 47);
strokeWeight(2);
fill(0, 0, 0, 0);
arc(200, 223, 30, 50, 0, PI);
fill(203, 157, 102);
arc(215, 220, 30, 10, 0.2, 3.1);
arc(185, 220, 30, 10, -0.2, -3.4);

}