For me, while it may sound funny, getting the ‘artistic part’ of the project right was the biggest challenge. I had the picture of myself in my head, but I lack the ability of expressing that artistically (both by hand-drawing or code). Accepting the self I am, I decided to try to draw as many things in the portrait so that it would be good practice for me to try drawing different things.
The concept was to show how the sun in Abu Dhabi gives all of us a tan as time goes by. I wanted to make it interactive, so I made the skin colour change depending on the position of the user’s mouse.
//Outside (red part) beginShape(); noStroke(); vertex(p1.x, p1.y); bezierVertex(p1.x, p1.y, 310, 36, p2.x, p2.y); bezierVertex(p2.x, p2.y, 345, 76, p3.x, p3.y); bezierVertex(p3.x, p3.y, 360, 100, p4.x, p4.y); bezierVertex(p4.x, p4.y, 320, 134, p5.x, p5.y); bezierVertex(p5.x, p5.y, 295, 145, p6.x, p6.y); bezierVertex(p6.x, p6.y, 245, 70, p7.x - 10, p7.y); bezierVertex(p7.x, p7.y, 235, 80, p8.x, p8.y); bezierVertex(p8.x, p8.y, 275, 50, p1.x, p1.y); fill(250, 95, 85); endShape();
As for the code, I want to highlight more on the trouble I had as there’s nothing too complicated in my project. The outside layer of the sun is drawn by bezierVertex()- I had to put in multiple different coordinates until it seemed okay. I personally thought this was a very inefficient way of doing it. Also, it was hard to exactly get it drawn how I wanted it to be. I spent quite a lot of time looking for different methods, but wasn’t able to find one. I would love to see if anybody has suggestions regarding this.
I think for my future projects, I would try to draw a grid by hand and figure out the aesthetics first. I saw a few people’s blog posts and saw how the image they wanted to draw was set first and the code specifically followed how each elements were drawn (the angles, the coordinates, etc). I think maybe if I take that step, the aesthetics could be better.