Concept
For this assignment, I wanted to implement something rather simple, but entertaining to play with. So, to come with some ideas, I reflected upon the material given in class and had a sudden realization that the autonomous agents concepts and examples looked like how ants behave.
So with this realization in mind, I decided to code ants trying to reach their home, while they try to avoid the flashlights.
Embedded sketch
Link to full-screen version: Full-screen version of the sketch
Brief explanation of the code
The code possess three main characteristics:
-
-
- Arrival
- Evade
- Randomized movement across the Canva with the help of a flowfield.
-
At the beginning of the program, an ant will spawn, which will make the final destination the nest. After the ant has moved a certain distance, another ant will spawn. Although, the ants can have some troubles getting into the nest if the flashlights are switched on, since they would have to avoid them. Likewise, to avoid a monotonous movement, the concept of flow fields (using Perlin Noise to help with the random generation) was added into the Canva to let ants move more naturally; their movements are more unpredictable.
Highlight of some code that I am particularly proud of
The hardest part, at least for this code, was to find a way to properly toggle ON and OFF the flashlights, as well as moving them across the Canva. While this seemed like an easy task at first, I forgot that sometimes coding can be hard for no reason. For example, the first flashlight would work, but the second not. Although, if you moved the second flashlight closer to the left side of the canvas, suddenly it worked!
It was confusing, but at the end, this was the code that worked:
First part of the logic (mouse is being pressed on a flashlight to move it):
for (let i = 0; i < flashlights.length; i++) {
flashlights[i].display();
if(mouseIsPressed == true){
if (
mouseX > flashlights[i].position.x &&
mouseX < flashlights[i].position.x + flashlights[i].r + 60 &&
mouseY > flashlights[i].position.y &&
mouseY < flashlights[i].position.y + flashlights[i].r + 180
) {
//Check just in case if clicked element exists.
let index = flashlights.indexOf(flashlights[i]);
if (index > -1) {
flashlights[index].position.x = mouseX-30;
flashlights[index].position.y = mouseY-95;
}
}
}
}
Second part of the logic (mouse is pressed over a flashlight to turn ON or OFF the light):
function mousePressed() {
for (let i = 0; i < flashlights.length; i++) {
if (
mouseX > flashlights[i].position.x &&
mouseX < flashlights[i].position.x + flashlights[i].r + 60 &&
mouseY > flashlights[i].position.y &&
mouseY < flashlights[i].position.y + flashlights[i].r + 180
) {
//Check just in case if clicked element exists.
let index = flashlights.indexOf(flashlights[i]);
if (index > -1) {
if (flashlights[index].state == 0) {
flashlights[index].state = 1;
} else if (flashlights[index].state == 1) {
flashlights[index].state = 0;
}
flashlight_button_sound.play();
}
}
}
}
Reflection and ideas for future work or improvements
I feel that there could be more original ideas and experimentation implemented in this program, since I feel that I only use class material in a very copy and paste fashion. Not to imply that I feel that I did not put effort into this assignment, rather, how I should have gone more outside the box.
Now, regarding the code itself, some improvements are:
-
-
- Ants spawn in different points in the Y axis.
- Ants avoid the flashlights in a more believable manner.
- Flashlights can not be overlapped between each other.
-
Used resources
SOme extra Concepts:
Images:
a. https://www.shutterstock.com/search/dirt-ground-grass
Audio:
a. https://freesound.org/people/Sjonas88/sounds/538554/
b. https://freesound.org/people/baidonovan/sounds/187335/
c. https://freesound.org/people/naturesoundspa/sounds/163597/