A rather geeky/technical weblog, est. 2001, by Bramus
Wonderful little tool by Rik Schennink to redact photos straight in the browser. The redacted parts can’t be reversed, as the pixels get randomly shifted before they are blurred. I've added this "How does it work?" section to https://t.co/EoDQGxV4An to explain why _I think_ its blurring is secure. https://t.co/bb1Wvj3JsV pic.twitter.com/KVGigqJHly — Rik Schennink (@rikschennink) October …
Continue reading “redact.photo – Free and Private Image Redaction in the Browser”
Now this is a fun time-waster: Where’s Waldo (Wally) using Emoji 🙂 Using p5.js the emoji get randomly drawn onto a <canvas> Feels — Find all the feels in this hide ’em up. →
For all your working-with-layers-on-<canvas> needs: Konva is an HTML5 Canvas JavaScript framework that enables high performance animations, transitions, node nesting, layering, filtering, caching, event handling for desktop and mobile applications, and much more. You can draw things onto the stage, add event listeners to them, move them, scale them, and rotate them independently from other …
Continue reading “Konva.js — HTML5 Canvas JavaScript framework”
Louis Hoebregts recreated the animation of last Apple’s recent Keynote Event using SVG, Canvas, and GreenSock: See the Pen Apple Keynote animation by Louis Hoebregts (@Mamboleoo) on CodePen. Crazy! 🤯 If you’re curious to see how he’s done it, in the demo below he breaks it down step by step: See the Pen Apple Keynote …
Continue reading “Recreating the Apple Keynote Event animation using SVG, Canvas, and GreenSock”
Retro-looking tool by Sara Vieira Pixelr →Pixelr Source (GitHub) → ⚠️ Did notice it to be a bit buggy though: checking and then unchecking greyscale for example rendered the image still in greyscale.
Louis Hoebregts walks us through how they rendered a 3D globe on a 2D canvas. Because as all the following animation steps were plain 2D, I couldn’t use a 3D renderer such as Three.js. And so I had to figure out how to render a 3D shape using only the Canvas 2D API. In this …
Surma digging into the oldskool dithering technique: I always loved the visual aesthetic of dithering but never knew how it’s done. So I did some research. This article may contain traces of nostaliga and none of Lena. Turns out there’s quite a lot to it 😅 Ditherpunk — The article I wish I had about …
css-houdini-circles — A Houdini Paint Worklet that draws Colorful Background Circles
Last night — inspired by the Paint Worklet demos on Houdini.how — I decided to give Houdini a spin myself and created my own Paint Worklet. The result is css-houdini-circles which draws a bunch of random circles on the background. As a user you can configure the number of circles, the size range, the opacity …
Rough.js is a light weight (~8k), Canvas based library that lets you draw in a sketchy, hand-drawn-like, style. The library defines primitives to draw lines, curves, arcs, polygons, circles, and ellipses. It also supports drawing SVG paths. To get started first create a rough canvas: const rc = rough.canvas(document.getElementById(‘canvas’)); On that rough canvas you can …
Continue reading “Rough.js – Create SVGs with a hand-drawn, sketchy, appearance”
Each year for April Fools’, rather than a prank, we like to create a project that explores the way that humans interact at large scales. This year we came up with Place, a collaborative canvas on which a single user could only place a single tile every five minutes. This limitation de-emphasized the importance of …