![]() ![]() To mine the data, I counted dependency frequencies while streaming all the module data from the registry. It uses ThreeJS and three-bmfont-text for Signed Distance Field text rendering. This was a small visualization of the 4,000 most depended on modules in npm. I’ll be exploring svg-mesh-3d and WebGL path rendering in more detail in a future post. I’ve also been using this technique with marvel-comics-api to produce dynamic renderings of comic book icons with images matching a user query. The triangles are animated in a vertex shader. The triangulation is built on cdt2d by Mikola Lysenko, and the curve subdivision is an algorithm ported from Anti-Grain Geometry. It uses ThreeJS and brings together a host of npm modules. This was a small demo for a module, svg-mesh-3d, showing triangulation of SVG paths for use in WebGL. The canvas is set to a fixed size and is never cleared, so the drawn lines build up over time. It uses Canvas2D, web-audio-analyser and soundcloud-badge. Click here to see the visualization from a different camera origin. The demo actually uses a 3D perspective camera to project the lines, since the original goal was to fly through the experience. This demo was inspired by the way vinyl works - the needle follows the bumpy groove of the audio as it spins toward the centre of the record.Įssentially, it is an audio waveform visualized using polar coordinates. This was a very interesting sketch to work on, and I hope to build it further on a more significant project. ![]() A noisy hash blur is used to produce the frosted aesthetic. The red channel of the video is also used to produce the ghostly white silhouette of the dancer. The particles are positioned and rendered entirely on the GPU (see gl-particles), and a vertex shader samples from the motion vector video. Here is the same sequence, after taking the motion of the dancer into account: This clip was chosen because of the strong contrast of the background and subject.Ī colleague at work showed me that Twixtor, an After Effects plugin for slow-motion video, can also export motion vectors encoded in the red and green channels of an image. The video is some looping footage of Mathilde Froustey during Caprice 2014. This uses soundcloud-badge again (you may be seeing a trend) to complement the visuals. This was a good test of glslify within ThreeJS, and used the following shader components: ![]() The background uses simplex noise for a subtle animated film grain, and the noise function is re-used for the vertex spin. I encoded a Lookup Table (LUT) as an image, allowing me to apply color correction with Photoshop Adjustment layers instead of tweaking colors in GLSL. Inspired by True Detective’s opening sequence (do yourself a favour and go watch it!), the goal was to explore some interesting film effects such as: masking, double exposure and gradient maps. ![]() This was a very small sketch, just using one of ROME’s animated models and building on the screen projection I was using in the earlier demo. send to fragment shader with Y flipped Vec2 uv = (projected.xy / projected.w) * 0.5 + 0.5 get NDC (-1.1) and then scale to (0.1) Vec4 projected = projModelView * vec4(position.xyz, 1.0) Mat4 projModelView = projection * model * view We can use this as our uv coordinates into the video texture. The trick here is just to take the position of the 3D particle and divide by the w component to get its position in screen space. The original idea was to mimic the flow of black ink on paper, but it quickly diverged as I became more interested in projecting a video texture onto a swarm of 3D particles. This was a small audio-reactive sketch that uses soundcloud-badge by Hugh Kennedy. Each explores a single idea, delivered as a sort of “animated real-time artwork.” Most of them use WebGL and/or WebAudio, and are intended to be viewed on desktop Chrome or FireFox. It’s been a while since a blog post, so here’s a look at some small sketches I’ve developed in the last six months. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |