Author: Alreem AlAbbas

Concept:

For this week’s assignment, I created an interactive honeycomb, where the mouse acts as a bee and the honeycomb swaps its color on hover.

Sketch:

Code Snippet & Challenges:

// Check if mouse is over the hexagon
if (isMouseOverHexagon(x, y, w)) {
  // Swap the color (state)
  board[i][j] = 1 - board[i][j];
}

This is the part of code that was the most challenging where I had to check if the mouse is over the hexagon and change the color of it.

Future Improvements:

I would add a bee in the place of the mouse to make it look nicer visually and more realistic.

Concept:

For this week’s assignment, I made mini game using matter.js. The user is required to move the basket (boundary) with the right arrow or left arrow key and catch as many apples as possible. Once three apples have fallen, the game restarts on its own.

Sketch:

Code and challenges:

let moveAmount = 6; 

if (keyIsDown(LEFT_ARROW)) {
  let pos = movableBoundary.body.position;
  Body.setPosition(movableBoundary.body, { x: pos.x - moveAmount, y: pos.y });
} else if (keyIsDown(RIGHT_ARROW)) {
  let pos = movableBoundary.body.position;
  Body.setPosition(movableBoundary.body, { x: pos.x + moveAmount, y: pos.y });
}

In this code snippet, I made the boundary move according to the user’s key press.

Future Improvements:

I would want to make it look more visually appealing as well as make the apples move to wherever the basket is moving.

Reference:

• https://nature-of-code-2nd-edition.netlify.app/physics-libraries/#static-matterjs-bodies (Example 6.5)

Concept:

For this week’s assignment, my dynamic flocking system is a school of fish. I added some oscillation to their weights by using sin(). I also randomized their maxSpeed and maxForce to make it seem more natural.

.

Code Snippet & Challenges:

function mousePressed() {
  let attractionPoint = createVector(mouseX, mouseY);
  for (let boid of flock.boids) {
    let attraction = p5.Vector.sub(attractionPoint, boid.position);
    attraction.setMag(0.6);
    boid.applyForce(attraction);
  }
  
  for (let i = 0; i < 20; i++) {
    particles.push(new Particle(mouseX, mouseY));
  }
}

In this part of the code, I added a mousePressed() function in which the fish get attracted to wherever the mouse is at the time when it is clicked on the canvas. I also added some food particles for the fish, which is what they attracted to. I would say the most challenging part was figuring out what the formula is for the attraction part.

Future Improvements:

• I would definitely add a more colorful background and some sounds, for now I wanted to focus on more of the technical aspect of the school of fish.

I really enjoyed the guests’ visit to our class as they showed us their project and gave us a more detailed insight into what it really represents. Looking at the project from the project space, I had not really thought of the meaning behind each aspect of the project and what the performers are representing.

It was also really cool to see some of the code and how each part really works. I loved the little details when the sand is being drawn as well as when it starts falling. It made it really seem like a real desert with the bits of sand. As someone who went to the desert often, I found it very interesting to see a digital version of it. This was very inspiring and I am hopefully looking forward to creating such realistic visuals in my future projects.

Concept:

For this week’s assignment, I decided to have a bee as my vehicle and a flower as the target. The concepts used are wander, arrival and staying within canvas boundaries. I also adjusted the bee’s behavior based on how it really behaves and added a bit of jitter to its movement by randomizing the wander angle.

Sketch:

Code Snippet:

// Determine behavior based on distance to target
 let d = dist(vehicle.pos.x, vehicle.pos.y, target.x, target.y);
 let steering;
 if (d < 150) {
   // If Bee is close to flower, "arrive" behavior with edge avoidance
   steering = vehicle.arrive(target);
 } else {
   // If Bee is far from the flower, "wander" behavior with edge avoidance
   steering = vehicle.wander();
 }

In this code snippet, I made sure that the bee goes on wandering around until it reaches a specific distance from the flower, then it arrives to the center of the flower.

Future Improvements: 

I would add more bees and flowers and make the bees randomly arrive on any flower.

Concept:

My concept is an interactive electric fan. The user can control its movement using the right or left arrow buttons so it would move clockwise or anti-clockwise accordingly.

Sketch:

Full-screen here

Sketch images:

Code logic:

In the sketch.js file:

• The text giving instructions to the user fades after 7 milliseconds.
• New blades are created and added to the array. The ones in the front are shorter and the ones in the back are longer.
• Fan accelerates right on right arrow click and accelerates left on left arrow click.
• Friction force slows it down gradually when no key is pressed.
• The velocity is limited to 0.3 so that it does not move too fast.

In the blade.js file:

The blade class contains all the functions needed for a single blade.

constructor:

• Includes length and phase offset for the wave.

drawBlade:

• Rotates the blade continuously using sin combined with amplitude.
• Draws the bezier curve’s control points using vectors.

Concepts used from class:

• Vectors
• Forces (Friction)
• Oscillation

Challenges and reference:

• It was quite challenging to figure out how to draw vectors as the bezier curve’s control points. For that, I watched this video which helped with that.

// use vectors for bezier control points
let lenVector = createVector(this.length / 4, 1); // base vector for length
for (let j = 0; j < 4; j++) {
  let curveOffset = map(j, 0, 4, -this.length / 2, this.length / 2);
  let controlPoint1 = lenVector.copy().mult(-1);   // start of the bezier
  let controlPoint2 = createVector(-this.length / 4, curveOffset); // control point 1
  let controlPoint3 = createVector(this.length / 4, -curveOffset); // control point 2
  let controlPoint4 = lenVector.copy();            // end of the bezier

  // draw the bezier curve using vector points
  bezier(
    controlPoint1.x, controlPoint1.y, 
    controlPoint2.x, controlPoint2.y, 
    controlPoint3.x, controlPoint3.y, 
    controlPoint4.x, controlPoint4.y
  );
}

Pen plotting:

• • For the pen plotting, I had to modify many things from my initial sketch (shown below). This one had many different opacity levels and colors that would not be ideal to plot.

• Instead, I modified the sketch to be much simpler, with curves instead of rectangles and without the fading effect. This turned out to be a better version to plot on the pen plotter. I also removed the filled color just for the pen plotting purposes.

Pen Plotted Photo

Future improvements:

As an improvement, it would be nice to connect it to an arduino and create a DIY fan that would move based on the key input that the user chooses.

 

Concept

While experimenting with different functions and colors, I saw how different iterations of the sketch produced different visuals. I would say it kind of looks like a spanish-looking dress/skirt flowing or a japanese fan, both rotating clockwise and anti-clockwise.

Sketch

Interactivity

For an improved user experience, I have a few ideas but still unsure which one of them I will be going for.

• Change of color
• Changing speed
• Changing angles

This will be done either by mouse press or button press.

Reducing Risks

I want to ensure a smooth transition when the states of the sketch are changed. For that, I will make sure that the states change gradually.

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.