Home / 2014 / September

Substrate Cube

I still amazed by Jared Tarbell’s work every time I go back to his site even if it’s created already 10 years ago.  I’ve try to recreate his substrate years ago in flash and it was so much fun to build it.

Last week I went back to his substrate again and wanted to recreate it in javascript. I haven’t done any generative coding for a while, it feels so good when I pick it up. I really like the feeling that you set up some rules and just let the code run. Every time you get an unexpected result and amazed by them. For this substrate experiment, the rules are simple :

1. Start a line and moving forward.
2. When hit the edge of the canvas or another line, stop.
3. If this line is longer than minimum length required, generate 2 more lines from this line.

It’s just this simple and it creates such an amazing result, of course there are few bits to make it looks better but this is the basic idea. So here is the javascript version I created :

substrate_0014_Screen Shot 2014-09-13 at 16.16.39


Few things about this experiment : First thing is the size of the canvas, I doubled the size of the canvas and resize back to normal. In this way you can get a lot details and feel less pixelate, especially those shadows. The second thing is I draw by directly modifying the image data of the canvas. The process of it is to get the position of the pixel that you want to modify in the big array of the image data. Change it and call context.putImageData. A tip for the performance is that doing putImageData for every time you change a pixel is super heavy. In every frame I need to update a lot of pixels, so the better way to do it is not to call putImageData until you’ve updated all the pixels you want to change, then just call it once every frame.


Put it on a cube

After I done this i get an idea to put it on a cube. I image it will be quite interesting to watch the line march over the edge from one side to another. So I started to create the texture like this :


It looks simple but actually quite a challenge to find out when the line hit the edge where it needs to appear again and what’s it’s new direction on the texture. I’m really glad I sort it all out eventually. Here is the result :

substrate_0004_Screen Shot 2014-09-15 at 11.06.10


I’ve also put some screenshots here.



I had so much fun building this. And it reminds me the talk of Mario Klingemann ( Quasimondo ) ‘s talk on the RTBC this year. I really like one thing he said : when you create something, most of the time you will find somebody already done it before, and sometimes it’s really really long time ago. But it doesn’t matter , the important thing is the process, you will always have new inspirations from building it or solving the problem. And for me that’s where the new idea begins. I feel so sad when I work with people trying to find new ideas and when there’s an idea being brought to the table someone just said : “It has been done before.” I’m not a thinker, it’s hard for me to just “think” something new. I need to build something and start from there, and after trying add new stuff to it or improve it for number times then I might be able to find a new idea. This is how it works for me, if you just ask me to think a new concept I will never able to  find it by just thinking.

That’s why I like to go back to these sites, they are old indeed. But they are timeless to me and are amazing. Almost every time it gives me some new ideas. So if you haven’t try it, I encourage you to do it on your own. You will find a lot of fun during the process, and you will enjoy every unexpected result it brings to you.

DIY Steampunk Keyboard

It is such a stupid idea but in the same time it is so much fun to build it.

Few month ago I saw this ( Qwerkywriter ) on the internet, it caught my eyes right away, it looks amazing and beautiful. However there’s one problem with it : It’s too expensive. Don’t get me wrong, I believe the quality of the final product will be amazing, and I believe he spend a lot of time and effort to build this and it looks great. But for me it’s just hard to spend 300 dollars on a keyboard. So I looked around and found actually there’s a lot of people doing their own customize vintage or steampunk style keyboard. At the end I found this one, it looks great and seems to be possible for me to build a similar one. So I decided to build one on my own.


Getting the parts

