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