References and Inspiration
This project was inspired by sunsets, specifically their color transitions from yellow to orange and purple. These colors were used to design the gradient effect in the particle trails. The movement of the particles was influenced by the idea of natural flows and atmospheric motion. On the technical side, the code was built in p5.js using established techniques such as Perlin noise flow fields and particle systems, which were adapted to fit the chosen sunset theme.
Embedded Code
//this is our particle class responsible for each line of perlin noise
class Particle {
constructor() {
this.pos = createVector(random(width), random(height)); //randomly positioned
this.vel = createVector(0, 0);
this.acc = createVector(0, 0);
this.maxSpeed = 2; //limit to how fast the particle moves
this.prevPos = this.pos.copy(); //saves the previous/latest position of the trail
}
update() {
this.vel.add(this.acc); //alowing the vleocity to change based on the acceleration
this.vel.limit(this.maxSpeed); //limting the speed
this.pos.add(this.vel); //change position based on the velocity
this.acc.mult(0); //reset accelration so it foes not increase infintely
}
applyForce(force) {
this.acc.add(force);
}
follow(vectors) {
let x = floor(this.pos.x / scl); //getting the position of the particle x and y
let y = floor(this.pos.y / scl);
let index = x + y * cols; //makingt he 2d grid into 1 d for indexing
let force = vectors[index]; //access the vector at index
this.applyForce(force); //apply the perlin noise
}
show() {
// Sunset gradient colors
let t = map(this.pos.y, 0, height, 0, 1);
// Top → yellow, middle → orange/red, bottom → purple
let topColor = color(255, 200, 50, 30); // golden yellow
let midColor = color(255, 100, 50, 30); // deep orange/red
let bottomColor = color(180, 60, 160, 30); // magenta/purple
let c; // c is the chosen "sunset color"
if (t < 0.5) { c = lerpColor(topColor, midColor, t * 2); } else { c = lerpColor(midColor, bottomColor, (t - 0.5) * 2); } stroke(c); strokeWeight(1.5); line(this.pos.x, this.pos.y, this.prevPos.x, this.prevPos.y); this.updatePrev(); } updatePrev() { //updating to make sure that the trail starts from the current positoin for the next/continued oaeticle this.prevPos.set(this.pos); } edges() { //limit particles ot stay within the frame if (this.pos.x > width) {
this.pos.x = 0;
this.updatePrev();
}
if (this.pos.x < 0) { this.pos.x = width; this.updatePrev(); } if (this.pos.y > height) {
this.pos.y = 0;
this.updatePrev();
}
if (this.pos.y < 0) {
this.pos.y = height;
this.updatePrev();
}
}
}
Concept:
In my p5.js sketch for this week, I mainly use a particle system where many small points move across the screen, each leaving a trail. Their movement is controlled by a flow field, which is simialr to an invisible grid of arrows that points the particles in the direction they should move in. The directions of these arrows are created with Perlin noise, which makes the movement look smooth and natural instead of random. Each particle updates its position based on the flow field and avoids the mouse when it gets too close, adding interactivity. To match the sunset theme, the particles are colored with a gradient that changes from yellow to orange to purple depending on their vertical position on the screen.
Problems I Ran Into:
I had to review the previous Decoding Nature slides in order to refresh my memory on the concepts like flow field and perlin noise, and particles leaving a trail. So although it was not exactly a “problem” I had to readjust some parameters and play around with the values of certain parameters to remember what they were responsible for.
Embedded Skecth:
Reflection & Future Sketches:
I plan to incorporate more of the concepts taught in decoding nature to the weekly sketches. I also want to focus on the creative elements and aspects of the sketches.Looking ahead, I want to experiment with making the particles react to more external inputs, such as sound or keyboard interaction, to create more dynamic sketches.
Reading Reflection:
When readings Crawfords piece I noticed that he mainly focused on three elements that make strong creativity: Listening, Thinking, and Speaking. By listening he means the system should be able to “capture” or “record”. Not only that but to accurately respond to certain triggers, whether it would be accurately through time, as in instant reaction, or accurately respond in an area specifically clicked on through the mouse.
After reading the piece, I have a few ideas for future sketches that will enhance the interactivity. For example, I want to start integrating all the Listening, Thinking, and Speaking elements cohesively so that the user does not have to be told that the piece is interactive- the piece speaks for itself. For instance, if my sketch has audio interaction or mouse interaction, I want the interactive element to shine through and to be the main focus rather than just an addition..