The first thing to do is to get the parts. I choose to buy a mechanical keyboard because it has a better type feeling and also the sound of hitting the key is closer to vintage typewriters. This is not too hard to find. And then it comes the challenge : the keys. It took me some time to finally settle with the metal buttons. I was searching for typewriter keys which already comes with the letters but they are quite expensive too, and also for a modern keyboard you have about 105 keys in total, for the vintage typewriter you only get 35-50 keys i think. Which means you need to buy 2 or 3 full sets of them and also need some customize jobs too. Therefore I switch to search for metal buttons, which you can find a lot on amazon or ebay. There are couple things you need to be careful : the first one is the size of the button, you don’t want it to be small but you don’t want it to be too big either, from my point of view i think between 14 ~ 16mm is the best. The second thing is that you want it to be flat, some buttons comes with a small ring in the back. I don’t have proper tool to remove it and bear in mind we are looking at over 100 keys. To remove it for everyone of them is going to be a huge amount of work. At the end I found these :


These buttons are perfect to me, they do have that small thing on the back but it’s really flat so it doesn’t matter. And I really like edge in the front, make it look like one of those vintage typewriter keys.


Building it

So finally we get all the things we need and can start building it. What I did is really simple : I remove the key from the keyboard, then cut the 4 sides of it and leave only the top. And then just use super glue to glue these buttons on to the key. There are things you can do to improve this such as minimum the surface the key and also make it thinner as well. As for me this is already good enough.


But these are only the small keys. For the bigger keys such as space bar, shift, backspace and enter, I don’t want to put just a button on it. It will looks empty and hard to type. So I decide just to remove the 4 sides and leave it like that, which looks quite ok to me to be honest. However there some extra work needs to be done for these big keys : I need to polish the edges. Because when I cut them it leaves a very ugly and uneven edge, I want to polish it and make it smoother.

Again I don’t have the right tool to do it, but I don’t want to spend some money on a tool that I won’t be using that often. So I asked myself : why not just build it myself, and I can have some fun with my LegoNxt ! And here it is, my DIY lego nxt polisher 😀


The button on the left is for turning on and off, the ultrasonic sensor is for detecting the distance from my hand to the wheels. The original idea is that the wheel will start itself automatically when my hands is close to the machine, and stop itself when I move away. It does work however I get some noise from the ultrasonic sensor ( return a lot of zeros ) and also I find actually easier just let it run. So at the end I just disable it but it’s still very fun to play with these sensors. It’s a simple thing which I spent about 2 hours to build it and make it work, but it’s perfect for polish my keys. Here is a short video of how it works  :


So that’s it, that’s my DIY steampunk keyboard, I’ve never feel so nerdy in my life 😀 There are still things can be done to make it better. But I kind of enjoy the look of it now so i’ll just leave it like this for now. To be honest it’s not very difficult to make one, I spend the most time on cutting the keys, but if you have proper tools it could save you a lot of time. Also I really enjoy building this mini robot. I’ve always been working with codes and haven’t explored hardwares that much. My next goal will be learning Arduino and build some awesome robot !



Chinese calligraphy in 3D and Reasons to be creative

I’ve been playing with Chinese brushes for a while now, besides the ink drops i created and use it to create mountains, I’ve created these strokes too. 03_strokeMy favorite part of these strokes is the gradient, I created them actually by accident. I find some amazing work of 張大千 and there is a lot of beautiful gradient in his work. I was wondering how to do it but it turns out not as complicated as I thought, of course there’s a lot of trials and errors, I throw out a lot fail tests before i get this. The trick is simple : put only color ink on your brush, when you are about to draw, just dip some black ink on the tip of your brush and there you go, really easy and you get a very nice gradient. I had a lot of fun trying with different portion of color ink, black ink and water, at the end it’s very hard for me to stop and to pick the one I’m going to use in my code, because each one of them is unique and have its own character. I think this is one of the reason why I like to create these ink textures so much. It’s a similar process as doing generative art : you have few controls, and you just let it run and enjoy the result, and then you go back to tweak these controls again and try to discover new controls or new settings. I’ve done this a lot in the code but it’s the first time for me to do it outside computer, really enjoy it.


Bringing it to code

