Mini Project 1: Drawing with Code

Link to Project: ❀

Intro to Project:

I decided to take a quick swim away from realism in my self-portrait, instead, I opted for a more cartoonish style.

In the reality of this digital canvas, I’m depicted as a super cute zombie with an adorable bow, frantically fleeing from a terrifying dinosaur with a bowling pin-like build.

Allegedly, my grand solution to escaping this scene is by diving headfirst into a mysterious purple portal. Perhaps it may bring me to reality.

CODE

function setup() {

createCanvas(600, 600);

noSmooth(); // It cannot be pixel art unless we change this

}

function draw() {

background(152, 200, 194);

//face

let x = 190; // starting x of the rectangle

let y = 90; // starting y of the rectangle

let w = 160; // width of the rectangle

let h = 200; // height of the rectangle

let startColor = color(193, 239, 130); // start color of gradient

let endColor = color(100, 150, 80); // end color of gradient

noFill(); // gradient for skin

for (let i = 0; i < h; i++) {

let interColor = lerpColor(startColor, endColor, i / h); // Interpolate color

stroke(interColor);

line(x, y + i, x + w, y + i); // horizontal line for the gradient

}

// arc for the chin

fill(120, 169, 112);

noStroke();

// the bottom half of the ellipse (head shape)

arc(270, 270, 165, 127, 0, PI, CHORD); // Bottom half of ellipse

// chisel the headshape, omg im giving plastic surgeon

fill(152, 200, 194);

triangle(320, 12, 460, 290, 350, 290); // Right triangle

triangle(210, 12, 140, 290, 190, 290); // Left triangle

// left eye

eye(240, 200);

// right eye

eye(310, 200);

}

function eye(x, y) {

// Outline of the eye

fill(255);

stroke(0);

strokeWeight(5); // A nice fat stroke for the outline

rect(x - 18, y - 18, 36, 36); // Make the outline a little fatter

// White of the eye

fill(255);

stroke(0);

strokeWeight(2);

rect(x - 15, y - 15, 30, 30);

// Iris (black)

fill(0);

rect(x - 5, y - 5, 10, 10);

// Pupil (black)

fill(0);

rect(x - 2, y - 2, 4, 4);

// Reflection (white)

fill(255);

rect(x + 3, y - 7, 3, 3);

// pretty eyelashes (3 on top, 1 on the side)

strokeWeight(2);

line(x - 15, y - 18, x - 20, y - 25); // Left eyelash

line(x, y - 18, x, y - 25); // Middle eyelash

line(x + 15, y - 18, x + 20, y - 25); // Right eyelash

line(x + 18, y - 10, x + 25, y - 10); // Side eyelash

noStroke();

//nose

fill(184, 224, 124);

rect(270, 220, 10, 10);

fill(170, 215, 110);

rect(270, 230, 10, 10);

fill(155, 202, 95);

rect(270, 240, 10, 10);

fill(140, 190, 85);

rect(270, 250, 10, 10);

fill(125, 177, 70);

rect(270, 260, 10, 10);

//lips

fill(3, 20, 43);

rect(260, 290, 30, 10);

fill(3, 20, 43);

rect(260, 300, 40, 10);

fill(3, 20, 43);

rect(260, 280, 40, 10);

fill(80, 139, 92);

rect(260, 310, 40, 10);

fill(80, 119, 92);

rect(260, 270, 20, 10);

fill(80, 119, 92);

rect(280, 270, 20, 10);

//blush

fill(224, 119, 169);

ellipse(230, 240, 40, 20);

ellipse(320, 240, 40, 20);

//hair

fill(0, 0, 0);

rect(300, 150, 40, 7);

rect(220, 160, 40, 7);

fill(128, 164, 79);

rect(160, 160, 40, 50);

fill(0, 0, 0);

rect(170, 210, 30, 100);

fill(0, 0, 0);

rect(140, 80, 60, 80);

fill(0, 0, 0);

rect(110, 100, 50, 80);

fill(0, 0, 0);

rect(130, 160, 30, 80);

rect(140, 210, 30, 80);

rect(250, 90, 20, 60);

rect(280, 90, 20, 60);

rect(310, 90, 20, 60);

rect(220, 90, 20, 60);

rect(200, 90, 20, 80);

rect(200, 90, 10, 100);

rect(190, 65, 130, 50);

rect(100, 180, 30, 20);

rect(120, 230, 10, 20);

rect(120, 260, 20, 10);

rect(150, 310, 20, 10);

fill(0, 0, 0);

rect(340, 90, 20, 100);

rect(320, 90, 25, 50);

rect(340, 130, 20, 10);

//bow

bow(150, 130);

}

function bow(x, y) {

fill(140, 150, 193);

noStroke();

// Left part of the bow

ellipse(x - 30, y, 40, 30); // Left of the bow

// Right part of the bow

ellipse(x + 30, y, 40, 30); // Right of the bow

// Center knot of the bow

rect(x - 10, y - 10, 20, 20, 5); // square knot with rounded corners

//shirt

fill(140, 150, 193);

rect(215,340,70,90);

fill(117, 166, 125);

rect(225,320, 20, 30);

fill(117, 166, 125);

rect(225,320, 20, 30);

//skirt

skirt(250, 445);

}

function skirt(x, y) {

fill(0);

noStroke();

quad(x - 50, y + 30,

x + 50, y + 30, // Bottom-right corner

x + 30, y - 30,

x - 30, y - 30); // Top-left corner

//legs

fill(117, 166, 125)

rect(254, 475, 20, 50);

rect(260, 520, 30, 20);

rect(220, 475, 20, 30);

rect(180, 485, 40, 20);

rect(180, 485, 20, 30);

//arms

rect(280,350, 90, 20);

fill(117,186,110)

rect(190,370, 90, 20);

//cyclop dino

dino(100, 600);

}

function dino(x, y) {

// Dinosaur body

fill(50, 100, 50);

noStroke();

// Body (peeking around the corner)

ellipse(x - 40, y - 50, 100, 150); //

// Head

ellipse(x - 30, y - 130, 60, 60);

// Eye

fill(255); // White of the eye

ellipse(x - 20, y - 140, 20, 20);

fill(255, 0, 0); // Red pupil

ellipse(x - 20, y - 140, 12, 12);

fill(0); // Black small pupil

ellipse(x - 20, y - 140, 5, 5);

// Sharp teeth

fill(255); // White for the teeth

triangle(x - 5, y - 120, x - 15, y - 120, x - 10, y - 110); // Right tooth

triangle(x - 25, y - 120, x - 35, y - 120, x - 30, y - 110); // Left tooth

// Clawed arms

fill(50, 100, 50);

ellipse(x - 10, y - 90, 30, 10); // Right arm

ellipse(x - 70, y - 90, 30, 10); // Left arm

// Sharp claws

fill(0);

triangle(x - 15, y - 90, x - 10, y - 100, x - 20, y - 100); // Right claw

triangle(x - 65, y - 90, x - 70, y - 100, x - 60, y - 100); // Left claw

// Tail

fill(50, 100, 50);

triangle(x - 80, y - 50, x - 40, y - 30, x - 100, y); // Tail on the left side

// Spikes on the back

fill(0); //

triangle(x - 20, y - 110, x - 10, y - 90, x - 30, y - 90); // First spike

triangle(x - 30, y - 90, x - 20, y - 70, x - 40, y - 70); // Second spike

triangle(x - 40, y - 70, x - 30, y - 50, x - 50, y - 50); // Third spike

//portal/door thing

fill(120, 0, 138);

ellipse(567, 300, 45, 500);

//finally omg i was looking for a bridge

}