CCLab Mini Project 1: Drawing with Code

At The Very Beginning

At the very beginning of the project, I got confused about which photo should I choose. They are either too complicated(e.g. my photography work) to draw or lack aesthetic value. Finally, I found this photo in my gallery which is suitable for me to draw. (It’s totally bread but it has a watermelon flavor. It’s YUMMY!)

Then I use different shapes to draw it on my iPad. (While in class I found the ‘rotate()’ is hard to use so most of the shapes I draw needn’t rotate(though I’ve finally used ‘rotate()’ with ‘translate()’ ))

Start Coding!

Then I started working with the code.

Firstly, I thought about the order to draw these shapes in my mind. It should be done before getting started because it will drive you crazy to change orders if you don’t do this beforehand. Then I started to draw.

I used a color picker to get the colors on my photo. At first, I still used RGB to define colors. But I found it a waste of a lot of time to copy the value into my code. Then I used the HEX value, which is much more time-saving.

I also used the Draw application to get the exact positions of the lines and shapes.

This is what I had got when I finished the 1st version.

2nd Edit

However, I think it’s quite simple and not complicated enough. So I started to draw some shadows to make it more realistic. I used the 50%black as the shadow mask. I also put a 5% black mask on the package to simulate the transparent plastic package (but it’s not obvious at all).

3rd Edit

After that, I felt, again, not complicated enough. So I decided to add more details on the food. I add a small watermelon on the hand of that cute stuff which is quite easy. And then I browse the references page and find ‘curveVertax()’ to draw the seeds. Also, I use  ‘translate()’ and ‘rotate()’ (still confused about rotate) to put the seeds in the correct place.

This is what I’ve got at last.

Reflections

It’s really interesting to draw with code. I learned a lot of techniques for painting different shapes. Also, I realize the importance of annotation between the codes. It’s wasting time to recall the effect of codes if there’s no explanation.

For More Info

If you’re interested in the code, you can click me to find them.

p5.js draft link: https://editor.p5js.org/AndyHyprillion/sketches/a3RSv-4TS