Author: Muhammad Arhum Azeem

there are no perfect circles in nature

This assignment was non less than an endeavor in its own. All I had in mind was circles when I started. I thought of them as colliding an getting bigger or something like that. The hardest part was to come up with something which uses loops. Not from the coding end but from the creative one. The it suddenly hit me; draw in itself if a big while TRUE loop. Honestly I still didn’t know what to do about it, but at least I had starting point.
I wanted to add an interactive side to it as well, so the first thing I did was created pointer for the pointer, so that it has visible interactions. I borrowed the monitor frame from my self portrait to add somewhat character to the framing.

The moment I had two circles bouncing off each other. I noticed the the repeating motion. To observe it in detail I wanted to add the trail into it. I had some what trouble doing that because of the monitor underneath, the trail was hidden under it. I asked chatgpt about it. It made me realize that I don;t want my monitor to be draw again and again. So I just put it up in the setup. no I could see their movement.

The most interesting part about it was they never collided if left undisturbed. Because of the movement variables I set. But if it is disturbed by the mouse the kinda stuck in the loop. This discovery is what I am most proud of, I am not sure which part of the code represents it. It randomly reminded me of how it is necessary to go off road to meet people or places that quite possible create the biggest impact in our lives.
I used the https://p5js.org/reference/p5/text/ to write the text. It represents a vague idea I conclude from above about living

lastly the part of code I think is highlight is as follows

x += 1
  if (x % 220 == 0){
  c1 = random(0,255)
  c2 = random(0,255)
  c3 = random(0,255)
  fill(c1,c2,c3)
  
}

I like this because this where I manipulated the draw loop code to change the circle colors

The Sketch

What I can add to this is. I feel like this is very sketchy. To represent the, I would want to make more calm and smooth

Is it me?

After all the classes, that made me go by the golden rule “If it works don’t touch it”, it was hard to register that I am to create something that should be looking good. In the absence of a well documented passing rubric, every choice had to be questioned. But against what; The effort I put in, the creativity I come up with, or what my person sitting next to me thinks of it? I began on the rather escaping choice, a computer screen. Indeed a typical computer science student’s choice, how I think of it as an escape. Giving myself some time by spending that drawing the keyboard, and mouse. Well that was the moment I had the first thought shouting “It should look good to me”. The Buttons. So many buttons, (I did that before we studied for loops). Initially I planned 2 big white blocks to represent the buttons. When I went from 2 to 57, its hard to point out. My best guess is when I looked as my laptop’s keyboard and it had all the character to it and one I drew in P5 did not. 
//keyboard
  line(250, 600, 200, 400)
  
  
  
  
  fill(0)
  rect(20, 500, 470,140)
  fill(220)
  rect(25, 510, 20,20)
  rect(45, 510, 20,20)
  rect(65, 510, 20,20)
  rect(85, 510, 20,20)
  rect(105, 510, 20,20)
  rect(125, 510, 20,20)
  rect(145, 510, 20,20)
  rect(165, 510, 20,20)
  rect(185, 510, 20,20)
  rect(205, 510, 20,20)
  rect(225, 510, 20,20)
  rect(245, 510, 20,20)
  rect(265, 510, 20,20)
  rect(285, 510, 20,20)
  rect(325, 510, 20,20)
  rect(345, 510, 20,20)
  rect(365, 510, 20,20)
  rect(405, 510, 20,20)
  rect(425, 510, 20,20)
  rect(445, 510, 20,20)
  rect(465, 510, 20,20)
  
  rect(25, 540, 20,20)
  rect(45, 540, 220,20)
  rect(265, 540, 40,20)
  
  
  
  rect(25, 560, 20,20)
  rect(45, 560, 240,20)
  rect(285, 560, 20,20)
  
  rect(25, 580, 20,20)
  rect(45, 580, 220,20)
  rect(265, 580, 40,20)
  
  rect(25, 600, 20,20)
  rect(45, 600, 40,20)
  rect(85, 600, 120,20)
  rect(205, 600, 20,20)
  rect(225, 600, 20,20);
  rect(245, 600, 20,20);
  rect(265, 600, 40,20)
  
  
  rect(325, 540, 20,20)
  rect(345, 540, 20,20)
  rect(365, 540, 20,20)
  
  rect(325, 600, 20,20)
  rect(345, 600, 20,20)
  rect(365, 600, 20,20)
  rect(345, 580, 20,20)
  
  
  
  rect(405, 540, 20,20)
  rect(425, 540, 20,20)
  rect(445, 540, 20,20)
  rect(465, 540, 20,20)
  
  
  rect(405, 560, 20,20)
  rect(425, 560, 20,20)
  rect(445, 560, 20,20)
  rect(465, 560, 20,20)
  
  
  rect(405, 580, 20,20)
  rect(425, 580, 20,20)
  rect(445, 580, 20,20)
  rect(465, 580, 20,40)
  
  
  
  rect(405, 600, 40,20)
  rect(445, 600, 20,20)
Then came the scary part, what to draw inside the screen frame. I had a lot of interest in cybersecurity or to honest in HACKING. It’s funny to me that my sketch looked more of like a imprisoned thief. Well this reminded me of an other golden rule form the high school i.e. “Don’t get caught” and I just kept going on with that. Lastly the glasses, they felt like a creating something from nothing. Even thou I did them in the loving memory of my classes I lost last semester, I was a happy experience. For future I want to add more colors, I did not add them this time because I wanted to very specific about each color I am adding and what it will represent. Did I not do it out of laziness or lack of understanding of relationships of colors with emotions? My answer to this question is biased but as the semester proceeds, it will probably hopefully go away. here is the website I used to read p5.js documentation; https://p5js.org/reference/ The sketch