Concept
In this code, I merged a few ideas to create a cohesive set of actions I envisioned before executing it:
- Flowers appearing at random places.
- Flowers opening and closing.
- A bee hive.
- Bees follw to track the flowers (only opened ones and avoid the closed one)..
- After passing all the open flowers bees return back to the hive.
- Clicking a bee hive that follows the other swarm of bees (boid flock).
Highlight I’m proud of
class BeeBoid { constructor(x, y) { this.position = createVector(x, y); this.velocity = createVector(random(-1, 1), random(-1, 1)); this.acceleration = createVector(0, 0); this.maxForce = 0.05; // Maximum steering force this.maxSpeed = 3; // Maximum speed this.size = 15; // Size of the bee body this.wingSize = 8; // Size of the wings this.xmove = random(-0.5, 0.5); // Horizontal movement speed this.ymove = random(-0.5, 0.5); // Vertical movement speed } applyForce(force) { this.acceleration.add(force); } seek(target) { let desired = p5.Vector.sub(target, this.position); desired.setMag(this.maxSpeed); let steer = p5.Vector.sub(desired, this.velocity); steer.limit(this.maxForce); this.applyForce(steer); } update() { this.velocity.add(this.acceleration); this.velocity.limit(this.maxSpeed); this.position.add(this.velocity); this.acceleration.mult(0); // Reset acceleration } borders() { if (this.position.x > width) this.position.x = 0; else if (this.position.x < 0) this.position.x = width; if (this.position.y > height) this.position.y = 0; else if (this.position.y < 0) this.position.y = height; } display() { // Draw wings ellipseMode(RADIUS); noStroke(); fill(171, 240, 255); // Left wings ellipse(this.position.x - 10, this.position.y - 5, this.wingSize, this.wingSize); ellipse(this.position.x - 10, this.position.y + 5, this.wingSize, this.wingSize); // Right wings ellipse(this.position.x + 10, this.position.y - 5, this.wingSize, this.wingSize); ellipse(this.position.x + 10, this.position.y + 5, this.wingSize, this.wingSize); // Draw body fill(255, 244, 61); angleMode(DEGREES); ellipse(this.position.x, this.position.y, this.size, this.size * 1.5); stroke(0); strokeWeight(5); line(this.position.x - 10, this.position.y - 5, this.position.x + 10, this.position.y - 5); line(this.position.x - 10, this.position.y + 5, this.position.x + 10, this.position.y + 5); } move() { this.position.x += this.xmove; this.position.y += this.ymove; this.barrier(); } barrier() { if (this.position.x >= width || this.position.x <= 0) { this.xmove = -this.xmove; } if (this.position.y >= height || this.position.y <= 0) { this.ymove = -this.ymove; } } }
class Flock { constructor() { this.boids = []; } addBoid(boid) { this.boids.push(boid); } run() { for (let boid of this.boids) { let closestFlower = null; let closestDist = Infinity; // Check for the closest flower for (let flower of flowerArray) { if (flower.isAlive) { let d = p5.Vector.dist(boid.position, createVector(flower.centreX, flower.centreY)); if (d < closestDist) { closestDist = d; closestFlower = flower; } } } if (closestFlower) { boid.seek(createVector(closestFlower.centreX, closestFlower.centreY)); } boid.update(); boid.borders(); boid.display(); } } }
- Arrays are used to store flowers, petals, and stem dots, allowing dynamic addition, deletion, and access to individual elements for updating their states.
- For loops iterate through arrays and draw multiple flowers and petals, while if conditions handle flower removal, withering, and the periodic addition of new flowers.
- The code uses trigonometric functions like Math.atan2 to calculate angles for petal positioning, creating uniqu-looking curved flower shapes.
- The frameCount variable is used to create periodic actions and smooth animations, such as blooming and movement of petals over time.
Embedded sketch
Edit Sketch: https://editor.p5js.org/mariamalkhoori/sketches/exMNOF-7n
Reflection and ideas for future work or improvements
Refrences:
https://editor.p5js.org/HelenaCui/sketches/qwgXBW6Da