{"id":143,"date":"2014-10-25T18:00:23","date_gmt":"2014-10-25T18:00:23","guid":{"rendered":"http:\/\/caostar.com\/thoughts\/?p=143"},"modified":"2025-02-04T01:41:01","modified_gmt":"2025-02-04T01:41:01","slug":"untouchable-chaos-the-closer-weirder","status":"publish","type":"post","link":"https:\/\/caostar.com\/thoughts\/untouchable-chaos-the-closer-weirder\/2014\/10\/","title":{"rendered":"Untouchable Chaos – The closer, the weirder"},"content":{"rendered":"\n

I’ve been nurturing this idea for a while: How can I visually express the feeling that emerges from meditations on the essence of things? Specifically, on the essence of the ultimate freedom symbol\u2014the Chaos Star. That feeling of weirdness, of “untouchability,” makes you realize that, in essence, everything is pure void. Emptiness. And that knowing something is changing something<\/strong>.<\/p>\n\n\n\n

The “Untouchable Chaos – The closer, the weirder<\/a><\/strong>” experiment is a possible answer to that.
(Requires Google Chrome browser)<\/p>\n\n\n\n

For now, it is a web experiment, but the ultimate goal is to create a real-world installation, as shown in the picture below, when the right opportunity arises. (Anyone interested in supporting it?)<\/p>\n\n\n\n

\"untouchableChaosDraft\"<\/a>
The installation project<\/figcaption><\/figure>\n\n\n\n

The “distance measurers” can use the affordable Bare Conductive paints and boards: https:\/\/www.kickstarter.com\/projects\/863853574\/touch-board-interactivity-everywhere
<\/a> These would transmit user distance data to computers. With that data, a computer could provoke visual distortions on the “huge LED TV screen,” as well as manipulate the “colorful LED lights” and, most importantly, activate the low-pass sound filter<\/a> into progressively deeper levels. Powerful low-frequency speakers would play those filtered sounds, creating an intense feeling of weirdness as the user approaches the screen\u2014culminating in a sense of complete awkwardness when the lights reach full brightness. If you use good headphones, you can experience a bit of this in the web version.<\/p>\n\n\n\n

Technology playground:<\/strong><\/p>\n\n\n\n

Beyond expressing certain thoughts, this experiment was a way to explore new web technologies.<\/p>\n\n\n\n

The Chaos Star rendering heavily relies on the amazing PixiJS<\/a> framework. It uses WebGL, enabling those crazy filters with impressive performance. I’ve been developing this experiment since PixiJS version 1.3, and the final version here, 2.0, is incredibly fast. My first approach was to draw the star and use it to mask some bitmaps, but anti-aliasing for WebGL graphics is poorly supported across browsers. After months (literally) of struggling with this, a simple idea emerged: draw the Chaos Star inversely, render its texture to get a smooth and beautiful bitmap, and layer it on top of everything. The visual effect is the same, but it eliminates the need for masking, ensures smooth anti-aliasing, and improves performance. A win all around.<\/p>\n\n\n\n

I also refined my algorithms for drawing Chaos Stars, originally started with the Generator<\/a>. These algorithms now produce less symmetrical shapes and varying arrow sizes.<\/p>\n\n\n\n

The WebAudio API was another area of exploration. This technology introduces exciting new features in browsers, but each browser renders sound differently. For this reason, I chose to make it a “Google Chrome only” experience.<\/p>\n\n\n\n

Another feature I implemented was a socket connection. Right-click to get the QR Code, scan it with your phone, and slide your fingers on your phone’s screen to replace the mouse distance measurement. This was my first experience with NodeJS<\/a> and Socket.io<\/a>. Really cool stuff.<\/p>\n\n\n\n

\"Screenshot
Right click to get the QR Code, scan with your phone and slide your fingers<\/figcaption><\/figure>\n\n\n\n

Leap Motion was one of my initial ideas for simple distance measurement, but it works only for short ranges, making it less suitable for this project. However, its easy JavaScript connectors make it fun to experiment with. If you have a Leap Motion<\/a>, you can distort the star with it (see the GIF below). The Kinect<\/a> was never a serious option because it’s overly complex for this purpose. Additionally, connecting it with JavaScript is cumbersome.<\/p>\n\n\n\n

\"goChaosStar\"
Leap Motion proof of concept<\/figcaption><\/figure>\n\n\n\n

The didgeridoo sound was performed by Jimmie P Rodgers<\/a>, recorded with a Zoom H2 at various mic gain levels. Permission to use it under CC0<\/a> was graciously granted by the artist.<\/p>\n\n\n\n

See it live. Click here.<\/a><\/h2>\n","protected":false},"excerpt":{"rendered":"

I’ve been feeding this idea for a while: How can I visually express that feeling emerging from meditations on the essence of things? Mostly, on the essence of the ultimate freedom symbol, the Chaos Star. That feeling of weirdness, of “untouchability”, making you realise that, in fact, essence is pure void. Emptiness. And that knowing something is changing something.<\/p>\n","protected":false},"author":1,"featured_media":160,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,4,10,2],"tags":[],"class_list":["post-143","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-chaos-star","category-javascript","category-pixijs","category-thoughts"],"_links":{"self":[{"href":"https:\/\/caostar.com\/thoughts\/wp-json\/wp\/v2\/posts\/143","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/caostar.com\/thoughts\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/caostar.com\/thoughts\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/caostar.com\/thoughts\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/caostar.com\/thoughts\/wp-json\/wp\/v2\/comments?post=143"}],"version-history":[{"count":34,"href":"https:\/\/caostar.com\/thoughts\/wp-json\/wp\/v2\/posts\/143\/revisions"}],"predecessor-version":[{"id":807,"href":"https:\/\/caostar.com\/thoughts\/wp-json\/wp\/v2\/posts\/143\/revisions\/807"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/caostar.com\/thoughts\/wp-json\/wp\/v2\/media\/160"}],"wp:attachment":[{"href":"https:\/\/caostar.com\/thoughts\/wp-json\/wp\/v2\/media?parent=143"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/caostar.com\/thoughts\/wp-json\/wp\/v2\/categories?post=143"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/caostar.com\/thoughts\/wp-json\/wp\/v2\/tags?post=143"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}