Creating an Interactive Simulation
10.29.24
Create a sketch that would simulate an existing natural system - look at physics, biology, and other natural sciences for good examples. Start with the environment - where is the system situated? What are the forces the environment might exert on the system? Examine the agents in the system, their relationships to each other and the environment they are in. The look at how this system would develop over time. What are the rules that you are going to come up with, what are the parameters you are going to feed into them and what effect will the changes have on the development of the system. Create classes of entities to represent the components of the system. Use vectors to represent forces existing in the system. Use randomness or noise to generate at least one. Add direct or indirect mouse or keyboard controls
I've created two classes, tree and birds. I structured the code this way to create an interactive scene where, whenever you click the mouse, birds fly out from the trees and move across the screen.The setup() function initializes the canvas and populates an array with tree objects placed at the bottom of the screen. In the draw() function, I continuously update the canvas by drawing the trees (which sway) and the birds (which move across the screen and disappear when off-screen). The mousePressed() function adds new birds to the scene each time the user clicks, with each bird starting at the mouse's position. This approach makes the scene dynamic and allows easy expansion, like adding more trees or bird behaviors, while keeping the code clean and modular.
1// when you press the mouse down, birds fly out.
2let trees = []
3let birds = []
4
5function setup() {
6 createCanvas(800, 600)
7 colorMode(HSB, 360, 100, 100)
8
9
10 for (let i = 0; i < 5; i++) {
11 let x = i * 160 + 80;
12 trees.push(new Tree(x, height - 100))
13 }
14}
15
16function draw() {
17 background(210, 80, 100);
18
19 // Draw trees
20 trees.forEach((tree) => {
21 tree.sway()
22 tree.display()
23 });
24
25
26 birds.forEach((bird, index) => {
27 bird.move()
28 bird.display()
29 if (bird.offScreen()) {
30 birds.splice(index, 1)
31 }
32 });
33}
34
35// When the mouse is clicked, birds fly out from the trees
36function mousePressed() {
37 // Add a few birds each time the mouse is clicked
38 for (let i = 0; i < 5; i++) {
39 let bird = new Bird(mouseX, mouseY)
40 birds.push(bird)
41 }
42}
43I designed the Bird class to model birds in a simple interactive animation, with each bird having a random position, velocity, color, and movement pattern. The constructor initializes the bird with a random velocity vector, giving it a natural sense of direction, and I set its size and color for variety. In the move() method, the bird's position updates by adding its velocity, making it move across the canvas. The display() method uses p5.js functions to draw the bird as a rotated triangle, giving it a flying shape that matches its direction. Lastly, the offScreen() method checks if the bird goes off the canvas, allowing for easy removal. This approach ensures that each bird has a unique, organic motion while keeping the code clean and easy to modify or expand in the future.
1class Bird {
2 constructor(x, y) {
3 this.position = createVector(x, y)
4 this.velocity = p5.Vector.random2D()
5 this.velocity.setMag(random(2, 5))
6 this.size = 10
7 this.color = color(random(0, 360), 80, 90) // Random bird color
8 }
9
10 move() {
11 this.position.add(this.velocity)
12 }
13
14 display() {
15 fill(this.color)
16 noStroke()
17 push()
18 translate(this.position.x, this.position.y)
19 rotate(this.velocity.heading())
20 triangle(-this.size, -this.size / 2, -this.size, this.size / 2, this.size, 0)
21 pop()
22 }
23
24 offScreen() {
25 return (
26 this.position.x < -this.size ||
27 this.position.x > width + this.size ||
28 this.position.y < -this.size ||
29 this.position.y > height + this.size
30 )I created the Tree class to simulate a simple, swaying tree animation with a customizable sway effect. The constructor sets the tree’s position and initializes the sway angle, along with a random speed for each tree to give it a natural, non-uniform motion. In the sway() method, I use a sine function based on frameCount to smoothly change the angle of the tree, making it sway gently back and forth. The display() method draws the tree trunk using a line and then generates three tree "leaves" as ellipses, each rotating slightly to give the appearance of branches moving in the wind. By using push() and pop(), I ensure transformations like rotation and translation don't affect other objects on the canvas. This structure allows for a clean, easily customizable tree animation with random, organic movement.
1class Tree {
2 constructor(x, y) {
3 this.x = x
4 this.y = y
5 this.angle = 0 // Angle for swaying
6 this.swaySpeed = random(0.02, 0.05); // Random swaying speed
7 }
8
9 sway() {
10
11 this.angle = sin(frameCount * this.swaySpeed) * 0.1
12 }
13
14 display() {
15 push()
16 translate(this.x, this.y)
17 stroke(120, 100, 50)
18 strokeWeight(8)
19 line(0, 0, 0, -100)
20 noStroke()
21 fill(120, 80, 50)
22 for (let i = 0; i < 3; i++) {
23 push()
24 rotate(this.angle + i * 0.3);
25 ellipse(0, -120 + i * 20, 60, 60)
26 pop()
27 }
28 pop()
29 }
30}
31I created an interactive animated scene where trees sway and birds fly out whenever the user clicks the mouse. Using object-oriented programming, I designed each tree and bird as a class with unique properties and behaviors, allowing for smooth animations and random movement.
