BIT-101 [2017-2023]

SVG Filters in Canvas

Jul 5, 2021

Earlier I talked about the new (and still experimental) filters that you can apply to the HTML Canvas’s 2d rendering context. One of the more powerful aspects of this is the ability to use external SVG filters in this workflow.

External SVG filters are applied using the url filter. It looks like this:

context.filter = "url(pathtofilter)";

It took quite a bit of frustration to figure out how to actually get these to work though. The documentation says that the path should point to an external XML document that contains an SVG filter. Again, all of this was borrowed from the CSS filter that works the same way. So let’s get an example of that working first.

New HTML Canvas Stuff: Filters

Jul 5, 2021

For the past couple of years or so, I’ve focused mainly on creating images and animations with Go and my own Go library, blgo, that uses CairoGraphics bindings (my own fork of go-cairo).

When I started creating MiniComps, it was an opportunity to get back into JavaScript-based content creation using HTML’s Canvas and its 2d rendering context. The canvas drawing API is pretty much the same as Cairo, but it’s been nice getting back into interactive, web-based pieces – not so easy in Go/Cairo. I made an updated version of my bitlib library for 2021, bljs, and if you’ve been on this blog or follow me on Twitter, you’ve seen some of the stuff I’ve been doing with it.

7 Days of Code : July ’21 : 05. Rotate

Jul 5, 2021

Note: 7daysofcode.art is no longer alive.

Once again, draw on the canvas. This took well under an hour to create, which is really only a testament to how many times over the last 20 years I’ve re-written the same damn code. 🙂

7 Days of Code : July ’21 : 04. Combine

Jul 4, 2021

Note: 7daysofcode.art is no longer alive.

Once again, draw on the canvas.

7 Days of Code : July ’21 : 03. Repeat

Jul 3, 2021

Note: 7daysofcode.art is no longer alive.

Draw on the canvas.

7 Days of Code : July ’21 : 02. Flow

Jul 2, 2021

Note: 7daysofcode.art is no longer alive.

7 Days of Code : July ’21 : 01. Mirror

Jul 1, 2021
[ noise ]

Ran across this yesterday. 7daysofcode.art (site now dead). Seemed fun. Here’s my entry for Day One. Join me.

Probe

Jun 28, 2021
[ noise ]

Similar to what I was doing yesterday, but this was inspired by the Alien movie, Prometheus – the scene where they send these probes into the alien structure to map it out with lasers or whatever.

Edge Finding

Jun 27, 2021

Random point send out feelers in multiple directions until it finds the noise threshold it’s looking for.

Connections with Noise

Jun 27, 2021

Another take on this one…

Posts