Project Link

https://editor.p5js.org/CassieHuang/sketches/5lPqsPppl

Brief Description

In this mini-project, I explore the intriguing contrasts and parallels between traditional paper-based drawing and code-based art. The journey unfolds in three steps: first, I took a photograph of a dorm cabinet. Then, I translated this image into a hand-drawn sketch on paper, using geometric shapes for a unique interpretation. And finally, I recreated the hand-drawn sketch on a digital canvas using p5.js.

Visual Documentation

Original Photo of A Cabinet

Hand-Drawn Sketch

Code-Based Sketch

Coding

Here is my code.

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

function draw() {
  background(220);
  strokeWeight(1);
  
  //right wall
  fill(253);
  rect(350,0,50,180);
  quad(360,75,360,50,380,40,380,65);
  strokeWeight(2);
  line(370,65,370,60);
  line(365,60,365,55);
  line(375,50,375,55);
  strokeWeight(1);
  fill(195, 176, 145);
  rect(400,0,50,530);

  
  //staff on the boxes
  fill(255);
  push();
  translate(260,135);
  rotate(-PI/18);
  rect(0,0,110,30);
  pop();
  fill(180);
  ellipse(120,140,40,40);
  ellipse(150,140,40,40);
  fill(230,207,230);
  ellipse(130,160,110,40);
  ellipse(290,180,40,40);
  
  //overall rect
  fill(200);
  rect(50,200,350,270);
  rect(50,180,350,20);
  rect(50,200,20,330);
  
  //black rect
  fill(0);
  rect(70,200,330,20);
  
  //three boxes
  fill(200);
  rect(70,220,110,230);
  rect(180,220,110,230);
  rect(290,220,110,230);

  //rect on the wall
  fill(255);
  rect(230,70,30);
  strokeWeight(3);
  line(240,80,240,85);
  line(250,80,250,85);
  line(245,88,245,93);
  strokeWeight(1);
  
  //bottom
  fill(160);
  quad(350,450,350,490,400,530,400,450);
  rect(90,450,260,40);
  quad(70,530,70,450,90,450,90,490);
  
  //big rect in front of all
  push();
  translate(200,350);
  rotate(-PI/20);
  fill(72,61,139,150);
  rect(0,0,90,220);
  fill(255);
  rect(0,-10,90,20);
  circle(20,30,39);
  circle(65,30,41);
  circle(20,73,40);
  circle(65,73,40);
  circle(20,115,40);
  circle(65,115,40);
  circle(20,156,41);
  circle(68,156,41);
  circle(23,198,42);
  circle(68,198,42);

  fill(180);
  circle(20,30,10);
  circle(65,30,10);
  circle(20,73,10);
  circle(65,73,10);
  circle(20,115,11);
  circle(65,115,11);
  circle(20,156,12);
  circle(68,156,12);
  circle(23,198,12);
  circle(68,198,12);
  
  fill(72,61,139,50);
  rect(0,10,90,210);
  pop();
  
  //interaction
  fill(255,215,0);
  circle(mouseX-5,mouseY-5,10);
  stroke(0);
} 

Challenges

• To rotate an object, I used the rotate() and translate() functions. 
• To rotate only a few objects without affecting the whole canvas, I learned to use push() and pop() functions together with the help of the IMA fellow Carrot.

Fun

• Add the user interaction using mouseX, mouseY.

Reflection

Exploratory Programming vs. Reference

I found both exploratory programming and using a reference to be valuable approaches, each with its own benefits. Personally, I tend to lean towards exploratory programming as my preferred approach. Exploratory programming, in particular, allowed me to dive into the task with passion and interest. I could experiment with various values and functions to manipulate object positions and orientations. This approach encouraged a dynamic exploration of possibilities, which frequently produced unexpected and gratifying results. However, there were moments when I needed to refer to function references to fully understand their descriptions and specific usage, such as ‘rotate()’ and ‘translate()’ functions. In this project, I basically combined the two techniques, which significantly improved my drawing speed.

Drawing on Paper vs. Writing Code

On the one hand, when it came to drawing on paper, the process felt more intuitive and less focused on precise positioning. My primary task was to observe a photo and abstract the objects into 2D shapes. This approach allowed me to concentrate on the essence of the objects rather than getting bogged down in coordinate data and calculations. It was a more natural and free-flowing process, enabling me to capture the details of the scene without the need for complex mathematical considerations.

On the other hand, I also noticed that when writing code, especially for visual projects, achieving the desired adjustments was often more straightforward. I could directly manipulate values like the x-axis, y-axis, width, height, or color (RGB) to fine-tune the appearance and positioning of objects. This immediate feedback facilitated quick iterations and experimentation. In contrast, when sketching on paper, making adjustments sometimes required erasing and redrawing parts of the scene multiple times to achieve the desired composition.

Conclusion

Generally speaking, I think the paper-based sketching and p5.js-based programming serve as complementary tools in the creative process, each excelling in distinct areas. I’ve learned that my preference often depends on the project’s nature and my objectives.