For this project, I was super inspired by those amazing nights spent away from the city lights in the dessert, looking up at a sky full of stars. I wanted to try and capture a bit of that night sky with code.
I started by creating a bunch of twinkling stars using classes and arrays, which felt a bit like putting together a digital constellation. The fun started when I played around with the `noise` and `sin` functions to make the stars change colors and gently pulse.
Adding a gradient background to mimic the night sky’s colors was a bit tricky at first, but once I got it, it really brought the whole scene together. The whole process was a lot of trial and error, but seeing the final result was totally worth it. It was a cool mix of creativity and coding.
Code:
let stars = [];
function setup() {
createCanvas(600, 500);
for (let i = 0; i < 100; i++) {
stars.push(new Star());
}
}
function draw() {
// To set the gradient background from blue to black
setGradient(0, 0, width, height, color(25, 25, 112), color(0), Y_AXIS);
// Update and display each star
for (let star of stars) {
star.update();
star.display();
}
}
// Function to create a vertical gradient background
function setGradient(x, y, w, h, c1, c2, axis) {
noFill();
for (let i = y; i <= y + h; i++) {
let inter = map(i, y, y + h, 0, 1);
let c = lerpColor(c1, c2, inter);
stroke(c);
line(x, i, x + w, i);
}
}
// Constant to specify vertical gradient
const Y_AXIS = 1;
class Star {
constructor() {
this.x = random(width);
this.y = random(height);
this.size = random(0.5, 3);
this.t = random(TWO_PI);
this.color = color(random(255), random(255), random(255), random(100, 255));
}
// Update the star's properties
update() {
this.t += 0.02;
this.size = this.size + sin(this.t) * 0.5;
// Randomly move the star
this.x += random(-1, 1);
this.y += random(-1, 1);
// Change the star's color using Perlin noise for smooth transitions
this.color = color(
noise(this.t) * 255,
noise(this.t + 5) * 255,
noise(this.t + 10) * 255,
random(100, 255)
);
}
display() {
noStroke();
fill(this.color);
ellipse(this.x, this.y, this.size);
}
}
The provided code is designed to create a gradient background transitioning from a dark blue color to black. This effect is achieved by calling the `setGradient` function with specific parameters: the starting coordinates `(0, 0)`, the width and height of the canvas (`width`, `height`), the initial color (dark blue, defined by `color(25, 25, 112)`), the final color (black, defined by `color(0)`), and the direction of the gradient (`Y_AXIS`). This setup results in a vertical gradient that fills the entire canvas, creating a visually appealing background effect for graphics or visualizations.
Reading Response:
In the book “The Art of Interactive Design,” Chris Crawford explains that true interactivity is like having a good conversation. For something to be interactive, both sides need to listen, think, and then speak or react. He argues that many things we call interactive, such as books or movies, aren’t truly interactive because they don’t allow for this two-way communication. Crawford points out that simply pressing a button isn’t enough, there needs to be a deeper level of engagement where both the user and the system or product can exchange information and respond to each other in a meaningful way.
Crawford also criticizes how the word “interactive” is often used more for marketing than to describe a genuine interactive experience. He warns that this can lead to confusion and disappointment when the interaction isn’t as rich as expected. He urges designers and users to think more critically about what interactivity means and to seek out or create experiences that allow for a genuine conversation-like exchange, where both parties can learn and adapt from the interaction. The book challenges readers to look beyond the hype and to strive for genuine, quality interactivity in technology and design.