A collection of computational work from collaborative workshops, teaching & personal projects. Maintained by Mark Webster
createCanvas = () => {
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
return { canvas, context };
}
resize = (canvas) => {
// Desired width and height in pixels
const width = 256;
const height = 256;
// Device screen density, e.g. MacBook Pro is @2x
const pixelRatio = window.devicePixelRatio;
// Scale it up by pixel ratio for higher density screens
canvas.width = width * pixelRatio;
canvas.height = height * pixelRatio;
// Set the style to the desired size so that it scales back down
canvas.style.width = `${width}px`;
canvas.style.height = `${height}px`;
return { width, height, pixelRatio };
}
square = {
// Create the canvas and context
const { canvas, context } = createCanvas();
// Resize the canvas, this returns the new size
const { width, height, pixelRatio } = resize(canvas);
// Scale the 2D context by the pixel ratio so we can work in regular pixels
context.scale(pixelRatio, pixelRatio);
// Fill the canvas with black
context.fillStyle = 'black';
context.fillRect(0, 0, width, height);
// Draw a small square at (50, 50)
context.fillStyle = 'white';
context.fillRect(50, 50, 15, 15);
// Return the canvas so it's visible on screen
return canvas;
}
animatedSquare = {
// Create the canvas and context
const { canvas, context } = createCanvas();
// Resize the canvas, this returns the new size
const { width, height, pixelRatio } = resize(canvas);
function render (time = 0) {
// Request another animation frame, so that the drawing loops continuously
window.requestAnimationFrame(render);
// Convert milliseconds to seconds
time /= 1000;
// Save the context state before scaling
context.save();
// Scale the 2D context by the pixel ratio so we can work in regular pixels
context.scale(pixelRatio, pixelRatio);
// Draw into our canvas context
context.fillStyle = 'rgba(0,33)';
context.fillRect(0, 0, width, height);
// Use a for loop to repeat form
for(let i=0; i<20; i+=2){
const x = width / 2 + Math.sin(time*3+i) * width / 4;
const y = height / 2 + Math.cos(time*1.5+i) * height / 4;
context.fillStyle = 'rgb(0,0,255)';
let s = Math.sin(time*2.5+i) * 50; //also using sin to change size
context.fillRect(x, y, s, s);
}
// Restore the earlier state, so that the scale is reset to 1 for the next frame
context.restore();
}
// Start the render loop
window.requestAnimationFrame(render);
// Return the canvas so it's visible on screen
return canvas;
}
draw = (context, width, height, time = 0) => {
context.fillStyle = 'black';
context.fillRect(0, 0, width, height);
// How much to increase/decrease the radius, in pixels
const radiusOffset = Math.sin(time) * 10;
// Our circle radius
const radius = width * 0.33 + radiusOffset;
// Number of sides in our circle geometry
const steps = 9;
// Let's rotate the circle clockwise slowly
const spin = time * 0.15;
// This lets the context know we are starting to build a polygon
context.beginPath();
// Now we need to define each vertex in our circle geometry
for (let i = 0; i < steps; i++) {
// Find out how far along we are in our circle
const t = i / steps;
// To create a full circle, we multiply `t` by 2PI
// Then we offset the angle by the total spin
const angle = t * Math.PI * 2 + spin;
// Define the coordinates for a unit circle in -1..1 space
const cx = Math.cos(angle) * radius;
const cy = Math.sin(angle) * radius;
// Translate that unit circle into the center of canvas
const x = cx + width / 2;
const y = cy + height / 2;
// Draw a line to this vertex
context.lineTo(x, y);
}
// Now draw the last line to close the shape
context.closePath();
// Once a shape is drawn, we can stroke (or fill) it
context.strokeStyle = 'white';
// We can also specify the thickness of the stroke, in pixels
context.lineWidth = 8;
// Finally, apply the stroke() command to draw the polygon
context.stroke();
}
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.
