Collecting Data using IO Feeds
My task was to create a sketch that would simulate an existing natural system -
This prompt made me think back to when I was a kid growing up in Texas and watching the fireflies come out on a summer night.
To re-create this system, I used an esp32 breadboard, an internet connected device such as my laptop, a potentiometer (a sensor that logs how much a knob is turned) and a photoresistor ( a sensor that logs how much light is detected). From there I started to collect my data I needed to create this sketch.
Creating Code to Determine Brightness and Swarm Size:
After collecting data I used p5.js code to fetched the values that were collected in the online IO feed and set intervals of 2 seconds between when the values that were being used to update the brightness and count of the fireflies. Then I used pop and push arrays to add and decrease the number for fireflies dynamically. I also used map and constrain to scale my firefly count to keep it within 5-100, I did the same for the brightness to keep it within a realistic range. I kept the placement of the fireflies within the sketch to be random to create a natural feel to the system, thats why I used a Perlin noise movement to keep the movements organic. After that I used draw functions to display the fireflies.
Arduino Code:
#include "config.h"
#define POTENTIOMETER_PIN A2
#define PHOTOCELL_PIN A3
AdafruitIO_Feed *potFeed = io.feed("knob-feed");
AdafruitIO_Feed *photoFeed = io.feed("photo-feed");
void setup() {
// put your setup code here, to run once:
Serial.begin(9600);
while(! Serial);
Serial.print("Connecting to Adafruit IO");
io.connect();
while(io.status() < AIO_CONNECTED) {
Serial.print(".");
delay(500);
}
Serial.println();
Serial.println(io.statusText());}
void loop()
{ io.run();
float potVal = analogRead(POTENTIOMETER_PIN);
float photoVal = analogRead(PHOTOCELL_PIN);
Serial.print("Sending potentiometer: ");
Serial.println(potVal);
potFeed->save(potVal);
Serial.print("Sending photoresistor: ");
Serial.println(photoVal);
potFeed->save(photoVal);
delay(5000);}
p5.js Code:
let fireflies = [];
let fireflyCount = 20; // Controlled by potentiometer
let glowIntensity = 100; // Controlled by photoresistor
// Adafruit IO credentials
let username = "username";
let aioKey = "AIO-KEY";
let potFeed = `https://io.adafruit.com/api/v2/${username}/feeds/knob-feed/data/last`;
let photoFeed = `https://io.adafruit.com/api/v2/${username}/feeds/photo-feed/data/last`;
function setup() {
createCanvas(600, 400);
noStroke();
setInterval(fetchPotValue, 2000); // Update firefly count
setInterval(fetchPhotoValue, 2000); // Update brightness
// Initialize fireflies
for (let i = 0; i < fireflyCount; i++) {
fireflies.push(new Firefly(random(width), random(height)));
}
}
function draw() {
background(10, 20, 30); // Dark night background
// Adjust number of fireflies dynamically
while (fireflies.length < fireflyCount) {
fireflies.push(new Firefly(random(width), random(height)));
}
while (fireflies.length > fireflyCount) {
fireflies.pop();
}
// Update and draw fireflies
for (let firefly of fireflies) {
firefly.update();
firefly.display();
}
}
// Fetch potentiometer value (swarm size)
function fetchPotValue() {
fetch(potFeed, { headers: { "X-AIO-Key": aioKey } })
.then(response => response.json())
.then(data => {
fireflyCount = constrain(map(int(data.value), 0, 1023, 5, 100), 5, 100);
})
.catch(error => console.log("Pot Fetch Error:", error));
}
// Fetch photoresistor value (glow intensity)
function fetchPhotoValue() {
fetch(photoFeed, { headers: { "X-AIO-Key": aioKey } })
.then(response => response.json())
.then(data => {
glowIntensity = constrain(map(int(data.value), 0, 1023, 50, 255), 50, 255);
})
.catch(error => console.log("Photo Fetch Error:", error));
}
// Firefly Class
class Firefly {
constructor(x, y) {
this.pos = createVector(x, y);
this.noiseOffset = random(1000);
}
update() {
// Organic movement using Perlin noise
this.pos.x += map(noise(this.noiseOffset), 0, 1, -2, 2);
this.pos.y += map(noise(this.noiseOffset + 100), 0, 1, -2, 2);
this.noiseOffset += 0.01;
// Wrap edges
if (this.pos.x < 0) this.pos.x = width;
if (this.pos.x > width) this.pos.x = 0;
if (this.pos.y < 0) this.pos.y = height;
if (this.pos.y > height) this.pos.y = 0;
}
display() {
fill(255, 255, 100, glowIntensity); // Glow effect
ellipse(this.pos.x, this.pos.y, 8, 8);
}
}