e-laboratory

I like to make digital things.

chat
echoplexus running as Firefox App on ubuntu
chat
echoplexus used to be a lot darker! It got a revamp in 2014 for greater appeal.

echoplexus

2 Feb, 2013

The Goods

What is it?

Echoplexus is an anonymous, web-based, IRC-like chatting platform that makes its best effort to respect your privacy. It allows you to create public or private channels. You can encrypt your chats. You can secure a pseudonym for linkable anonymity. You can code and draw together in real time. You can make free and secure Peer2Peer video and voice calls with the people in your channel using WebRTC.

For a full overview of all the features, please visit echoplex.us.

Interested?

I'd love it if you collaborated with us on github!

Generally: the subtler the pattern, the better the result

WebGL Background Bump Mapping

12 May, 2012

The Goods

What is it?

Background textures have always been fairly flat and static things. I set out to increase their (apparent) depth.

It's not entirely practical, and in retrospect I'm not sure why I created it, but here it is! I think it's kind of neat and kind of pretty.

This project features WebGL, bump mapping, and the Phong reflection model to 'enhance' a website's background. I don't particularly recommend anyone to use it in any kind of production site at this time (like most of WebGL).

WebGL Strategy RPG Engine

5 Dec, 2011

The Goods

Executive Summary

Created for CS488 (Introduction to Computer Graphics) during Fall 2011 at the University of Waterloo as a final project. This marks the second time that I've taken this course. Against all odds, I somehow managed to miss the exam during my first course attempt, and was assigned a Fail outright. I'm pleased to announce that I have since passed this wonderfully fun course!

The focus was on procedural generation, completely framework free code. It was primarily an exploration in real-time interactive graphics, utilizing only shaders and modern graphics techniques.

I did not meet all of the objectives I set for myself, but I was able to explore: texture mapping, texture atlasing, bump mapping, procedural terrain, water reflections, animations using Catmull-Rom splines, Phong shading/lighting model, WebGL, OpenGL ES 2.0, AI pathfinding, Perlin noise, and context-free trees.

When I get the time, I'd like to explore more of the objectives I wasn't able to achieve, probably separate from this project. I've put in a bit of work to polish certain aspects (namely, the character animation and interleaving the terrain data), but haven't had time to commit the changes yet.

Multi-function scene
Mapped onto a spinning cube
Perlin's standard turbulence
Oscillator
Toon shaded / ghetto heat map
Version 1

Animating Functions of Improved 3D Perlin noise

27 Oct, 2011 – a sleepless night

Demos

Overview

In this experiment, I made a quick port of Ken Perlin's classical noise in 3 dimensions. Due to its continuity properties, we can take a 2D cross-section and step through the 3rd dimension in time. The end result is a continuous animation.

Technical Overview

After reading some of Perlin's work, namely some of his early SIGGRAPH slides, I became intrigued with the potential this has for both 3D texturing and the animation of 2D textures. Many of these 2D textures, when animated, can produce some very compelling effects. In this early demo page I show one example of something that looks like the activity of the planet Jupiter.

I employ fragment shaders to calculate per-pixel Perlin noise. Geometry is minimal, consisting of only 2 triangles that are un-transformed. Texture co-ordinates are generated and used in some animations, but for others only Fragment.xy is used. In all cases, time is used as an index to the Z plane of the 3D noise.

Benchmarks & Comparisons

All I can say is: Wow. WebGL (or more accurately, GLSL) fragment shaders are a huge step up in terms of performance when we compare to my old CPU implementation.

In the old implementation, on a 1GHz machine:

  • Firefox 7 would fail to achieve >30FPS on a 128x128 square.
  • Chrome 15 seemed to achieve >30FPS, or if not, the visual stutter wasn't too noticeable.

In the WebGL shader implementation, on a 1GHz machine:

  • Firefox 7 easily seems to acheive >30FPS on a 1680x945 rectangle.
  • As it did for the old implementation, Chrome 15 seems to outshine Firefox again.
  • Furthermore, both browsers can render arbitrary transforms (the texture mapped cube) of the noise, which is something that I would have considered impossible for real-time in the old implementation.

How do we account for the speed improvements? I would estimate that 99% of it is due to the change from CPU to GPU shaders; programming a highly parallelizable task on the GPU will naturally outperform its corresponding CPU-only implementation. Moreover, the computation of Perlin noise is relatively simple, which makes it a good fit for approximation on the GPU. I hypothesize that less JavaScript being employed might account for some of the speed improvement.

Musings

It was very tempting to use the "multi-function" noise as the background "image" for the Lab page. However, after trying it out (and it looks beautiful) I deduced that I couldn't do this in complete faith, since WebGL is still somewhat sketchy; I experienced >4 Nvidia driver crashes, leading to complete browser failure. Interestingly, it also crashed my Photoshop (and so assumably any other program using your GPU extensively). It was either gamble with the value of my visitors' work or use a screenshot, and I think I made the better final choice.

So, where does this leave us? I now have a useful tool that will allow me to explore various noise patterns from within the browser; no need to attempt compiling an application that will then compile the shaders. No need for a ton of external dependencies; just download the page, edit the shaders at the top of the source, and run! This should hopefully allow me to explore new types of noise with ease.

