Assignment 2: “Structure” by Z.Sykora – Introduction to Interactive Media

Concept

My initial concept revolved around a static canvas featuring a variety of monochromatic circles and semicircles. This art was similar to “Structure” by Z.Sykora. Once I could achieve randomness in this static art piece by having different sizes of circles and semi-circles, the concept underwent substantial changes. The idea was a dynamic, living piece of art in which various circles, each unique in size, color, and placement, vibrate across the canvas depending on the mouse’s motion. This art piece also uses mapping (map) and linear interpolation (lerp) methods.

Inspiration

Initial Sketch

Final Sketch

The interactive drawing portrays balls as circles with different sizes and colors, similar to the colorful spheres in a ball pit. In this art, the color and size changes mimic the visually stimulating atmosphere of an actual ball pit.

Code

The circle colors will be interpolated using lerpValue, whose starting value is set to 0. The color is randomly assigned.

fill(lerpColor(circle.color, color(random(255), random(255), random(255)), circle.lerpValue));
ellipse(circle.x, circle.y, circle.radius * 2);

The fill function applies a color transition between the current color and a new random color by using lerpColor to set the color of the circle. The lerpValue function controls the transition; it gradually increases to provide the impression of a progressive color change, similar to the varying reflections in a ball pit.

let newMaxSize = map(mouseX, 0, width, minSize, maxSize);
circle.radius = lerp(circle.radius, targetRadius, 0.1);

The mouseMoved function uses the mouse’s x-coordinate to change the circle sizes. It converts the x-coordinate to a new circle maximum size. The size of each circle is then progressively adjusted toward this new goal size using the Lerp function. Here, abrupt changes in size are avoided and the interaction is smoothed down by using the lerp function to interpolate between the existing size and the new size. The interpolation factor that controls the transition’s pace is the third parameter (0.1 value). This indicates that the circle’s radius will only move 10% closer to the desired radius with each call to mouseMoved. This prevents a sudden shift in size and instead produces a gradual resizing effect as the mouse goes.

let circles = [];
let maxSize = 80; // Maximum size for the circles
let minSize = 20; // Minimum size for the circles

function setup() {
    createCanvas(800, 800);
    background(0);
    noLoop(); 

    // Initialize circles with random positions, sizes, and colors
    for (let i = 0; i < 100; i++) {
        let circle = {
            x: random(width),
            y: random(height),
            radius: random(minSize, maxSize), // Random radius for variety
            color: color(random(255), random(255), random(255)), // Random fill color
            lerpValue: 0 // To keep track of color interpolation
        };
        circles.push(circle);
    }
}

function draw() {
    // Clear the background without changing its color
    clear();
    background(0);

    for (let circle of circles) {
        // Interpolate to the next color
        if (circle.lerpValue >= 1) {
            circle.color = color(random(255), random(255), random(255));
            circle.lerpValue = 0;
        }

        // Draw each circle
        fill(lerpColor(circle.color, color(random(255), random(255), random(255)), circle.lerpValue));
        noStroke();
        ellipse(circle.x, circle.y, circle.radius * 2);
        
        // Slowly increment the lerp value
        circle.lerpValue += 0.005;
    }
}
function mouseMoved() {
    // Use mouse X position to scale the radius of each circle
    let newMaxSize = map(mouseX, 0, width, minSize, maxSize);
    for (let circle of circles) {
        // Smoothly interpolate the radius
        let targetRadius = random(minSize, newMaxSize);
        circle.radius = lerp(circle.radius, targetRadius, 0.1); // 0.1 is the lerp amount for smoothing
    }
    redraw(); // Redraw the canvas with new sizes
}

Challenges

The “vibration” effect of the circles relied on linear interpolation(Lerp). The difficult part turned out that adjusting the Lerp factor required careful balancing; if it was set too high, the animation’s smoothness would be disrupted by the circles changing size too quickly. If it’s too low, the changes won’t be noticeable and won’t portray the vibrant engagement that’s intended. Finding the optimal value where the interpolation produced the ideal pace of size variations was the difficult part.

Reflections and Improvements

The assignment was a great learning experience. This week’s reading response was on chance operations by Casey Raes. That talk made me ponder if I can do something similar where the steps of an algorithm have controlled randomness to produce an art piece. My making the art piece above made me realize the main motive behind Casey Raes’ talk.

In my opinion, there is still some room for improvement in the art piece. I might modify this art piece to vibrate and transition into different shapes smoothly. That would be an effective effect yet calming.

Leave a Reply Cancel reply