Author: Nelson Mbigili

My concept:

As I was thinking of what to draw making use of loops either (for or while), I decided to draw the Sky! I choose the sky because I thought drawing stars all over the sky manually one after another would be tiresome. So using loops would be the best option.

In order to make my art interactive I decided to make my sky dynamic, where by it would change mode from day mode to night mode or from night mode to day mode on clicking the mouse.
In the night mode, I used a for loop to populate the stars and in the day mode I used it to scatter the clouds.

Piece of code I am proud of: 

I am proud of how all the sketch has turned, however I am particularly proud of how I was able to finally create a piece of code to draw stars. I was able to achieve this by  using beginShape() and endShape() functions. Inside these, I used a for loop with two concentric circles with different radii. By altering the angle, spikes had vertexes on outer circle and other points on inner circle. Then the two pairs connected all the way from 0 – 360 degrees. Below  is that piece of code:

//Function to draw stars
function drawStar(x, y, radius1, radius2, npoints) 
{
// Angle between the outer points 
  let angle = TWO_PI / npoints;
// Angle inner points between the outer points
  let halfAngle = angle / 2.0;
// Start defining the shape
  beginShape();
  for (let a = 0; a < TWO_PI; a += angle) {
// x and y coordinates for the outer point
    let sx = x + cos(a) * radius2;
    let sy = y + sin(a) * radius2;
    vertex(sx, sy);
// x and y coordinates for the inner point
    sx = x + cos(a + halfAngle) * radius1;
    sy = y + sin(a + halfAngle) * radius1;
    vertex(sx, sy);
  }
  endShape(CLOSE);
}

My Final sketch:

My final sketch (Dynamic Sky) can be seen here below:

Reflection for future work

Through this assignment, I have come to appreciate loops. Before using loops  I stared my manually drawing (hard coding) every location and size of the stars, but loops saved the work and made my sketch more artistic. In future I hope to incorporate loops in my sketches so I can create engaging and manageable sketches.

Background
As I was learning how to draw using P5.js, I initially experimented by arranging shapes and figures randomly. I found myself drawing a robotic face because it was easy to arrange boxes and shapes, even if they didn’t resemble a familiar human face. As I became more comfortable with using various shapes and gained an understanding the coordinate system, thanks to the detailed references on the P5.js website, I wanted to create something more human-like. I started by sketching a simple drawing (below) of a man wearing a tie in my notebook.

I managed to complete the drawing in P5.js  and it appeared better than I expected. I also added some features including dynamic objects and mouse inputs. However, I was not fully pleased with ‘my almost portrait’ as I did not like how the lower part turned out. I faced challenges in filling  the colours  on the lower body and arms because my drawing had a lot of independently connected lines as seen below. So I wanted to make the lower part look better.

My Final Portrait
Despite the fact that I was very impressed with how my portrait had turned, I did not like the fact that everything below the head had to remain with the background colour.
So I decided to come up with a simpler design by changing the lower body and adding a neck and a small chain and I could now colour it different from my background.
I had added some a Moon and Sun emoji which simultaneously passed indicating day and night. I set some offsets for the smoke from the man’s cigarette so it appears to ascend upwards.
Lastly but not least, I was curious to explore  mouse input functions, so I added blinking on pressing the mouse.
My final Portrait can be seen below:

Achievements I am most proud of

I have managed to learn so much in such a simple assignment.  One achievement I am most proud of is how I managed to add some dynamic objects and features in my portrait. One of them being the moving smoke, where I added some offset to move the smoke upwards and some ‘Shake’ variable to make the smoke shaking as it ascends. Below is the code for that:

// Drawing Ciagerette tip 
circle(220, 375, 10);
// Drawing Cigarette smoke 
fill(12, 12, 12);
// Used this shape/Curve from (https://p5js.org/examples/repetition-bezier/)
bezier(220, 375, 200, 350, 250, 320, 230, 300);
bezier(222, 380, 210, 355, 260, 330, 240, 310);
noFill();
// Adding Movable smoke to make it dynamic
fill(fade, fade, fade)
bezier(220+shake, 375+Smokeoffset, 200-shake, 350+Smokeoffset, 250+shake, 320+Smokeoffset, 230-shake, 300+Smokeoffset);
bezier(222+shake, 380+Smokeoffset, 210-shake, 355+Smokeoffset, 260+shake, 330+Smokeoffset, 240-shake, 310+Smokeoffset);
noFill();

Reflections and ideas for future works

Creating a portrait has  been a very nice assignment. I have gained understanding on working with P5.js. I have also experiences the importance of properly commenting my code as it was easier to navigate the code and see what to improve, which could have been very difficult without proper comments.
For future, I would love to add more functionality and make use of many other  features that I was not able to use in this assignment such as the 3D objects, loading images, rotation and many other.