Additionally, WebGL would seem to be a fairly good reduced-power environment. That is to say, we can expect the shaders to perform faster if they were used in a native C++ program, for example.

Finally, those who want to learn more about shaders or procedural art might find looking at my code to be of some use. I've set up the sample pages in such a way that they should resize to fill your browser window completely. As such, if you go to full-screen mode (F11 key in most browsers), you can take a screenshot or save a perfect-fit wallpaper quite easily!

Resources

A ray-tracer with a focus on various material properties

26 Jul, 2011

The Goods

Executive Summary

Created for CS488 (Introduction to Computer Graphics) during Summer 2011 at the University of Waterloo as a final project. Math in action.

Render time: Approximately 2 minutes each.

Portolio

Some things I worked on while freelancing.

Front-end Work

I specialize in front-end development, and I believe I can make any design a reality. I'm not a designer by trade, but I like to dabble and design via CSS.

For many of these projects, I was the sole developer. For a few, I worked with my good friend and colleague Kaizhi Wei

Generally, the main focus was PSD2HTML. Some were flat sites, others were driven by WordPress. I used HAML and SASS were used for rapid prototyping, and image spritesheets whenever applicable.

Many sites had needed custom widgets. I've coded dozens of custom slideshows in my time, interactive maps, and several full-spread responsive image-based landing pages.

I'm experienced with integration of external services – yelp, Facebook, iHomeFinder, and other 3rd party weather services.

These days, I've fleshed out more in terms of back-end development. I'd still consider myself primarily a front-end developer, as I'd say that's where the majority of my talents lie. There's just something so satisfying about seeing things come to life in front of your eyes!

Philosophy

Musings, really.

I don't want to hear, "philosophy is useless".

I favour determinism, and that given the initial state and a set of rules, we could compute the entire state history of the universe. This is impossible from within the universe we wish to simulate. That is to say, I believe the universe can be described by a relatively compressed closed form system, whilst our everday happenings are just emergent phenomena of the decompression and computation of the system. I believe this entails there is no such thing as free will, and this brings me peace.

My ultimate academic goal is to understand myself and my environment. This will be a never ending quest that I very much look forward to. My applied goal is to create a computational intelligence. By this, I think I mean hard Artificial Intelligence. I want to create a machine that actually thinks, rather than gives the appearance of thinking. I think that the term "AI" in popular vernacular doesn't describe this concept well at all.

Ultimately, my ultimate academic goal is very likely impossible within my lifetime, barring future events drastically increasing my life expectancy. I love the idea of a technological singularity, but fear that it's perhaps an egotistical creation of Humankind. In a way, I look at it as the greatest romance we can bestow upon ourselves. I want to live in a world where I don't feel like I'm constantly struggling in my interactions with computers.

I'd describe my moral outlook as, "If it isn't hurting anybody, let them do it". I'm a bit of a moral utilitarian in the sense that I'm all for breaking laws if we can accelerate technological progress.

Data

Data munging is perhaps the biggest waste of time in our field. If we cannot accomplish real computational intelligence, it would at least be nice to have "knowledge engines" come into being. By these, I mean systems that can store facts, types, and relations and make basic inferences and convey the probability of correctness of those inferences. I'd love to work on an ontology based system.

I'm highly interested in compression and procedurally generated content. I feel like the two go hand-in-hand in a lot of respects. To me, there's something very elegant about being able to compress some information into it's minimum representation. We could store the contents of a signal in its "entirety" discretely (barring resolution issues), but I find it much more amazing to describe it succinctly with mathematics.

For example, we could list all the points of a line or curve on a certain interval (requiring storage proportional to the size of the interval), or we can use a closed form expression (requiring constant storage independent of the size of interval) to save space at the cost of future computational resources to decompress it. This ties in with procedurally generated content, with which I'm sure the universe is such a system. In this sense, I feel like there's a vague time<->space tradeoff that can be made: a certain feeling of "equivalent exchange" with regards to computation.

Distributed Systems

I enjoy distributed systems and feel that they are the future of personal computing. I believe information of all kinds should be free (which is oddly at ends with my ideals of privacy), and the added redundancy of information that a global distributed system would add would ensure no government could ever completely censor its citizens. Ideally, web sites should not be stored by just one person but by all the users who visit them.

Security and Privacy

Security is a huge focus of mine, and I try hard to ensure that the users of my software aren't entering into any malicious clauses nor are they compromising themselves under false pretenses of security.

How can data freedom coexist with privacy? If we could eliminate greed as a motivator, and ensure peaceful acceptance of others, we wouldn't really have any need for privacy. One would be able to air all kinds of embarassing and terrible moments and emotions if there were no fear of judgment or negative repercussions. I don't think we can accomplish that.

I feel anonymity will be necessary to further the evolution of our species. I don't think that we should consider only people as beings that holds rights, but instead extend these rights to information themselves. Ideas can certainly seem to come alive, replicate themselves, and infect the minds of others. I think that biological definitions of "life" and "alive" are missing the mark.