Interactive News Editor, Associated Press
Published
Edited
Mar 31, 2020
1 star
p5(sketch => {
let graphic;
let font;
let pos = 0;
sketch.setup = function() {
// setup canvas
sketch.frameRate(fr);
sketch.createCanvas(canvasWidth, canvasHeight);
// create offscreen graphics buffer
graphic = sketch.createGraphics(canvasWidth, canvasHeight);
graphic.fill(textColor);
graphic.textSize(fontsize);
graphic.textFont('sans-serif');
graphic.textAlign(sketch.CENTER, sketch.CENTER);
graphic.text(words, canvasWidth / 2, canvasHeight / 2);
};
sketch.draw = function() {
// redraw background every frame
sketch.background(bgColor);
// loop over each tile
for (let i = 0; i < tilesTall * tilesWide; i++) {
const row = Math.floor(i / tilesWide) * tileHeight; // what row
const column = (i % tilesWide) * tileWidth; // what column
// wave
let wave = pos / canvasHeight;
// let wave = mouseY / canvasHeight;
// if (sketch.mouseY < 0) wave = 0;
// if (wave > canvasHeight) wave = canvasHeight;
wave = easings[easing](wave);
const reverseWave = 1 - wave;
// think of this as applying the grid to the source in the graphics buffer
const sx = column; // source x
const sy = row * wave; // source y
const sw = tileWidth; // source width
const sh = tileHeight * wave + canvasHeight * reverseWave; // source height
// and this as applying the grid to the destination on the canvas
const dx = column; // destination x
const dy = row; // destination y
const dw = tileWidth; // destination width
const dh = tileHeight; // destination height
// grided image from buffer into main canvas
sketch.copy(graphic, sx, sy, sw, sh, dx, dy, dw, dh);
}
sketch.mouseWheel = function(event) {
if (pos <= canvasHeight || event.delta < 0) pos += event.delta;
if (pos < 0) pos = 0;
//uncomment to block page scrolling
//return false;
};
};
})
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
