Used to work on @observablehq — still think it rocks.
🏍 🌎 👶
canvas.canvas
snake_urls = [
"http://etc.usf.edu/clipart/2200/2289/boa-constrictor_1_sm.gif",
"http://etc.usf.edu/clipart/2200/2290/cobra_1_sm.gif",
"http://etc.usf.edu/clipart/2200/2291/puff-adder_1_sm.gif",
"http://etc.usf.edu/clipart/7200/7221/snake_7221_sm.gif",
"http://etc.usf.edu/clipart/8200/8295/rattle_snake_8295_sm.gif",
"http://etc.usf.edu/clipart/13300/13360/brwnamphbn_13360_sm.gif",
"http://etc.usf.edu/clipart/13300/13362/glasssnake_13362_sm.gif",
"http://etc.usf.edu/clipart/13500/13550/bicclrssnake_13550_sm.gif",
"http://etc.usf.edu/clipart/13500/13551/karoobkdam_13551_sm.gif",
"http://etc.usf.edu/clipart/13500/13553/prpleptophis_13553_sm.gif",
"http://etc.usf.edu/clipart/13500/13554/dypcyandon_13554_sm.gif",
"http://etc.usf.edu/clipart/13500/13555/herptentacul_13555_sm.gif",
"http://etc.usf.edu/clipart/26100/26140/sea_snake_26140_sm.gif",
"http://etc.usf.edu/clipart/27300/27370/asp_27370_sm.gif",
"http://etc.usf.edu/clipart/57900/57983/57983_sea_snake_sm.gif"
]
snake_images = Promise.all(snake_urls.map(url => {
return new Promise(resolve => {
var img = new Image();
img.src = url;
img.onload = () => resolve(img);
});
}))
uniformRandom = function uniformRandom
(low, high) {
if (typeof(high) === 'undefined') {
high = low;
low = 0;
}
return low + (high - low) * Math.random();
}
randomInt = function randomInt
(low, high) {
return Math.floor(uniformRandom(low, high));
}
randomChoice = function randomChoice
(array) {
var choice = Math.floor(Math.random() * array.length);
return array[choice];
}
randomSnake = function randomShape
(c, width, height, maxradius) {
c.save();
var x = randomInt(0, width);
var y = randomInt(0, height);
c.translate(x, y);
c.rotate(randomInt(0, 360));
var size = randomInt(40, snakesize);
var snake = randomChoice(snake_images);
var aspect = snake.naturalHeight / snake.naturalWidth;
c.drawImage(snake, 0, 0, size, size * aspect);
c.restore()
}
canvas = {
var canvaswidth = width;
var canvasheight = width;
var c = DOM.context2d(canvaswidth, canvasheight);
c.globalCompositeOperation = "darken";
for (var i=0; i < numsnakes; i++) {
randomSnake(c, canvaswidth, canvasheight, 30);
};
return c;
}
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.
