Sketch
Concept
“The Satanic Donut” is a donut that tries to, but can never completely finish creating itself. One way to interpret it is as a display of never-ending conflict, due to its rapidly-moving and constantly-at-odds components of red and black colour.
As classes allow us to create objects where each object can have its own unique behaviour, I got the idea to create an art piece where the entities inside the art piece are the ones creating the art. Therefore, I conceptualised two groups of entities inside my art: ‘leaders’ and ‘followers’. The leaders move around, while the followers follow the leaders. All entities leave a trail of colour as they move around, as if there are many small brushes simultaneously creating the art piece.
The catch is, the leaders never stop moving towards their cryptic destination, while the followers never stop going after them. Thus, the art piece can never truly finish drawing itself.
Code highlight
A particularly interesting part of the code is the logic that enables each follower to ‘steer’ towards a leader. The followers don’t instantly turn in the direction of their target, but instead perform a smooth turn.
steerTowardsTarget() {
// Update velocity to point towards the target.
// However, use a 'steering' effect so the follower does not instantly turn
// towards the target, but instead gradually turns.
if (this.target == null) {
return;
}
// v here is a vector pointing towards the target, with its magnitude being
// how far we have to move.
let v = this.target.pos.copy();
v.sub(this.pos);
if (v.mag() <= this.speed) {
// We have reached the target.
this.velocity = v.copy();
} else {
// Make v have a magnitude of our speed.
// It is still pointing towards the target.
v.normalize();
v.mult(this.speed);
// Make v be the vector from the tip of our current velocity
// to the tip of the vector pointing towards the target.
v.sub(this.velocity);
// Multiply v by a constant to make its effect less pronounced.
v.mult(STEERING_CONSTANT);
// Add v to our velocity, to partially change velocity towards our target.
this.velocity.add(v);
}
}
The explanation for how this works requires a bit of math knowledge, but this video explains it very well, starting from 50:27. This is where I found out about this concept.
Reflection
The concept of an art piece drawing itself using several small brushes is very interesting and is worth exploring more deeply. Namely, one could devise many different classes of entities, each of which moves in its own unique way or pattern. With every small modification, just running the simulation could create something you never expect.