Author: Ishmal

For this assignment, our task was to create a simple artwork using for loops and our knowledge from previous classes.

Initially I filled the canvas with a grid of rectangles and circles in a static manner. To make this pattern, I used a double for loop to draw the shapes over the y-axis and then the x-axis.

Then to increase interactivity, I changed the width of the squares and the circles to change dynamically based on the position of my mouse. To do this. I used the dist function to compute the distance from the position of the mouse. I had to spend a lot of time on how should the function be linked to the shapes. I realized the solution was actually much simpler that what I was trying to do initially.

My solution in the start was only plain white shapes so the most challenging part of the pattern was adding color. I had to do a lot of research and trial and error to understand how could I change the color of where I am hovering on the canvas. For this purpose, I eventually reached at the solution of using a map function within the fill function to change the color of where I am hovering only.

I further wanted the canvas to change color continuously on its own as well alongside the hover, for which I added the hue variable after setting the colorMode from RGB to HSB. Integrating this feature, was a challenge to achieve because I was not working with the ‘mod %’ function in the start so kept running into errors.

Below is the canvas for my artwork:

Reflections:

The assignment was an exciting one to work with. I really wanted to work with interactivity and in particular the draw function after my assignment 1. I got to work very creatively to create this piece using different functions within the draw function which allowed me to add dynamically changing shapes and colors. As I had never before used some of these functions, most of my time was spent on understanding their use correctly and debugging them. In the future, I think it would be interesting to try changing the number of shapes on the screen dynamically as well.

As “Among Us” was a game that I really enjoyed playing at NYUAD, I drew myself as a character from the game. The character is doing the SHHH gesture which I have incorporated with my name “iSHHHmal” to help people pronounce and remember my name correctly.

I have also added the starry night sky in the background because I am very fascinated with space. To do this I used a for loop and randomly placed 700 points on the canvas. Here’s the code for this effect:


// set all content drawn from this point forward
// so that it uses "white" (0 = black, 255 = white)
stroke(255);
for (let i = 0; i < 700; i++)
{
let x = random(600);
let y = random(400);
point(x,y);
}
fill(255);


The most challenging and time-consuming part of the assignment was drawing the hand of the character. There were multiple lines involved and it was important to get the pixels and shapes correct so the gesture looks understandable. Though, I am very proud of the way the hand turned out and it’s exactly like the way I wanted it.

Additionally, to make it easier for me to draw the background circle, I initially filled it with 1 color and then instead of drawing lines and an arc, I drew equal arcs around the circle only to help me achieve that effect. Below is the code for this:


stroke(153, 0, 0);
strokeWeight(4);
fill(240, 196, 66)
ellipse(300,175, 300, 300);
fill(223, 108, 32)
arc(300,175,300,300,radians(255),radians(285))
arc(300,175,300,300,radians(315),radians(345))
arc(300,175,300,300,radians(195),radians(225))
arc(300,175,300,300,radians(135),radians(165))
arc(300,175,300,300,radians(75),radians(105))
arc(300,175,300,300,radians(15),radians(45))


As this was only a simplistic portrait, I did not add the draw function, but in the future I would love to bring it to use and add user interactivity as well! Additionally, the p5 reference site was extremely helpful tool and I found myself referring to it again and again quite a few times.