Concept
The Dynamic Hearts project aims to create an engaging visual experience through the generation of heart-shaped forms that interact with each other. This project draws inspiration from the ebb and flow of life, where hearts symbolize love, connection, and emotional depth. The hearts dynamically change in size, color, and motion based on Perlin noise, simulating a dance of souls interacting with one another, occasionally colliding and sometimes drifting apart, creating a mesmerizing display of movement and color.
Design
1. Shapes: The sketch generates multiple heart shapes whose sizes and positions are influenced by Perlin noise, resulting in smooth and organic motions. Each heart is drawn in the center of the canvas, enhancing the visual symmetry and creating a harmonious composition.
2. Color Palette: Colors are assigned dynamically based on the index of each heart, producing a gradient effect across the shapes. This choice evokes a sense of depth, movement, and emotional resonance, as colors shift and blend seamlessly.
3. Interactivity: The motion of the hearts is dictated by a combination of Perlin noise and an orbiting pattern. This feature adds a layer of interactivity, allowing viewers to experience the visual output as a living, breathing entity that shifts with the rhythm of the noise, mimicking the spontaneity of life itself.
States and Variations
The sketch can exhibit different states based on its parameters:
– The number of heart shapes can be adjusted to create a denser or sparser visual.
– Modifying the radius and orbit settings can lead to variations in the hearts’ motions and interactions, resulting in diverse visual patterns.
– The introduction of additional interactive elements, such as changing behavior through keyboard inputs or dynamically adjusting colors based on viewer interactions, can further enrich the visual experience.
Identified Risks
One of the more complex aspects of this project is managing the performance and responsiveness of the visual output, especially with a larger number of hearts. Ensuring the sketch runs smoothly without lag is essential for providing a seamless user experience.
Risk Reduction Strategies
To minimize potential risks:
– The number of heart shapes is set to a manageable level (15) to maintain performance while allowing for a visually rich experience.
– The use of `noFill()` and `strokeWeight()` enhances rendering efficiency while preserving visual quality.
– Performance will be tested across different devices to ensure responsiveness, with adjustments made based on testing results.
Process and Evolution
Starting from my initial concept of creating dynamic spirals, I aimed to design a captivating visual that responded to user input. The initial draft featured spiraling lines that changed in size and color based on mouse position. However, through a process of exploration and experimentation, I was inspired to shift my focus to heart shapes, which felt more resonant with the themes of connection and emotional depth.
The transition from spirals to hearts involved redefining the visual language of the project. I began by adapting the existing code, replacing the spirals with heart shapes that could interact in an engaging manner. By leveraging Perlin noise, I was able to create fluid and organic movements that echoed the unpredictability of human emotions and relationships. The resulting composition features hearts that move like souls, sometimes colliding and other times drifting apart, providing a poignant metaphor for our connections in life.
Final Product
In conclusion, the Dynamic Hearts project represents a culmination of my explorations in interactive art, showcasing how shapes can convey emotional narratives and foster a sense of connection through visual interaction. The final product has evolved significantly from the initial draft, transforming into a rich and engaging experience that reflects the complexity of life and love.
//Dynamic Hearts - Midterm by SP
let numShapes = 15; // Number of shapes
let shapeRadius = 100; // Distance from center
let maxRadius = 1000; // Maximum size for shapes
let angleStep = 0.02; // Speed of rotation
let noiseOffsetX1 = 0; // X-offset for Perlin noise (Group 1)
let noiseOffsetY1 = 1000; // Y-offset for Perlin noise (Group 1)
let noiseOffsetX2 = 5000; // X-offset for Perlin noise (Group 2)
let noiseOffsetY2 = 6000; // Y-offset for Perlin noise (Group 2)
let orbitRadius = 200; // Distance between the two groups
function setup() {
createCanvas(windowWidth, windowHeight);
noFill();
strokeWeight(2);
}
function draw() {
background(0, 30);
// Calculate the central orbit angle based on Perlin noise
let orbitAngle1 = noise(noiseOffsetX1) * TWO_PI; // Group 1 orbit angle
let orbitAngle2 = noise(noiseOffsetX2) * TWO_PI; // Group 2 orbit angle
// Group 1 position based on orbit
let centerX1 = orbitRadius * cos(orbitAngle1);
let centerY1 = orbitRadius * sin(orbitAngle1);
// Group 2 position based on orbit, opposite direction
let centerX2 = orbitRadius * cos(orbitAngle2 + PI);
let centerY2 = orbitRadius * sin(orbitAngle2 + PI);
// Draw first group of hearts
push();
translate(width / 2 + centerX1, height / 2 + centerY1);
drawShapeGroup(numShapes, noiseOffsetX1, noiseOffsetY1, shapeRadius);
pop();
// Draw second group of hearts
push();
translate(width / 2 + centerX2, height / 2 + centerY2);
drawShapeGroup(numShapes, noiseOffsetX2, noiseOffsetY2, shapeRadius);
pop();
// Update Perlin noise offsets for more fluid motion
noiseOffsetX1 += 0.01;
noiseOffsetY1 += 0.01;
noiseOffsetX2 += 0.01;
noiseOffsetY2 += 0.01;
}
// Function to draw a group of hearts
function drawShapeGroup(num, noiseX, noiseY, radius) {
for (let i = 0; i < num; i++) {
// Dynamic position based on Perlin noise
let noiseFactorX = noise(noiseX + i * 0.1) * 2 - 1;
let noiseFactorY = noise(noiseY + i * 0.1) * 2 - 1;
let xOffset = radius * noiseFactorX;
let yOffset = radius * noiseFactorY;
drawHeart(xOffset, yOffset, i);
}
}
// Function to draw a heart shape
function drawHeart(x, y, index) {
stroke(map(index, 0, numShapes, 100, 255), 100, 255, 150); // Dynamic color
beginShape();
for (let t = 0; t < TWO_PI; t += 0.1) {
// Heart shape parametric equations with scaling factor for size
let scaleFactor = 4; // Adjust this factor for size (increased for larger hearts)
let xPos = x + scaleFactor * (16 * pow(sin(t), 3));
let yPos = y - scaleFactor * (13 * cos(t) - 5 * cos(2 * t) - 2 * cos(3 * t) - cos(4 * t));
vertex(xPos, yPos);
}
endShape(CLOSE);
}
// Adjust canvas size on window resize
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
}