little fluffy clouds in 3D (2025)

// make source public, Spring 2025

// schien@mail.ncku.edu.tw

​

// Example code for lecture "Adding Dimensions"

// an example from Pearson (2011)

// displaying a noise grid as ellipses 

// forming little fluffy clouds, in motion

// turning ellipses into balls

// schien@mail.ncku.edu.tw, DPD 2023

​

let xstart, xnoise, ystart, ynoise;

​

function setup() {

  createCanvas(500, 300, WEBGL);

  xstart = random(10);

  ystart = random(10);

}

​

function draw() {

  background(0);

  xstart += 0.01;

  ystart += 0.01;

  xnoise = xstart;

  ynoise = ystart;

  // loop through all pixels

  for (let y = 0; y <= height; y += 5) {

    ynoise += 0.1;

    xnoise = xstart; // reset the noise at the start of each row

    for (let x = 0; x <= width; x += 5) {

      xnoise += 0.1;

      drawPoint(x, y, noise(xnoise, ynoise)); // the noise function that takes 2 parameters

    }

  }

}

​

function drawPoint(x, y, noiseFactor) {

  push();

  translate(250-x, 50-y, -y+100);

  let sphereSize = noiseFactor*9;

  let gcolor = 150 + (noiseFactor * 120);

  let alph = 150 + (noiseFactor * 120);

  noStroke();

  fill(gcolor, alph);

  sphere(sphereSize, 8, 8);

  pop();

}