Archive for the ‘ES6’ Category

Exercise: ReactJS + ES6 + SVG + cubic spline interpolation

Saturday, November 25th, 2017

This is an upgrade of a previous cubic spline code-kata.  It is now written in ES6 class that is wrapped in ReactJS components to render SVG elements.  The previous version renders as pixels on a canvas. The original source is from Numeric Recipes in C.

For this demo, click anywhere on the SVG to append knot points to the curve.
Screen Shot 2017-11-26 at 5.16.37 PM

This project source is available on Github build with Visual Studio Code and npm.

Viewing auto-stereo images on VR headset

Saturday, July 29th, 2017

Recently upgraded my google cardboard experience with a Utopia360 Virtual Reality 3D headset for $20 bucks from Microcenter.  Really impressed with WebVR, Android cardboard and daydream sdks.  While there is  lots of content in vextex rendering as well as 360 degree images, I am starting from the tradition auto-stereo images.  Thanks to professor Davidhazy from RIT for giving some that were originally photographed on sliver halide film.

In this exercise, I am loading two sets of images, Andy’s portrait and balloon explosion — highspeed.  The code is implemented in javascript, available on Github, StereoView project.  device orientation triggers next image set upload.  This code is tested on a Samsung Note II with Chrome browser.  Try it out here.
VR

MSSE spring semester count down

Thursday, December 29th, 2016

screen-shot-2016-12-29-at-9-35-25-pm

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 ?