Concept:
The visual design that I created is reminiscent of waves moving. The inspiration for this design comes from the ‘Bees and Bomb’ design named cube wave . This effect is achieved by varying the height of each box according to a sine wave, with the wave’s phase offset by the box’s distance from the center of the canvas. This creates a harmonious, visually appealing pattern that continuously evolves. I came across this video on YouTube, that kind helped me with the basics of this design.
The choice to center the artwork, combined with the monochromatic color scheme (black boxes with white strokes), emphasizes the geometric shapes and the movement pattern, focusing the viewer’s attention on the fluidity of the motion rather than being distracted by color.
Code:
In this generative art project, I’ve merged Object-Oriented Programming (OOP) with arrays to manage dynamic 3D visualizations using p5.js. The core of the project is the Box class in box.js, which outlines the characteristics and behaviors of the 3D boxes, including their wave-like height adjustments and rendering on the canvas. Utilizing an array, I efficiently organize multiple Box instances, populating this structure in the setup function and iterating over it in the draw function to update and display each box according to a sine wave pattern. This setup leverages OOP for encapsulation and arrays for managing multiple objects, showcasing the project’s complexity through simple user interaction—a keypress initiates the animation, demonstrating a direct engagement with the artwork and highlighting the thoughtful integration of coding principles to bring interactive, dynamic art to life.
Box.js:
class Box {
constructor(x, z, w, h) {
this.x = x;
this.z = z;
this.w = w;
this.h = h;
}
updateHeight(offset, offsetIncrement) {
let d = dist(this.x, this.z, width / 2, height / 2);
let a = offset + d * offsetIncrement;
this.h = floor(map(sin(a), -1, 1, 100, 300));
}
show() {
push();
translate(this.x - width / 2, 0, this.z - height / 2);
// stroke(255); // White stroke
// noFill(); // No fill, or use fill(0) for a black fill
// box(this.w, this.h, this.w); // Draw the 3D box with p5.js's box function
// pop();
fill(0); // Fill with black color
stroke(255); // White stroke
box(this.w, this.h, this.w); // Draw the 3D box with p5.js's box function
pop();
}
}
Sketch.js:
let boxes = []; // Array to store Box objects
let angle = 0;
let w = 24; // Width of the boxes
let ma; // Magic angle
let offsetIncrement;
function setup() {
createCanvas(400, 400, WEBGL);
ma = atan(1 / sqrt(2));
offsetIncrement = TWO_PI / 30; // Adjust this for smoother or more rapid changes
// Populate the array with Box objects
for (let z = 0; z < height; z += w) {
for (let x = 0; x < width; x += w) {
// Adjust the initial height (h) as needed to fit your artistic vision
boxes.push(new Box(x, z, w, 200)); // Using 200 as an example height
}
}
}
function draw() {
background(0);
ortho(-400, 400, 400, -400, 0, 1000);
rotateX(-QUARTER_PI);
rotateY(ma);
// Update and display boxes from the array
let offset = angle;
boxes.forEach(box => {
box.updateHeight(offset, 0.15); // Adjust the second parameter to change the wave's speed
box.show();
offset += offsetIncrement;
});
angle += 0.1; // Adjust this for faster or slower animation
}
Embedded Code:
Reflections and Improvement:
Reflecting on the project, I see several areas for improvement that could make the interactive experience and the visual complexity of the art much better. One immediate enhancement that I wanted to add was introducing varied color dynamics, where each box’s color changes in response to its height or position, adding another layer of depth and engagement, but I think I need to learn more about it as I was messing up my structure while to achieve it. Also experimenting with different geometric shapes or incorporating interactive elements that react to mouse movements could offer viewers a more immersive experience. These reflections seem to open up exciting possibilities for evolving the project, pushing the boundaries of what can be achieved with creative coding and interactive design.
