NotesThis is a live-coding tool, where you can write a 2D fragment/pixel shader while it is running in the background. It's a fork of Bonzomatic that add network communication (WebSocket Server). The goal is to send a shader as text across a network and receive it somewhere else for display. The shader is send when you ask for compilation (ctrl+r) and also at regular updates (interval can be set in config.json) Bonzomatic can be launched as "sender" or as "grabber" if you want to send your shader or visualize a distant shader.Unfurl
NotesSkia Canvas is a browser-less implementation of the HTML Canvas drawing API for Node.js. It is based on Google’s Skia graphics engine and, accordingly, produces very similar results to Chrome’s <canvas> element. The library is well suited for use on desktop machines where you can render hardware-accelerated graphics to a window and on the server where it can output a variety of image formats.Unfurl
NotesAre you writing a publication where you want to use the Lena picture, but don’t want to support its troubled origin? I offer to you my recreation of the Lena/Lenna picture, which you can use to your hearts content.Unfurl
NotesHighlight:In this article, I hope to convince you of the power of post-processing effects and that nothing beats an elegant retro vibe applied to a website 👌✨. We'll also look into examples of dithering and pixel art from very talented folks who use the same processes that I'll be introducing later on, as well as some of my own creations that I built while learning about all this.
A detailed walkthrough of the inner workings of dithering and other shading techniques to give a retro look and feel to your WebGL and React Three Fiber work.FeedUnfurl
NotesNow that SVG is widely supported and native to browsers, the art of using it is more connected to the surrounding web technologies that it can now interoperate with in HTML5Unfurl
NotesI shared this video with different BBS enthusiasts. Since I now knew how to scroll the background continuously, and I knew how to mask frames to allow transparency, I began to wonder about parallax scrollingFeedEmbedUnfurl
NotesGetting a computer to draw a shape in the way that a human would requires programming in some imperfection. The simple idea is to add in some randomization of drawing coordinates, which could be done in various ways. Below are two examples of imperfect circles drawn in an HTML5 canvas with JavaScript, where the imperfection has been added through the use of a fractal-like subdivision algorithm. The imperfection can be subtle, but it is enough to make the image appear to be human-drawn. Although the images are quite simple I find them quite nice to look at.Unfurl
Notescanvg is a SVG parser and renderer. It takes a URL to a SVG file or the text of an SVG file, parses it in JavaScript, and renders the result on a Canvas element. The rendering speed of the examples is about as fast as native SVG. Unfurl
NotesHere’s another experiment which makes use of a noisy data set defined by fractal subdivision, this time applied to create some interestingly textured gradientsUnfurl
NotesIn less than 200 lines of vanilla JavaScript you will have a flexible particle system with multiple emitters and fields that repel and attract thousands of particles.Unfurl
Notes Two.js is a two-dimensional drawing api geared towards modern web browsers. It is renderer agnostic enabling the same api to draw in multiple contexts: svg, canvas, and webgl. Unfurl
Notes SpriteLib is a collection of static and animated graphic objects (also commonly known as sprites). It was created to provide hobbyist game developers with an assortment of images to use in their creations. Because of SpriteLib, developers don't have to waste precious time or money creating graphics from scratch. Unfurl
NotesThe difference is subtle, but the comparison makes it very clear. There are several major problems with the computer-created icons that leaves them looking blurry and unimpressive. For example, in the transition from 66x40 to 48x30 pixels, the human version drops the border down to exactly 2 pixels but the computer drops it to 2.8 (that's two solid black pixels, plus one half-pixel at 80% intensity), which gives it an incorrect soft edge. The computer has no way of knowing that the border should always be sharp, so it ignorantly tries to maintain the ratio of the originally-specified image at the expense of sharpness. The result is not great.FeedUnfurl
NotesI'm making something that uses Markdown, and there's currently no great universal symbol for identifying Markdown support. So I created one. FeedUnfurl
NotesA small demo of a pleasant, yet simple label placement algorithm for densely packed visualizations. The basic idea is to have labels orbit around their target node at a fixed distance, but repeal each other, so that they don't overlap, and orient themselves to the outside of clusters. To support that, labels on the right of their target node are left-aligned, and labels on the left of their target node are right-aligned; in between, we interpolate. In this example, one force layout governs the node placement, and the second one the label placement, but of course, the node placement could be computed by any other algorithm.FeedUnfurl
Notes I spent a half year writing software art to generate special effects for Tron Legacy, working at Digital Domain with Bradley "GMUNK" Munkowitz, Jake Sargeant, and David "dlew" Lewandowski. This page has taken a long time to be published because I've had to await clearance. A lot of my team's work was done using Adobe software and Cinema 4D. The rest of it got written in C++ using OpenFrameworks and wxWidgets, the way I've always done it with this team ;) Uniquely however, Digital Domain's CG artists were able to port my apps over to Houdini for further evolution and better rendering than OpenGL could ever provide. Special thanks to Andy King for showing me that what seasoned CG artists do at DD is actually not so far off from what's going on in the Processing community. FeedUnfurl
Notes"The defining element is LOW COMPUTATIONAL COMPLEXITY, as expressed in all aspects of the audiovisual system: the complexity of the platform (i.e. the number of transistors or logic gates in the hardware), the complexity of the software (i.e. the length in bits of the program code and static data), as well as the time complexity (i.e. how many state changes the computational tasks require). A more theoretical approach would eliminate the differentiation of software and hardware and talk about description/program length, memory complexity and time complexity."Unfurl
Notes"The best things in life are often silly, and in this case gloriously retro. Blocktronics, a collective of the best textmode artists around the world, have released their second art pack entitled “Codename Chris Wirth” in homage to the legendary ANSI artist RaD Man. No, it’s not 1995, and yes, this kind of art is still being produced in stunning fashion. "Unfurl
Notes"When I was an accessibility architect at IBM, I assisted in the final stages of ensuring that Eclipse’s Graphical Editing Framework was fully accessible to blind people. ... During one particularly difficult teleconference, an Eclipse developer muttered something like, “You realize no one is ever actually going to do any of this, right?” There was an awkward silence as the people who had spent their lives in the trenches of access enablement contemplated the very real possibility that no one would ever benefit from their work."Unfurl
Notes"Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. In case you want to create your own specific chart or image crop-n-rotate widget, you can simply achieve it with this library. "FeedEmbedUnfurl
Notes"I had the pleasure of attending the ANSI Gallery showing this past January, and I also had the chance to purchase one of the items being shown; one of the small handful of ANSI display boxes against the wall"Unfurl
Notes"This article will explore the 8-bit computer industry (from about 1982 to 1990) and in particular the graphics architectures, algorithms and techniques being employed at that time in computer games."Unfurl
Notes"...trying to think of something disturbing to do with my circa 1986 Casio fx-4000P calculator. ... I programmed the calculator to assist me in ray-tracing a sphere by hand."Unfurl
Notes"Here are 113 10x10 greyscale icons in .gif format to fill up your stocking with - the next instalment of my mini icon collection, which has been steadily growing over the last year."Unfurl
About | Skia Canvas
lena | Morten Rieger Hannemose
The Art of Dithering and Retro Shading for the Web - Maxime Heckel's Blog
Ditherpunk — The article I wish I had about monochrome image dithering — surma.dev
grgrdvrt.com/works/contour-lines/
The Fall and Rise of SVG
Parallax-scrolling effect … in ANSI | Break Into Chat
Raytracing
Object/Object Intersection
gif.js
Two.js
On WebGL — Acko.net
Pixel-fitting by Dustin Curtis
The Markdown Mark by Dustin Curtis
blockdiag - simple diagram images generator — blockdiag 1.0 documentation
bl.ocks.org - 1377729 - Force-based label placement
Oryx - LOFI Fantasy 2D/3D [FINAL]
Image evolution
cabel.name: On Wedding Design
Raphaël—JavaScript Library
