In class on Tuesday, we were tasked with simulating the path of an iceberg with perlin noise. The first thing I did was look at the noise() function on the p5.js website, which already came with a pretty good example of what I needed to make:
function setup() {
createCanvas(100, 100);
describe('A black dot moves randomly on a gray square.');
}
function draw() {
background(200);
// Calculate the coordinates.
let x = 100 * noise(0.005 * frameCount);
let y = 100 * noise(0.005 * frameCount + 10000);
// Draw the point.
strokeWeight(5);
point(x, y);
}
I changed this code slightly to make it more visually appealing by making the point pulse from red to black, along with giving the point the ability to move across the whole canvas rather than being confined to a 100x100 space. In the end, this was my result:
I think this was a good introduction into learning how to use perlin noise in p5js and I'm excited to see what more I can learn to do with this in the future.
Home