Week 1: My Sketch

Write a blog post about how computation applies to your interests. This could be a subject you’ve studied, a job you’ve worked, a personal hobby, or a cause you care about. What projects do you imagine making this term? What projects do you love? (Review and contribute to the ICM Inspiration Wiki page. In the same post (or a new one), document the process of creating your sketches. What pitfalls did you run into? What could you not figure out how to do? How was the experience of using the web editor? Did you post any issues to github?

p5.js link

Sketch process and pitfalls:

While I was doing my sketch, I was thinking of drawing my self-portrait. The results did not come out as I expected with the hard time coding the curves.The bezier() code is a little bit difficult to understand how it works, but it looks very similar to the combination of Adobe illustrator and the old ways of mapping a website. So I level it down to a cute cartoon that I used to play with my gameboy in childhood.

I started off with the ellipse() and bezier() codes to build the body of “Kirby”, and picking up colors from Adobe Photoshop to code the hue values I wanted. Next, I made several ellipse() of his eyes using the same y-coordinator, height and width, so it makes the eyes symmetrical. In the process of piling up the pupils of the eyes as layers, I realized the first codes will become the background, and the last codes will become the foreground, so I rearrange the layers I wanted by moving up and down the codes.

After adding the little cheeks below the eyes, I struggle most on the smile of Kirby’s. The arc() was the hardest part I have went through. I first used the arc() with the constants: HALF_PI, PI, QUARTER_PI, I didn’t quite understand how it works at first, so I checked up on more details about it, and find 2 different ways to define the starting and ending point of circle: Processing and w3schools.

 

I find the following methods could have the same result:

arc(195, 130, 50, 70, QUARTER_PI, HALF_PI+QUARTER_PI);
or
arc(195,130,50 ,70, 0.75, 0.75*Math.PI);

When I was struggling with bezier(), I find this awesome coding and drawing live from one of our ITP students: p5 playground

It allows me to have a deeper understanding of the mapping and anchor points for bezier(), I wish the p5.js could implement similar guide lines or mapping points, or else it will take me a long time to update the code and see if it sets on the right position. If I could have more coding experience, I would like to update the p5 playground 2.0, to help design/visual students to know the structure of the code.

References:
https://www.w3schools.com/tags/canvas_arc.asp
http://processingjs.org/reference/arc_/
http://1023.io/p5-inspector/

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to Top