Author: Alreem AlAbbas

Concept:

For this week’s assignment, I used simple harmonic motion to create a cyclone-looking animation.

Sketch:

Code snippet:

// circles re-iteration
  for (let i = 0; i < total; i++) {
    let y = map(sin(angles[i]), -1, 1, -100, 100);
    let x = map(i, 0, total, -200, 200);
    
    push(); // saves the current state
    
    stroke(235);
    rotate(angles[i]);
    circle(y, x, r);

    pop(0); //pop() restores the previous state after rotation is complete

    // incrementation
    let increment = TWO_PI / 60;
    angles[i] += increment;
  }

This part of the code continuously draws the circles to create the animation. I used push() and pop() to not affect other parts of the code.

Reflection and Improvements:

• One of the difficulties I faced was getting the background to be a blue-ish color while also having it re-drawn to give the animation a fading effect.
• For improvement, I would want it to look more like a cyclone and have some sort of user interaction. I would also add sounds to it.

Concept:

For this week’s assignment, I used forces to control electrons moving around their nucleus. In this case, the electrons are the visible movers and the nucleus (with neutrons and protons) is the invisible attractor.

 

Embedded Sketch:

Code Highlight:

// Showing and Updating the movers
for (let i = 0; i < 4; i++) {
  movers[i].update();
  movers[i].show();
  attractor.attract(movers[i]);
}

In this part of the code, I added a for loop to keep showing the movers and updating them, as well as make them go towards the attractor which is centered in the middle of the canvas. I added a seperate class for each, the mover and the attractor.

By changing the value 4 into a lower value, you can see less electrons moving towards the invisible nucleus.

Reflections & Improvement:

I faced a few difficulties while placing the movers in a nice pattern and giving them specific velocity values. For that, I referred to this video which helped me figure that out.

If I were to improve this assignment, I would definitely add more movers and give the user the option to select how many electrons they want to see moving according to whatever chemical element they want to visualize.

Since it is around the end of the dates season in the UAE, I have decided to do this assignment related to that. Upon clicking the down arrow button, you can witness the dates falling from the palm trees in a constant acceleration.

It was quite difficult for me to find a video, so here is a photo of date palm trees instead:

I limited the acceleration to 3 as I did not want it to speed up too fast as it would seem to be unrealistic. Below is the part of code that shows the dates accelerating when the down arrow button is pressed.

 if (keyCode === DOWN_ARROW) {
  dates.acceleration.y = 0.01;
  dates2.acceleration.y = 0.01;
  dates3.acceleration.y = 0.01;
}

For future improvements, I would allow the user to restart it by clicking the mouse or a button. I also would add different kinds of dates and more of them.

 

In this week’s reading “The Computational Beauty of Nature”, I came across many scientific analogies that have widened my views on nature. Before this reading, I would always look at things from a further perspective and not really think deeply of every object around me and its particular details. Just like the author mentions, the roles of ants in every ant colony would usually be similar, but every ant is unique to its identity and behaves differently despite working on the same task.

It is very fascinating that the reductionist approach can be applied in the computing world. We have had many simulations built thus far that researchers and scientists have benefited from.

For this week’s assignment, I decided to create a self-avoiding walk within an RGB space.

Whenever a dot tries to walk to a spot that has already been visited before, it stops the program. This can be restarted on click.

In the draw function, I made the RGB space using map() and assigning each dot to a random RGB value.

I tried to simplify the code as much as possible. In the snippet below, it checks if a spot in the grid has been visited before, if not, it pushes a new dot.

for (let option of allOptions) {
  let newX = x + option.dx;
  let newY = y + option.dy;
  if (newX >= 0 && newX < cols && newY >= 0 && newY < rows && !grid[newX][newY]) {
    options.push(option);
  }
}