Archive for the ‘JQuery’ Category

MSSE spring semester count down

Thursday, December 29th, 2016


Thanks to my MSSE colleague for providing the requirements.  Over the holidays, I am working on a spring semester countdown website.  Looks like Typescript ?  Feels like a little less.  ECMAScript 6 class leaves me a bit confused about the missing private variables that work so nicely with getter and setter.  OK, thanks for reminding me that javascript is different from OOP development in C++.  After the initial learning curve on prior ECMAScript, prototype seems to make sense with ‘this’ or ‘that’ for scope referencing.  The new ECMAScript 6 class seems to have lost some of that capability.

Thanks to Mike Bostock’s excellent D3.js calendar view.  I am using it to illustrate our final count down of spring semester.  Click anywhere on the calendar view to select the date for calculation.  The results are in percentage, minutes, hours and days.  Note, the selected date currently does NOT resolve the current hour and minutes.  The source code of the website is available on Github.

…. but who’s counting ?



Sunday, May 26th, 2013

An exercise of the Tesseract.

My employer before Perceptive Software had a logo that ‘could have been’ a Tesseract.

Rotate the Tesseract by mouse-over anywhere other than center.

Source code available here on GitHub.

Screen Shot 2013-06-23 at 8.15.02 PM



Random Dot Stereogram

Sunday, January 6th, 2013

It has been a few years since I was fascinated over random dot sterograms; 3D without glasses or special technology, just have to cross your eyes.. and a headache afterward. :)

Thanks to GPU Gems-chapter 41, here is some javascript to produce the RDS pair of a box (source code on GitHub).

Animating Text

Monday, November 26th, 2012

Exercising basic html-javascript text with animation.  Using cubic spline to draw top and bottom curves for text to travel in.  Mouse-click into div to insert curve anchor points.  Source code is available on GitHub.

Loading local OBJ file, javascript

Friday, August 10th, 2012

Last year I implemented four decoders (wireframe-basic) for formats: STL, PLY, OFF and OBJ.  The decoders were based on Devon Govett’s bmp decoder.  The bmp decoder loaded binary data via AJAX and type cast as uint8Array.

Screen Shot 2012-08-22 at 8.09.29 AM

Unfortunately, IE9 and prior versions didn’t support uint8Array type (IE10 does, horay) !  So, for the ASCII only CAD formats (OBJ, OFF), I re-wrote their decoders to keep the returned data in ASCII.

Screen Shot 2012-08-22 at 8.12.29 AMI extracted the AJAX into its own common Loader class for re-usability across multiple decoders.  In addition, thanks to Eric Bidelman’s article on local file access, I am adding local file load capability to the Loader class in my OBJ decoder.

Screen Shot 2012-08-22 at 8.22.02 AM

A byproduct of handling ASCII data is the possibility of line parsing with Regular Expression as I have learned from Three.js’ very own Mr. Doob.  This is somewhat put into practice in my work-in-progress Three.js-OFF-decoder.

Source code is available on Github – OBJDecoder, Github – OFFDecoder.

Backbone.js + Thinning exercise

Monday, August 6th, 2012

Backbone.js is a very popular framework and thanks to Todd Gardner’s excellent presentation at JavascriptMN.  To make this exercise relevant in graphics programming, I am implementing a raster thinning algorithm from my college text, Digital Image Processing, 2nd edition by Gonzalez.  An earlier implementation in Adobe Flex and pixelbender is available here.  Thanks to the good examples on the web like ‘Todos’ for illustrating the model to view data binding.

Sorry there is a bug with one pixel off !  Need to fix it next!

GitHub source code available.

Click on the image to play with the demo.

OOJ, MVC, jQuery, HTML5 – Tone Reproduction Exercise

Friday, August 3rd, 2012

Thank you mystical being(s) of the universe for enriching my life with extra-ordinary programming projects and exercises.  I am grateful for the opportunity to recently build an iPad-game-web-application using OOJ, jQuery and CSS.  It got a bit sloppy at the end so I am revisiting those important techniques and MVC framework in this post.

This is a partial rewrite of the Flex Tone-Reproduction demo (minus the curve adjustment features).  The image processing algorithm, concept and technique maybe referred back from classes at Rochester Institute of Technology.  Thanks to the classes: Material & Process, and Digital Image Processing I for concepts on tone-reproduction, histogram equalization and gamma.

Check-out the source code from GoogleSVN here.

Screen Shot 2012-08-03 at 10.02.03 AM

Responsive carousel

Saturday, June 2nd, 2012

For common use, this is an exercise in carousel for mobile website.  Carousel rotates to allow 3 for portrait or 2 for landscape view.responsive carousel

Hello jQuery Mobile

Monday, April 16th, 2012

Second day at Twin Cities code camp and I am indulged in mobile and javascript lessons.  First lesson begins with Mike Hodnick on Extensible, Durable Javascript with inheritance.  Following, Brad Broulik talks about jQuery Mobile and suggest a number of excellent tools like jQuery Theme Roller, Codiqa rapid prototyping and Adobe Shadow for mobile device testing.  I will be certain to pick up a copy of his text, Pro jQuery Mobile.

Here is my jQuery mobile exercise using above mentioned theme-roller, codiqua and PHP for service.  Also, working on this other one for local restaurant, Red Pepper.

Screen Shot 2012-04-16 at 10.22.23 AM

HTML5 localStorage

Saturday, April 14th, 2012

I was attending Twin Cities Code Camp today.  The first session,  Targeting Mobile Devices with HTML5 & CSS5 by Robert Boedigheimer was full of excellent HTML5 tips and suggestions.  For the first exercise, here is my exercise on localStorage, online and mobile device type detection.

Source code on googleSVN.

Screen Shot 2012-04-14 at 9.43.07 PM