html`<div id="myElement">
Paint worklets
</div>
<style>
#myElement {
text-align: center;
padding: 200px 50px;
color: #fff;
font-size: 5rem;
font-family: futura, sans-serif;
font-weight: bold;
--circle-color: red;
background-image: paint(${workletName});
}
</style>`
class WorkletPainter {
paint(ctx, geom, properties) {
const size = 32;
for(let y = 0; y < geom.height/size; y++) {
for(let x = 0; x < geom.width/size; x++) {
const color = `rgb(${~~(Math.random() * 240)}, 150, 200)`;
ctx.beginPath();
ctx.fillStyle = color;
ctx.rect(x * size, y * size, size, size);
ctx.fill();
}
}
}
}
workletName = `worklet-${await sha256(WorkletPainter.toString())}`
worklet = `registerPaint('${workletName}', ${WorkletPainter.toString()})`
workletBlob = URL.createObjectURL(new Blob([worklet], { type: 'application/javascript' }))
window.CSS.paintWorklet.addModule(workletBlob)
function sha256(str) {
// We transform the string into an arraybuffer.
var buffer = new TextEncoder("utf-8").encode(str);
return crypto.subtle.digest("SHA-256", buffer).then(function (hash) {
return hex(hash);
});
}
function hex(buffer) {
var hexCodes = [];
var view = new DataView(buffer);
for (var i = 0; i < view.byteLength; i += 4) {
// Using getUint32 reduces the number of iterations needed (we process 4 bytes each time)
var value = view.getUint32(i)
// toString(16) will give the hex representation of the number without padding
var stringValue = value.toString(16)
// We use concatenation and slice for padding
var padding = '00000000'
var paddedValue = (padding + stringValue).slice(-padding.length)
hexCodes.push(paddedValue);
}
// Join all the hex strings into one
return hexCodes.join("");
}
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.
