Animating with noise
Lecture slides
https://slides.com/otso_havanto/programming-for-visual-artists-4/embed
Noise
Note that the video is from previous year and the structure is a bit outdated for this years course
Noise ribbon example
let noiseX = 0;
function setup() {
createCanvas(windowWidth, windowHeight);
background(255);
stroke(0, 10);
}
function draw() {
let x1 = noise(noiseX) * width;
let y1 = noise(noiseX + 100) * height;
let x2 = noise(noiseX + 200) * width;
let y2 = noise(noiseX + 300) * height;
line(x1, y1, x2, y2);
noiseX += 0.001;
}
Save frame
You can add the following snippet to your sketch to save the current frame by pressing the letter 'p'.
function keyPressed() {
// Save frame if letter 'p' is pressed
if (keyCode === 80) {
save(`sketch-${frameCount}.png`);
}
}
Assignment
Pick a 2D primitive from the https://p5js.org/reference/ or use a bezier curve. Animate the shape by generating coordinates with the noise function.
If you want, use a slightly transparent color for stroke and study the visual traits of the trails left by the moving elements.