It’s been a while since I’ve last made a post. A few things have happened since. One of the big ones is that I got the opportunity to attend the Recurse Center at the beginning of this year. I plan on writing a separate post on my experience.

Today, I wanted to talk about one of the things I’ve continued to be a part of since my batch ended. During my batch, I somehow found myself a part of the quantum computing study group started by Ryan Prior. In the study group, we have been working through the Quantum Country essays by Andy Matuschak and Michael Nielsen. The essays are intended to be a gentle introduction to the field.

I joined the group with zero knowledge of how quantum computers worked, so it has been quite a surprise to learn how much of a central role math plays! As we work through the essays, some of our goals are to document our findings (through an Observable notebook), create interactive visualizations that help with building intuition on the concepts presented, and to have a working quantum computer simulator at the end.

I hope to run some of the games for the PICO-8 fantasy console on my Homebrew Computer. For example,

• Rambo - Prison Break
• Pico Fox (implements a 3D engine)
• Cave Runners
• The Stroll
• Pico Racer
• I_EDITOR

The developers have spent a lot of time writing the code, designing the graphics and gameplay, and creating the music to make the games beautiful and fun. While they are not as CPU/GPU intensive as your typical AAA titles, it would be quite an achievement if my computer can run them at a decent frame rate!

After months of waiting the new LCD assembly finally arrived!

I noticed the PCB had a different layout than the one I had earlier. Gone was the onboard voltage regulator. Yay cost cutting! Also missing was the ZIF connector. In this one, the LCD flex cable was soldered directly onto the PCB, yay more cost cutting! Given the trouble I had earlier trying to resolder the four chunky traces of the touch screen cable, prospects looked dim for resoldering the many small traces of the LCD screen cable. Drilling mounting holes onto the PCB no longer looked like an option.

Before doing anything, I checked whether the LCD works. I connected it to an Arduino and loaded Adafruit’s graphics test. It sort of worked. But not quite. The screen flickered and what rendered looked glitchy. See the video* below for what I mean. Contrast this with what the test is supposed to look like.

Much like Charles’s hardware setup (see a pattern here?), I decided to use part of the touch screen as the keyboard for the computer.

Design

I roughed out the design using Inkscape. (Because unlike Photoshop or Gimp, you can easily move and resize shapes around after creating them).

I then recreated the design using JavaScript. I used Khan Academy’s coding environment* to do this because its live update feature made iteration and tweaking a breeze. Converting the Inkscape design to code using the Arduino IDE would have been a tedious process as I would have had to upload the sketch each time I wanted to see the effect of a change made.

In the JavaScript code, I used only basic functions that are supported by the Adafruit Graphics Library such as drawRect, drawText, and fillColor. The color scheme is based on this palette with tweaks here and there.

Below is the Javascript mockup. Try typing. Clicking the up arrow toggles the keyboard’s style.

I followed this tutorial by Jerome Etienne on generating a procedural city using Three.js.

The tutorial was a way to learn more about Three.js. Most of my time was spent figuring out how to update methods used in the tutorial (r59) that are deprecated in newer versions of Three.js (I was using r73).

See it action here

I wanted to recreate this music video in Three.js. The effects in the video are straightforward, yet mesmerizing. And the simple shapes used seemed like something I could duplicate.

Check out the end result!
Speakers / headphones are a must!

Disclaimer
On my computer, the demo works and is in-synch with the original music video. However, there seems to be variance depending on the machine it’s run on. Also, it has only been tested for Chrome (desktop) and Firefox (desktop). So I hope it works when you view it…

A tweak to my previous approach.

This time the relative to absolute conversion is done within the JavaScript code itself. This results in less manual work and a more scalable approach.

It’s not quite a raw SVG to JavaScript conversion, but I’m pretty happy with it.

Here it is in action,

I was inspired by the first person to port the SVG Doge to Khan Academy (the link might be to a clone and not the original). I deduced from the highly detailed image that it must have initially been an SVG file because it’s essentially impossible to create it using just the Khan Academy environment. Creating such a detailed image necessitates the use of vector editing software like Illustrator and Inkscape. Also, the decimal precise coordinates were a giveaway that it was imported from somewhere.

I Googled around for a copy of the Doge SVG file, and came across this one shared on Reddit.

After messing around for a bit, I was able to port a portion of it to Khan Academy.

I created this tool to help with drawing using bezier curves. You can draw freehand or upload* an image you wish to trace.