After I created these strokes, actually I don’t really know what am I going to do with it, they look amazing but I don’t have any ideas how I can use it. Until one day I was building some prototypes for a project and doing some explorations, and one of the idea is to create ribbons, then suddenly this idea strike me : how about put the textures on the ribbon, and that’s how this started. The moment I put it on the ribbons, it feels totally fit with it. And really gives the feeling of the real brushes. I show it to my colleagues and they all love it. So I start to make some decorations for it : adding a texture background, some ink drops and lastly : a video layer to overlay on the textures, it makes the texture moves constantly, it just a small touch but make it feel different.


A online demo could be found here.


Drawing a smooth ribbon in 3D space

One problem I had while building these ribbons is that it sometime twisted in 3D space.  Calligraphy_05

The one on the left is twisted, you can see the normal (  the purple lines ) are flipped to the other side. Luckily there is a solutions for this called Parallel Transport Frames , I was building this in cinder and it’s already part of the framework so it’s very straight forward to use. You can check the Tubular sample of cinder. Using this could generate a smooth ribbon ( the image on the right), you can see the normal is now all in the same side.


Another theme, another world

Two years ago when I went back to Taiwan and visited the national museum. I found something really fascinating that haunt my mind for years. Which is this old book, these golden characters are just so beautiful to me and also the dark blue background. And since after I’ve been always want to find a place to try out these colours.


After I build the prototype this idea come to my mind again, therefore I put the golden colour on the strokes and put a dark blue background to give it a test. Surprisingly it works ! I did try to keep the gradient of the stroke but turning them into grey scales then overlay this golden colour on top of it. Also the video layer helps a lot as well.


And it looks a little bit flat so I add some random shadows around it. I put this on my backyard with projector for my kids and they love it :

I actually did couple more prototypes based on this however they are build in C++ with cinder. I’ve put my source code on the github which you can find it here. It includes 2 versions in cinder, one is with leap motion, the other one is for the projection table i made, with kinect. And a version in web which is build with WebGL. I didn’t have too much time to go into details of these codes so if you have any questions please send me an email. And also the video texture that i use is too big to upload, so you might need to find one yourself or remove it from code.


Reasons to be creative

One of my resolutions this year is to give a speech on stage, so when I saw that Reasons to be creative is looking for elevator pitchers I didn’t hesitate too much then send them my proposal. I was thinking about to give a talk about my DevArt project with my friend together. But John (Davey) of RTBC replied it’s impossible to do that, the elevator pitch need to be solo, but he is very kind and said that he like both of our works and offer us one pitch each.  Therefore we decide that my friend Bertrand will still be presenting our Kuafu project, and I will be talking about these ink experiments i made ( strokes and ink drops )

It’s first time for me to step on the stage, I was scared to death. I am really glad that i didn’t do this alone, myself and bert we practiced a lot in our hotel room and time ourselves so we had a good sense of our timing. Also the crew from RTBC ( Chris and Andy ) helped a lot as well, they let us know all the details we need to take care of and always cheering for us. We rehearsed couple of times and at the end it all went well on the stage. It is such a great experience that I won’t ever forget. I encourage you to do the same if you haven’t done it before, it’s scary but also it’s a lot of fun ! Also I am really glad to meet all the other elevator pitchers as well, they are all very talented and amazing.


I was at RTBC last year but i was working for the first day and get called back the last day. So this year is the first time for me doing the whole event. I’ve never been to other events like this and this is totally mind blowing. I enjoy almost every talk I went. Pretty much every talk implied one thing : work on your stuff, don’t wait things to happen. You might get a chance to use one of your old stuff someday. I think this is the biggest thing i get from these 3 days, keep doing the stuff you like and enjoy the process. I really feel full of energy and motivations to work on my stuff after this event. Now I’m just trying to find a way to keep the motivations not to be destroyed by the daily life.



I really glad I made this 3 minutes talk, and I really enjoy these 3 days. I’ve been working by myself for a long time and it’s really great to see that there are some people like my work. That gives me a lot of motivations to keep going. I hope i’ll get other chances to give speeches in the future, i’ll keep working my way to it. But the most important of all is to enjoy and have fun. That i’ll keep in my mind and create more stuff.