p5.js: Transition Example

Posted on
p5js data-publics
let data;

function preload() {
  data = loadTable("data.csv", "csv", "header");
}

function setup() {
  createCanvas(200, 200);
  angleMode(DEGREES);
}

function draw() {
  background("grey");

  let radialness = map(sin(frameCount), -1, 1, 0, 1);
  let radialness_inverted = map(radialness, 0, 1, 1, 0);

  data.rows.map((row, i) => {
    let humidity = row.getNum("Rel_hum_percent");
    push();
    translate(100 * radialness, 100 * radialness);
    rotate(360 * (i / 25) * radialness);

    let x = i * 8 * radialness_inverted;
    let y = 10 * radialness;
    let wdth = 8;
    let hght = humidity * map(radialness, 0, 1, 2, 1);

    rect(x, y, wdth, hght);
    pop();
  });
}