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
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.
Hi Cassie, this is a great documentation!
Nice color palette too.
Maybe you could also add in the future, images of your code during the process, not only the final result. No worries about this post, just keep it in mind for the next posts.
Hi Professor Godoy, thank you for your suggestions! I’ll add these details in the future posts!