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.
I roughed out the design using Inkscape. (Because unlike Photoshop or Gimp, you can easily move and resize shapes around after creating them).
fillColor. The color scheme is based on this palette with tweaks here and there.
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).
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.
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.
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.
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.
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!
The UI was fun to work on. Okay, maybe not all the time. But the end product was rewarding.
As seen in the book,
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
c as the argument, returning all the users whose names contain the letter c.
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!
Today I learned that you can abstract away frequently used code.
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.
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…
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.
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: