Mini Project 1: Drawing with Code

Project Link

https://editor.p5js.org/King-Raphael/full/MvnjYR0j5

Brief Description and Concept

In this mini-project, I drew an abstract self-portrait inspired by artists like Picasso and NorthFea. I began by selecting the primary colors of the clothes I was wearing and my skin tone as the main colors for the painting. Then, I incorporated abstract lines and curves to create a sketch, which I then used as a reference to digitally illustrate my self-portrait by p5.js.

Visual Documentation

Coding

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

function draw() {
  background(230, 219, 200);
  noStroke();
  
  fill(237, 185, 219);//face shape
  beginShape();
    vertex(0, 80);
    vertex(150, 30);
    vertex(180, 50);
    vertex(300, 0);
    vertex(200, 380);
    vertex(380, 420);
    vertex(360, 440);
    vertex(430, 500);
    vertex(360, 560);
    vertex(320, 700);
    vertex(360, 800);
    vertex(0, 800);
  endShape();

  fill(148, 108, 163);//hair
  arc(380, 0, 160, 100, 0, PI);
  arc(530, 0, 140, 100, 0, PI);
  
  fill(255);//eyes white
  ellipse(100, 200, 120, 70, 6);
  ellipse(420, 240, 130, 80, 6);
  
  fill(69, 68, 63);
  quad(70, 170, 110, 170, 130, 230, 90, 230);
  quad(390, 205, 430, 205, 450, 275, 410, 275);
  
  fill(92, 49, 22, 90);//left corner shapes
  rect(0, 600, 90, 200);
  fill(115, 46, 16, 90);
  triangle(0, 650, 0, 800, 150, 800);

  fill(138, 26, 11);
  beginShape();//mouth
    vertex(150, 560);
    vertex(300, 500);
    vertex(280, 530);
    vertex(320, 570);
  endShape();
  
  fill(163, 209, 208, 90);//right corner shapes
  circle(600, 460, 90);
  
  fill(105, 193, 224, 90);
  circle(600, 800, 240);
  circle(600, 700, 140);

} 

Animating the interaction between the pupils and the whites of the eyes was tricky, as the training required precise calculation of the positions of ellipses and parallelograms – a fiddly aspect in code. Also, different coloration had to be applied after each frame was drawn, which needs different fill() function to work.

Findings / Lessons Learned

From this project, the key takeaway is the complementary nature of both traditional and digital techniques. Each method has its unique strengths—where drawing prioritizes creativity and flow, coding offers precision and flexibility. The integration of exploratory programming with reference materials accelerates learning and application, while the blend of sketching and coding enhances both creative expression and technical execution.

Reflection

This mini-project beautifully melded traditional sketching and digital illustration, drawing inspiration from both Picasso and contemporary artist NorthFea. Starting with a color palette based on my attire and skin tone, I created an abstract sketch that emphasized artistic interpretation over literal representation. This sketch then served as a blueprint for my digital work in p5.js.

The process highlighted the value of integrating various artistic techniques. It demonstrated how traditional drawing can enrich digital art, providing depth and personal touch while digital tools offer precision and versatility. This project reinforced the importance of embracing both mediums to enhance creative expression and final outcomes.