Kx = [-1, 0, +1, -2, 0, +2, -1, 0, +1]
Ky = [-1, -2, -1, 0, 0, 0, +1, +2, +1]
K_laplacian = [0, 1, 0, 1, -4, 1, 0, 1, 0]
function* rotate() {
const context=createContext(image)
let input=context.getImageData(0, 0, width, height)
let output=context.createImageData(width, height);
let raw=[], count=0, Kj=0
const alpha=0.0001
while (count<5000) {
for (let y=1; y<height-1; ++y) {
for (let x=1; x<width-1; ++x) {
let i=(y*width+x)*4
let rgb=[0,0,0]
for (let c=0; c<3; c++) {
for (let j=0; j<9; j++) {
let ii=i+(j%3-1)*4+width*((j-j%3)/3-1)*4
Kj=Kx[j]*(y-height/2)-Ky[j]*(x-width/2) // centered at width/2, height/2
// Kj=Ky[j]*(y-height/2)+Kx[j]*(x-width/2) // scaling
// Kj=100*Kx[j] // translation
// Kj=500*K_laplacian[j] // blurry
rgb[c]+=(count==0)?input.data[ii+c]*alpha*Kj:raw[ii+c]*alpha*Kj
}
raw[i+c]=(count==0)?input.data[i+c]+rgb[c]:raw[i+c]+rgb[c]
output.data[i+c]=Math.round(raw[i+c])
}
output.data[i+3]=255;
}
}
context.putImageData(output, 0, 0);
yield context.canvas;
count++
for (let x=1; x<width-1; x++) {
let i=x*4
for (let c=0; c<3; c++)
raw[i+c]=raw[i+c+width*4] //*2-raw[i+c+width*8]
i+=width*(height-1)*4
for (let c=0; c<3; c++)
raw[i+c]=raw[i+c-width*4] //*2-raw[i+c-width*8]
}
for (let y=0; y<height; y++) {
let i=y*width*4
for (let c=0; c<3; c++)
raw[i+c]=raw[i+c+4] //*2-raw[i+c+8]
i+=(width-1)*4
for (let c=0; c<3; c++)
raw[i+c]=raw[i+c-4] //*2-raw[i+c-8]
}
}
}
image = new Promise((resolve, reject)=>{
const image = new Image;
image.style="max-width: 100%; display: block;";
image.crossOrigin="anonymous";
image.onerror=reject;
image.onload=()=>resolve(image);
image.src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/402px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg";
})
function createContext(image) {
const context=DOM.context2d(width, height, 1);
context.canvas.style="max-width: 100%;";
context.drawImage(image, 0, 0, width, height);
return context;
}
width = 400
height = Math.round(width/image.naturalWidth*image.naturalHeight)
d3 = require("d3-color@1", "d3-scale-chromatic@1")
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.
