Musings of a Fondue

First Android App

Original Date: October 13, 2013

image

My first android app. Incredibly simple but I cannot wipe the grin off my face!

It’s based completely on this tutorial by Maro Klein.

He makes it incredibly easy to get started programming for Android. Check it out if you need that first icebreaker to get you going!

Learning Ruby on Rails

Original Date: October 1, 2013

I finished Michael Hartl’s intro series to Ruby on Rails.

In the process, I learned a lot about the web in general and website design.

I also learned a lot (and I mean a lot) about patience! Turns out attempting to do a tutorial written in 2010 in 2013 is hard given the blinding rate at which Ruby and its gems are updated.

I also learned about command line use, Github, Heroku, Git, Ruby, and lots of other stuff. The series is quite comprehensive!

The end result is the following website:

Subtitles Using JavaScript - Part 3

Original Date: September 7, 2013

Using Excel to convert subtitle files into arrays is too laborious to be practical.

I came across regex while working through Michael Hartl’s Ruby on Rails tutorial. He covers regex in Lesson 6 when talking about password validations.

With generous use of Stack Overflow and Rubular, I managed to put a ruby script together. It takes a subtitle file as an input, and returns a JavaScript array as an output.

Overall using the script requires much less effort than Excel. Only two manual steps of search and replace are needed to finish up the array.

Here it is in action,

Subtitles Using JavaScript - Part 2

Original Date: August 13, 2013

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,

image

Subtitles Using JavaScript - Part 1

Original Date: August 13, 2013

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.

HTML5 Game

Original Date: August 5, 2013

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.

image

Voxels as a Makeshift 3D Editor

Original Date: August 2, 2013

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

image

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

Augmented Reality

Original Date: August 2, 2013

I came across James Alliban’s work on Augmented Reality,

Here’s his full article including the demo in the video. And while you are there, his projects are amazing!

After watching several of his videos I was inspired to try it out. I found these two awesome tutorials on getting started,

Canvas Cycle - Part 2

Original Date: July 26, 2013

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.

Canvas Cycle - Part 1

Original Date: July 26, 2013

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,