Author: Mariam Al Khoori

Concept

Pure water is one of the simplest chemical compounds to understand, and the concept of mixing solubles with water is something most people learn early on in third grade. However, translating this fundamental idea into a digital simulation presented a significant challenge. Representing molecules and their interactions through code required a deeper understanding of both chemistry and programming. Initially, my goal was to model how water and salt molecules interact with each other using forces of attraction. This involved not only visualizing the individual molecules but also accurately simulating their dynamic interactions. The process of creating this simulation highlighted the complexity behind seemingly simple concepts and provided valuable insights into the behavior of molecules in a digital environment.

Highlight I’m proud of

 

function draw() {
  background(img);
  
  // Draw the glass of water
  fill(177, 177, 199, 225);
  quad(131, 126, 318, 126, 290, 344, 158, 344);
  
  fill(85, 179, 236, 100);
  quad(137, 177, 312, 177, 290, 344, 158, 344);
  
  // Update and display water molecules
  for (let molecule of waterMolecules) {
    molecule.update();
    molecule.display();
  }

  // Update and display salt molecules if showSalt is true
  if (showSalt) {
    for (let molecule of saltMolecules) {
      molecule.update();
      molecule.display();
    }
  }

  // Check if attraction pairs exist and apply attraction during MIX
  if (isMixing) {
    for (let pair of attractPairs) {
      let waterMolecule = pair.water;
      let saltMolecule = pair.salt;

      // Calculate the distance between the water molecule and the salt molecule
      let target = createVector(saltMolecule.x, saltMolecule.y);
      let currentPos = createVector(waterMolecule.x, waterMolecule.y);
      let distance = p5.Vector.dist(currentPos, target);

      // If the water molecule is close enough, snap to the salt molecule and stop moving
      if (distance > 15) { // Adjust the threshold to be equal to their combined radii
        let attractionForce = p5.Vector.sub(target, currentPos);
        attractionForce.setMag(0.5); // Set attraction force strength

        // Apply the attraction force to move the water molecule towards the salt molecule
        waterMolecule.x += attractionForce.x;
        waterMolecule.y += attractionForce.y;
      } else {
        // Snap the water molecule to the salt molecule's position
        waterMolecule.x = saltMolecule.x;
        waterMolecule.y = saltMolecule.y;
        waterMolecule.isAttached = true; // Mark as attached to stop future movement
      }
    }
  }

 

Embedded sketch

Reflection and ideas for future work or improvements

The project provided a valuable exploration of simulating molecular interactions and highlighted the complexities of translating theoretical chemistry into a visual format. It revealed the challenge of balancing scientific accuracy with effective coding techniques and emphasized the importance of a solid understanding of molecular behavior. Future improvements could include enhancing simulation accuracy, adding interactive user features, incorporating advanced visualization techniques, expanding to more complex scenarios, and developing educational tools to support learning.

Future Work:

• Accuracy Improvement: Enhance precision of molecular interactions.
• User Interaction:Add features for user input and parameter adjustments.

References:

//https://www.youtube.com/watch?v=OAcXnzRNiCY&ab_channel=TheCodingTrain

Concept

For this assignment, I was primarily inspired by the galaxy—a seemingly simple yet profoundly intricate phenomenon in our vast universe. The swirling motion of stars and cosmic dust, the vibrant colors, and the immense scale all evoke a sense of mystery and wonder. Galaxies are both elegant and complex, embodying the balance between chaos and order. This duality inspired me to explore patterns and shapes that reflect the beauty and unpredictability of the cosmos. Through this project, I aimed to capture the essence of the galaxy’s mesmerizing movement and its delicate balance of simplicity and complexity.

Highlight I’m proud of

Here I was able to create a special class for the particles.

class Particle {
  constructor(vx, vy) {
    this.vx = vx;
    this.vy = vy;
    this.num = 255;
    this.a = 255;
    this.loc = createVector(width / 2, height / 2);  // Start from the center
    this.vel = createVector(0, 0);  
    this.acc = createVector(1, 1);
  }

  update() {
    // Apply acceleration using the acceleration factor
    this.vel.add(this.acc.mult(accelerationFactor));  
    this.loc.add(this.vel);

    // Reset acceleration and limit the velocity for smoother control
    this.acc.mult(0);
    this.vel.limit(0.5);  
  }

  repulse() {
    // Calculate the distance between the particle and the mouse
    let mouse = createVector(mouseX, mouseY);
    let dir = p5.Vector.sub(this.loc, mouse);  
    let distance = dir.mag();  

    if (distance < repulsionRadius) {  // If the particle is within the repulsion radius
      dir.normalize();  // Normalize the direction to get just the direction vector
      let force = map(distance, 0, repulsionRadius, 5, 0);  // Stronger repulsion the closer the particle is
      dir.mult(force);  // Multiply the direction vector by the repulsion force
      this.vel.add(dir);  // Apply the repulsion force to the particle's velocity
    }
  }

  isOutside() {
    // Check if the particle goes outside the canvas
    return (this.loc.x < 0 || this.loc.x > width || this.loc.y < 0 || this.loc.y > height);
  }

  display() {
    // Update acceleration based on the particle's properties and a trigonometric function for spirals
    this.acc = createVector(
      sin(radians(this.vx + this.num / 2)) / 2,
      cos(radians(this.vy - this.num / 2)) / 2
    );

    // Draw the particle with a fade effect
    fill(255, this.a);
    var r = map(this.a, 255, 0, 1, 10);  // Particle size changes as it fades
    ellipse(this.loc.x, this.loc.y, r);

    this.num += map(this.a, 255, 0, 1, 0);  // Update num for smooth spiral motion
    this.a -= 0.1;  // Gradually reduce alpha for a fade-out effect
  }
}

Embedded sketch

Concept

For my first assignment, I decided to keep it simple while adhering to the given requirements. From the first list, I chose to implement the Lévy flight walk along with the concept of changing color based on the ellipse’s position on the screen. This type of random walk features steps distributed according to a power-law, resulting in occasional long jumps interspersed with shorter steps.

Highlight I’m proud of

function draw() {
  // Update position based on Levy Flight
  angle = random(TWO_PI); // Random angle
  stepSize = pow(random(), -1.5) * 5; // Levy Flight step size with power-law distribution
  x += cos(angle) * stepSize;
  y += sin(angle) * stepSize;
  
  // Ensure the position is within bounds
  x = constrain(x, 0, width);
  y = constrain(y, 0, height);
  
  // Store current position for trailing effect
  trail.push([x, y]);
  
  // Limit the number of points in the trail for performance
  if (trail.length > 100) {
    trail.shift(); // Remove oldest point
  }

From the code above I allowed for my canvas to leave a trail of where the previous pattern came across. Then slowly it would remove the oldest trail by limiting the number of points.

Embedded sketch

Reflection and ideas for future work or improvements

It would be nice to add more user input by allowing users to control aspects of the Levy Flight, such as step size or angle, using mouse or keyboard inputs. Maybe also experiment with different types of random walks or combine multiple patterns for complex behaviors.

In the first chapter of The Computational Beauty of Nature, Gary Flake draws on examples from different fields of science and nature to offer a new way of thinking. I believe he succeeds in simplifying complex concepts like computing and coding. Looking at something as complicated as computer science can be quite intimidating; however, a solution is offered by trying to view how things may work using different methods. This approach to learning can make complex coding a simpler task.

Flake’s approach to reductionism and holism allows for a more thorough learning experience. One example I can provide is when a person tries to get their driver’s license—it is required to gain a basic understanding of some car parts before driving. The parts they would focus on include batteries, engines, alternators, as well as external products used for cars. This allows the driver to recognize the kind of device they will be dealing with and understand the use of each part, especially since specific parts may differ across car brands. The holistic approach comes into play when driving the car itself, as managing the car and ensuring that all parts work together cooperatively is crucial.

Getting my driver’s license was a traumatic experience, especially with the overwhelming amount of information I had to learn. But if it means I get to be the best driver among my siblings, then it is worth it.