Researcher @openai trying to prevent software from eating the world
Published
Edited
Aug 7, 2019
import { createJsonDownloadButton } from "@trebor/download-json"
// make sure the image allows CORS. Imgur is good
imageUrl = 'https://i.imgur.com/5UdSXp5.png'
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
box = html`<canvas class="pic" width="224", height = "224" style="border:1px solid #000000;"></canvas>`
viewof filterSize = html`<input type=range min=0 max=800 step=any>`
filterSize
viewof centerX = html`<input type=range min=0 max=1000 step=any>`
viewof centerY = html`<input type=range min=0 max=1000 step=any>`
+(viewof filterSize.value)
dataUris = []
{
const canvas = document.getElementsByClassName("pic")[0]
let start = 320
for (let i=0;i<35;i++) {
viewof filterSize.value = start
viewof filterSize.dispatchEvent(new CustomEvent("input"));
yield Promises.delay(300, i);
dataUris.push(canvas.toDataURL('image/jpeg'))
start -= 10
}
}
createJsonDownloadButton(dataUris, 'imageZooms.json', 'download zooms')
{box;
const ctx = document.getElementsByClassName("pic")[0].getContext('2d');
const img = new Image()
// const centerX = 1500
// const centerY = 1500
// const filterSize = 2000
img.setAttribute('crossOrigin', 'anonymous'); // works for me
img.src = imageUrl
img.onload = () => {
ctx.drawImage(img, centerX - filterSize, centerY - filterSize, filterSize * 2, filterSize * 2, 0, 0, 224, 224);
}
}
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.