It outputs the relevant coordinates (sX,sY,c1X,c1Y,c2X,c2Y,eX,eY) for each curve used to create the drawing. The coordinates can then be used with any number of programs.

* Uploaded images are not stored. Ain’t nobody got money to pay for that!

Came across this site and was blown away by its design!

After spending an inordinate amount of time browsing through it, I decided to see if I could duplicate one of the pages.

Here is the result

I was working through question 10 on Project Euler which requires you to find the sum of all primes below two million. I had written some code to find primes in previous questions, but it was far too slow to accomplish this. I hit Google to find efficient algorithms for prime number generation and came across the Sieve of Eratosthenes and the Sieve of Sundaram.

The article on the Sieve of Eratosthenes had a great gif by Sebastian Koppehel which showed visually how the sieve works. It was very clear and quickly gave you the gist of what was happening.

I thought it would be nice to have something similar for the Sieve of Sundaram so after I worked out how Sundaram’s sieve ticks, I made a similar gif for it.

I used JavaScript, HTML, and CSS to make it. See it in action here

If you want to see the code, right click and select view-source. It was cool to contribute something to a site I rely on so much!

In chapter 12 of his book Pro JavaScript Techniques, John Resig walks through how to create an autocomplete search using AJAX.

Here’s my go at it¹

User Interface

The UI was fun to work on. Okay, maybe not all the time. But the end product was rewarding.

As seen in the book,

My take on it,

Server code

The autocomplete search relies on a file called auto.cgi being called and executed as the user types. For example when the user types “c”, a request is sent to the server for auto.cgi?to=c. The server executes auto.cgi with c as the argument, returning all the users whose names contain the letter c.

A simple image gallery based on chapters 7 and 9 of John Resig’s book Pro JavaScript Techniques.

Check it out here

The book is great if you want to dip a toe into writing better JavaScript.

My brother asked me if I could make a tic tac toe game for the command line.

It wasn’t long before I got bored with the its limitations and moved on to the glorious world of sound, color, animation, and mouse/touch interaction that is HTML5!

And this,

Became this,

Play the game here
Make sure your sound is on!

Today I learned that you can abstract away frequently used code.

While working through John Resig’s book Pro JavaScript Techniques, I noticed he uses simple helper functions to keep the code neat and non-repetitive.

Having succeeded with the <video> tag, I wanted to try implementing subtitles for flash videos - the format which most video content on the web is distributed in.

However I quickly learned that each flash player has its own unique way (via APIs) of getting information about a video’s current time. This meant that for now at least, my implementation would not be universal.

So, I tested the waters with YouTube’s JavaScript API.

I used this snippet by Rob W. as starter code for interaction with the API. And after a lot of reading, and trial and error I got this,

There was a movie I desperately wanted to watch but I couldn’t find a version with subtitles uploaded ANYWHERE online. (The movie was in a language I didn’t know).

This had been a recurring situation. The full movie is there in all its epicness, but no subs!! However, the subtitles were often easily findable via Google.

I tried watching the movie while reading the subtitles on another window…but no dice! I kept falling behind or ahead of the actual dialogue and juggling took away from the movie…

One day when browsing Flowplayer’s features (a popular video player for the web), I noticed the nature of the subtitle files they use, and decided to try and write some JavaScript code that could sync subtitles with a video.

I wanted to get better with JavaScript and Canvas so I did another game tutorial series.

This time, it was Gyrostorm’s YouTube series, ‘HTML5 Game Development Tutorial.’

The series is quite good! Check it out if you’re starting out!

Here is my end result, sort-of. Press ‘B’ to fire, WASD or ULDR to move, and Spacebar for a special *cough something.

While following this tutorial from Lee Brimelow, I noticed that he made the shapes using cubes.

Which reminded me of the Voxels program by Mr.doob I had stumbled upon earlier. I figured, hey I could use this!

Drawing an image using pixel data

The more I looked at the color and pixel data in the image.php file, the more convinced I became that I could write something that could draw the image. The pixels array in the file was in a grid-like format exactly 640 elements across and 480 down (corresponding to the image dimensions of 640 x 480). I played around with canvas to see what I could do.

I came across this experiment by Joseph Huckaby,

It’s mesmerizing! So much so, that I wanted to save it. (So that I could keep it forever! *creepy voice*)

But when I did, I found that it wasn’t working,

This is my first attempt to create something in 3D. I followed the ‘Build your own HTML5 3D Engine’ tutorial by Mikko Haapoja.

Here are the results:

▱ Modified to use circles