Jan 1, 2017
Throughout 2016, I took photos of the construction in my neighborhood every two weeks. The original plan was to take photos once a week, but I forgot every other week or it was dark already by the time I got home.
On the first day of 2017, I created a choppy time-lapse showing the changes that took place the past twelve months. I had taken three photos every time to capture all the construction:
First, I used Photoshop to stitch the photos together. I experimented with various layouts to get something like this:
Then, I imported the photos into Adobe Premiere after stitching them together. Because I did not use a tripod when taking photos, the positions of the buildings in the photos did not match up. Also, stitching caused distortion on the edges of the photos. So, I dragged the first photo in the timeline and placed some reference markers on the photo. For example, I placed markers outlining buildings under construction, since I want those to remain in a similar position from frame to frame so that I can emphasize the progression.
Next, I dragged the second photo onto the timeline and then moved it around in the frame so the buildings matched the markers. I did that with each photo to try to get the best resulting time-lapse as possible. It was impossible to get every building to match frame after frame, especially with the distortion at the edges of the photos. But it gives an idea of all the construction progress in 2016.
I’m still taking photos of the construction. Instead, I’m trying to take them at a consistent time of the day and at a higher frequency (every morning). Maybe there will be a better looking time-lapse in 2018!!
Dec 25, 2016
Sheet Music App
Christmas Day is a great day to work on personal projects.
Dec 6, 2015
Using Google Maps with BikeSpot
Last month I started working on BikeSpot again. The main goal for the next release is better location search. The app didn’t have very good search.
It was limited to locations in San Francisco only. While I currently only have bike rack data in San Francisco, I want search to be available in other cities as well. Bike parking data can be crowd sourced, so the app should not prevent any users from searching in other locations.
There was no auto complete. Everyone expects and is used to auto complete when searching. Not having it is just a bad user experience.
So I decided to use Google Maps and take advantage of its location search and place auto complete.
- response to user gestures
#####Switching from MKMapView to GMSMapView Custom my location button Implement GMSMapViewDelegate Camera position zoom Google Places API for iOS is packaged with the Google Maps SDK for iOS. Adding custom marker
#####Using Google Places API for autocomplete
Two ways for autocomplete:
- Autocomplete UI control - and there are different methods within this one
Get place predictions programmatically
After playing with different methods, I settled on adding a search bar to the navigation bar because it was the least intrusive to my existing UI
#####Google Places API iOS limitation cannot search using search string must tap on a place in the autocomplete list to search
#####Attribution If you use the Google Maps SDK for iOS in your application, you must include the attribution text as part of a legal notices section in your application. Including legal notices as an independent menu item, or as part of an “About” menu item, is recommended.
You can get the attribution text by making a call to [GMSServices openSourceLicenseInfo].
Sep 28, 2014
Pacegraph Working Again!
I finally sped up my Pacegraph by simultaneously making the api calls for each running activity using cURL. Here’s the example I followed: https://www.phpied.com/simultaneuos-http-requests-in-php-with-curl/
Here’s the pace graph link again: https://pacegraph.eugenialeong.com/. It actually loads.
I also played around with the color interpolation in the graph, since my older runs aren’t in this dataset anymore (when I ran slower), and the splits in the current data varies less (meaning less color range).
- Feb 3, 2014 Pacegraph Update
Jan 30, 2014
I noticed that I ran both miles of my two mile run on January 15th in the same pace. This rarely happens, I usually run each mile slower than the last. If I want to up my mileage, I should aim to keep a consistent pace mile after mile. So, that’s where I got the idea of creating this graph. I want a graph that shows I am moving toward a consistent pace as I add more miles.
I was able to access my running data using Strava’s API, and create a first version of this running pace graph using D3. Each row of the graph represents one run. Each circle in a row represents each mile, with the left most circle being the first mile. I mapped the duration of each mile to the radius, so a smaller radius means a faster pace. I also mapped the pace to the color of the circle, with bluish colors representing faster and average paces and red being a slower pace. Some rows have tiny circles at the end. Those are partial miles, which I’ll remove.
This graph already shows some interesting observations. I slowed down with each mile in 2012, and have been more consistent recently. The circles from recent runs are also smaller, meaning I ran at a faster pace. All the runs in 2014 don’t have much elevation change. I don’t remember the ones from 2012. I should use symbols to denote uphill or downhill as my pace will vary more with elevation change.
This graph is inspired this graph of publications of journals over time: https://neuralengr.com/asifr/journals/
Link to the graph here: https://pacegraph.eugenialeong.com/
- Nov 12, 2012 Jello Re-render
- Aug 26, 2012 Antialiasing
- Nov 21, 2011 Rigged Character
- Nov 21, 2011 Violin 3D Model
Sep 19, 2011
I finally got around to rendering the jello simulation
May 9, 2011
Maya Plug-in (2to3) Demo
May 8, 2011
Bubbles and Foam Simulation Video
May 7, 2011
Maya Plug-in Robot Example
May 7, 2011
Maya Plug-in GUI
Screenshots for the 2.5D plug-in GUI.
Here’s how to use the tool. Users click on CV Curve button to draw curves in top, side, front views. Each curve needs to be closed to accomodate the 3D part of the algorithm. Users click on the buttons under the Curves Tools tab to associate each curve in a different view. Then they select the front, top, right curves that correspond to each other and link them together by pressing on the Link curves button. When they finish drawing, they click on the Generate 2.5D View button to create a Maya node that contains the interpolated curves. The default interpolation is yaw 0 degrees, pitch 0 degrees. These angles can be changed by navigating to the node that was created and editing the yaw and pitch fields.
This is an expanded GUI:
The curves under Front View, Top View tabs are user input curves. Notice each set of linked curves contain a front, top, right curve.
May 3, 2011
Rendered Face from 2.5D
Here’s an output with yaw 10 degrees and pitch 20 degrees. The output is outlined in green. The blue curves are the input views. (screenshot here)
Apr 27, 2011
Rotation Part of 2.5D Algorithm
Finally got 3D rotation part of the 2.5D algorithm working. Let’s say the inputs are a pair of eyes as illustrated by two rectangular shapes below. Notice how the eyes are rotated correctly in the above image when I set yaw to 30 degrees, but not in the bottom image. The shapes in the bottom image rotated around their own 3D anchor point.
To clarify the last post, here is an input with a simple rectangular face and eyes. Notice how both eyes stay in front of the face plane when I rotate yaw 30 degrees. Before, the character’s right eye ended up behind the face when I rotated.
A closer look at the output:
Apr 13, 2011
Bubbles and Foam Simulation - with foam!
Bubbles and Foam: Here is a screenshot with fluid (blue), bubbles (yellow) , and foam (white)! The bubbles and foam pop too!
Apr 13, 2011
Maya Plug-in Rendered Output
A rendered output in Maya with contour lines, yaw 60 degrees, and pitch 0 degrees.
This screenshot is a 2.5D algorithm demo in Maya. The top right screen is the interpolated output with yaw 60 degrees and pitch 0 degrees. The other panels are the three top, front, side inputs. Each output is a node. Users can change the yaw and pitch angles on the right hand side.
Apr 13, 2011
Bubbles and Foam Simulation
Here is a first screenshot of the bubbles and foam simulation my classmate and I are working on.
This project is based on the paper Bubbling and Frothing Liquids from SIGGRAPH 2007. We are extending the FLUIDS v.2 SPH framework. Blue means water particles, yellow means bubble particles, no foam at this stage yet.
Mar 27, 2011
Maya Plug-in First Output
This is the first output of the shape interpolation part of the 2.5D algorithm in Maya based on the paper 2.5D Cartoon Models by Alec Rivers, Takeo Igarashi, and Frédo Durand. Input views in front, ride, top sides were hardcoded with four vertices each. The three views were interpolated to create the desired output at yaw: 45 degrees and pitch: 0 degrees.
Feb 9, 2011
For Advanced Topics in Computer Graphics and Animation, I will work on a Maya plug-in called 2to3 based on two SIGGRAPH papers from 2010: 3D Modeling with Silhouettes and 2.5D Cartoon Models, both written by Alec Rivers, Takeo Igarashi, and Frédo Durand. This plug-in takes in front, side, and top 2D views of a character or object, and creates 2.5D and 3D models. The goal of this plug-in is to enable artists and modelers to create initial sketches and models quickly. Using this tool, they can see what their character will look like from different angles without making extra sketches and what their character will look like in 3D. I will be working on the 2.5D part of the plug-in.
- Sheet Music App
- Using Google Maps with BikeSpot
- Pacegraph Working Again!
- Pacegraph Update
- Running Pacegraph
- Jello Re-render
- Rigged Character
- Violin 3D Model
- Jello Render
- Maya Plug-in (2to3) Demo
- Bubbles and Foam Simulation Video
- Maya Plug-in Robot Example
- Maya Plug-in GUI
- Rendered Face from 2.5D
- Rotation Part of 2.5D Algorithm
- Bubbles and Foam Simulation - with foam!
- Maya Plug-in Rendered Output
- Bubbles and Foam Simulation
- Maya Plug-in First Output
- Maya Plug-in