<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0" xmlns:media="http://search.yahoo.com/mrss/"><channel><title><![CDATA[Steph Ng]]></title><description><![CDATA[Steph Ng]]></description><link>https://steph.ng/</link><image><url>https://steph.ng/favicon.png</url><title>Steph Ng</title><link>https://steph.ng/</link></image><generator>Ghost 2.28</generator><lastBuildDate>Wed, 19 Aug 2026 19:07:54 GMT</lastBuildDate><atom:link href="https://steph.ng/rss/" rel="self" type="application/rss+xml"/><ttl>60</ttl><item><title><![CDATA[Snaptrap]]></title><description><![CDATA[<p>Snaptrap was nominated at GDC 2026, the biggest game developer festival in the world.</p><p>Three players act as flies, collecting nectar from a gaping Venus flytrap. The players reach into the flytrap, and compete against each other to collect as much pieces as they can. However, if anyone touches the</p>]]></description><link>https://steph.ng/snaptrap/</link><guid isPermaLink="false">6a7843cd79852204901b1497</guid><category><![CDATA[games]]></category><category><![CDATA[fabrication]]></category><dc:creator><![CDATA[Stephanie Ng]]></dc:creator><pubDate>Sun, 09 Aug 2026 09:14:46 GMT</pubDate><media:content url="https://steph.ng/content/images/2026/08/IMG_0690.jpg" medium="image"/><content:encoded><![CDATA[<img src="https://steph.ng/content/images/2026/08/IMG_0690.jpg" alt="Snaptrap"><p>Snaptrap was nominated at GDC 2026, the biggest game developer festival in the world.</p><p>Three players act as flies, collecting nectar from a gaping Venus flytrap. The players reach into the flytrap, and compete against each other to collect as much pieces as they can. However, if anyone touches the triggers inside the flytrap, it slams down on everyone.</p><p>I was the main engineer on the project and worked on the electronics and mechanical parts of it.</p><!--kg-card-begin: embed--><figure class="kg-card kg-embed-card"><iframe width="200" height="113" src="https://www.youtube.com/embed/KH7Pw8tgxkQ?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen title="SNAPTRAP"></iframe></figure><!--kg-card-end: embed-->]]></content:encoded></item><item><title><![CDATA[Software Engineering @ The Scan Truck]]></title><description><![CDATA[<p>I built a 3D scanning system for high quality photogrammetry. A DSLR camera is attached to a KUKA robot arm, which moves around the target object, capturing photos of it, while the object is rotated using a turntable. I wrote the code for path generation, camera control, robot control, and</p>]]></description><link>https://steph.ng/scan-truck/</link><guid isPermaLink="false">6a780eec79852204901b142d</guid><category><![CDATA[robotics]]></category><category><![CDATA[software]]></category><dc:creator><![CDATA[Stephanie Ng]]></dc:creator><pubDate>Sun, 09 Aug 2026 09:00:08 GMT</pubDate><media:content url="https://steph.ng/content/images/2026/08/PXL_20211209_225047536.jpg" medium="image"/><content:encoded><![CDATA[<img src="https://steph.ng/content/images/2026/08/PXL_20211209_225047536.jpg" alt="Software Engineering @ The Scan Truck"><p>I built a 3D scanning system for high quality photogrammetry. A DSLR camera is attached to a KUKA robot arm, which moves around the target object, capturing photos of it, while the object is rotated using a turntable. I wrote the code for path generation, camera control, robot control, and calibration. This was delivered 4 years ago and the system continues to be used daily without any issues or updates.</p><p></p>]]></content:encoded></item><item><title><![CDATA[Scan-It Planet]]></title><description><![CDATA[<p>Scan-It Planet is a top-down alternative controller game nominated at IndieCade 2024.</p><p>You play as a tiny astronaut exploring an extraterrestrial microbiome. Scan physical objects (such as a pen or your hands) that will appear in the game space to navigate and collect creatures + avoid environmental hazards. Get creative with</p>]]></description><link>https://steph.ng/scan-it-planet/</link><guid isPermaLink="false">6a78421979852204901b1474</guid><category><![CDATA[games]]></category><category><![CDATA[fabrication]]></category><dc:creator><![CDATA[Stephanie Ng]]></dc:creator><pubDate>Wed, 23 Oct 2024 09:02:00 GMT</pubDate><media:content url="https://steph.ng/content/images/2026/08/promo_art.png" medium="image"/><content:encoded><![CDATA[<img src="https://steph.ng/content/images/2026/08/promo_art.png" alt="Scan-It Planet"><p>Scan-It Planet is a top-down alternative controller game nominated at IndieCade 2024.</p><p>You play as a tiny astronaut exploring an extraterrestrial microbiome. Scan physical objects (such as a pen or your hands) that will appear in the game space to navigate and collect creatures + avoid environmental hazards. Get creative with scanned objects to create interesting shapes and paths!</p><p>The core technology includes a Unity game, a local Python server that handles computer vision, and a local JavaScript server that handles communication to the printer.</p><!--kg-card-begin: embed--><figure class="kg-card kg-embed-card"><iframe width="200" height="113" src="https://www.youtube.com/embed/1UAZ34pS6DQ?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen title="Scan-It Planet Trailer"></iframe></figure><!--kg-card-end: embed-->]]></content:encoded></item><item><title><![CDATA[Product Design @ Meta AR/VR]]></title><description><![CDATA[<!--kg-card-begin: embed--><figure class="kg-card kg-embed-card"><iframe width="200" height="113" src="https://www.youtube.com/embed/o67td5HFghI?start=1&feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></figure><!--kg-card-end: embed--><p>During the summer of 2020 I was on Facebook's AR/VR team as a product design intern. I got to work on Horizon, a multiplayer VR world that acts as a social platform, complete with an editing system for users to create their own VR worlds within Horizon.</p><p>I was</p>]]></description><link>https://steph.ng/vr-product-design-intern-facebook/</link><guid isPermaLink="false">614182f50957ef63d5f57be7</guid><category><![CDATA[xr]]></category><category><![CDATA[software]]></category><dc:creator><![CDATA[Stephanie Ng]]></dc:creator><pubDate>Wed, 15 Sep 2021 07:58:59 GMT</pubDate><media:content url="https://steph.ng/content/images/2021/09/Facebook-Horizon.jpeg" medium="image"/><content:encoded><![CDATA[<!--kg-card-begin: embed--><figure class="kg-card kg-embed-card"><iframe width="200" height="113" src="https://www.youtube.com/embed/o67td5HFghI?start=1&feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></figure><!--kg-card-end: embed--><img src="https://steph.ng/content/images/2021/09/Facebook-Horizon.jpeg" alt="Product Design @ Meta AR/VR"><p>During the summer of 2020 I was on Facebook's AR/VR team as a product design intern. I got to work on Horizon, a multiplayer VR world that acts as a social platform, complete with an editing system for users to create their own VR worlds within Horizon.</p><p>I was responsible for adding a two-handed grab feature that allows users to grasp objects with both hands. I also designed new features to the world editing system to make it more customizable and user-friendly.</p><p>As a fun fact, I was the only design intern that summer who had made contributions to the code base!</p><h3 id="takeaways">Takeaways</h3><p>I found that I liked having a mix of design and technical work. This was my first internship as a product designer, and my previous ones have been in software engineering. I enjoyed being able to contribute to the design before implementing it.</p>]]></content:encoded></item><item><title><![CDATA[Game VFX Reel]]></title><description><![CDATA[<p>As a student game developer I've often filled the role as a technical artist. With my background in digital art and software engineering, I felt right at home combining both skills to create shaders and particle effects. This post is about the process behind my VFX and tech art work</p>]]></description><link>https://steph.ng/vfx/</link><guid isPermaLink="false">5ff03234db52cb04c942b968</guid><category><![CDATA[games]]></category><dc:creator><![CDATA[Stephanie Ng]]></dc:creator><pubDate>Sun, 03 Jan 2021 06:45:44 GMT</pubDate><media:content url="https://steph.ng/content/images/2021/01/treeeEEEEE.png" medium="image"/><content:encoded><![CDATA[<img src="https://steph.ng/content/images/2021/01/treeeEEEEE.png" alt="Game VFX Reel"><p>As a student game developer I've often filled the role as a technical artist. With my background in digital art and software engineering, I felt right at home combining both skills to create shaders and particle effects. This post is about the process behind my VFX and tech art work created in Unity.</p><!--kg-card-begin: embed--><figure class="kg-card kg-embed-card"><iframe width="200" height="113" src="https://www.youtube.com/embed/EsfBgZfysAA?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></figure><!--kg-card-end: embed--><h3 id="1-area-of-effect-electric-attack-leechbug-2020-">1. Area-of-Effect Electric Attack (<em>Leechbug</em>, 2020)</h3><!--kg-card-begin: image--><figure class="kg-card kg-image-card"><img src="https://steph.ng/content/images/2021/01/ezgif.com-gif-maker--5--2.gif" class="kg-image" alt="Game VFX Reel"></figure><!--kg-card-end: image--><p>I'm directing the student game <em>Leechbug</em>, an RTS about fish swarms battling underwater. This is one of the fish's special attacks, an electric shock. I first brainstormed some ideas for the animation and picked the first sequence.</p><!--kg-card-begin: image--><figure class="kg-card kg-image-card"><img src="https://steph.ng/content/images/2021/01/Untitled_Artwork-43.png" class="kg-image" alt="Game VFX Reel"></figure><!--kg-card-end: image--><p>I experimented a bit with the particle system to make the fish look like it's building up energy, and added a noise shader to the expanding orb at the center. It ended up looking different from my initial sketches (and a lot cooler!)</p><!--kg-card-begin: image--><figure class="kg-card kg-image-card"><img src="https://steph.ng/content/images/2021/01/noise-4.gif" class="kg-image" alt="Game VFX Reel"></figure><!--kg-card-end: image--><h3 id="2-healing-aura-leechbug-2020-">2. Healing Aura (<em>Leechbug</em>, 2020)</h3><!--kg-card-begin: image--><figure class="kg-card kg-image-card"><img src="https://steph.ng/content/images/2021/01/ezgif.com-gif-maker--6-.gif" class="kg-image" alt="Game VFX Reel"></figure><!--kg-card-end: image--><p>We needed a way to clearly show which fish are affected by the healing aura, while obstructing the player's view as little as possible. It is important for the player to know what fish they are healing.</p><p>The translucent bubble doesn't show depth well – you can't tell which fish is within it. I added some floating "+" particles but it didn't help much.</p><!--kg-card-begin: image--><figure class="kg-card kg-image-card"><img src="https://steph.ng/content/images/2021/01/ezgif.com-gif-maker--3-.gif" class="kg-image" alt="Game VFX Reel"></figure><!--kg-card-end: image--><p>I started to look for a way to put a screen space overlay on objects inside the sphere. I tried different approaches from scene depth to mesh boolean, before I found a hint online to use double render passes. The first pass is invisible, and writes only back-facing pixels that is behind another object to a stencil buffer. The second pass is the green overlay, and it renders only front-facing pixels that are in the same stencil buffer as the first pass.</p><!--kg-card-begin: image--><figure class="kg-card kg-image-card"><img src="https://steph.ng/content/images/2021/01/ezgif.com-gif-maker--4-.gif" class="kg-image" alt="Game VFX Reel"></figure><!--kg-card-end: image--><p>This lets the green overlay render behind objects <em>outside</em> the orb, while still rendering in front of objects <em>inside</em> the orb:</p><!--kg-card-begin: image--><figure class="kg-card kg-image-card"><img src="https://steph.ng/content/images/2021/01/aiuwawefukhafu.png" class="kg-image" alt="Game VFX Reel"></figure><!--kg-card-end: image--><p>Then I simply added the "+" pattern to the green overlay, and used a scene depth node to highlight the edge where the orb meets the object. This took a whole day to figure out and I was delighted when it finally worked!</p><p>Extra: For this project I also made a simple sine wave fish shader that saved our art department a lot of time, since they won't have animate each fish. It also mimics how a fish's head moves much less than its tail.</p><!--kg-card-begin: markdown--><p><img src="https://thumbs.gfycat.com/SmoggyLavishFerret-small.gif" alt="Game VFX Reel"></p>
<!--kg-card-end: markdown--><h3 id="3-memory-tree-shader-momento-2019-">3. Memory Tree Shader (<em>Momento</em>, 2019)</h3><!--kg-card-begin: image--><figure class="kg-card kg-image-card"><img src="https://steph.ng/content/images/2021/01/ezgif.com-gif-maker--11-.gif" class="kg-image" alt="Game VFX Reel"></figure><!--kg-card-end: image--><p>Referencing this piece of concept art from our artist, I made the shaders for this memory tree and pond. We ended up changing the colors to make it more dreamlike.</p><!--kg-card-begin: image--><figure class="kg-card kg-image-card"><img src="https://steph.ng/content/images/2021/01/image-4.png" class="kg-image" alt="Game VFX Reel"></figure><!--kg-card-end: image--><p>The cloud shader combines a moving noise texture with a fresnel node to create a shimmering effect. The trunk and orbs use a gradient + fresnel shader, and the water uses a twirling noise texture.</p><!--kg-card-begin: image--><figure class="kg-card kg-image-card"><img src="https://steph.ng/content/images/2021/01/image-3.png" class="kg-image" alt="Game VFX Reel"></figure><!--kg-card-end: image--><h3 id="4-water-hose-2020-">4. Water Hose (2020)</h3><!--kg-card-begin: image--><figure class="kg-card kg-image-card"><img src="https://steph.ng/content/images/2021/01/ezgif.com-gif-maker--5--1.gif" class="kg-image" alt="Game VFX Reel"></figure><!--kg-card-end: image--><p>This is a rework of a water hose effect I made in an old game jam years ago. I wanted to redo it as a portfolio piece after having learnt a lot more about VFX. I made a sketch of the elements that would go into the water stream.</p><!--kg-card-begin: image--><figure class="kg-card kg-image-card"><img src="https://steph.ng/content/images/2021/01/Untitled_Artwork-82.png" class="kg-image" alt="Game VFX Reel"></figure><!--kg-card-end: image--><p>I ended up not using the swirl effect since it didn't make sense for a water hose to "spin" the water (and it didn't look that great).</p><p>The stream of water is a cylinder with a shader that displaces its vertices with a moving noise texture. The stripes comes from another noise texture combined with a seamless water texture I painted:</p><!--kg-card-begin: image--><figure class="kg-card kg-image-card"><img src="https://steph.ng/content/images/2021/01/sfsfdgsdfgsdfg-1.png" class="kg-image" alt="Game VFX Reel"></figure><!--kg-card-end: image--><p>The water splash is from a particle system that spawns squares with a moving noise texture. It works surprisingly well as as a stylized smoke or cloud effect.</p><!--kg-card-begin: image--><figure class="kg-card kg-image-card"><img src="https://steph.ng/content/images/2021/01/noise-ellipse.gif" class="kg-image" alt="Game VFX Reel"></figure><!--kg-card-end: image--><h3 id="5-horror-glitch-effect-berklee-game-jam-2020-">5. Horror Glitch Effect (<em>Berklee Game Jam</em>, 2020)</h3><!--kg-card-begin: image--><figure class="kg-card kg-image-card"><img src="https://steph.ng/content/images/2021/01/ezgif.com-gif-maker--10-.gif" class="kg-image" alt="Game VFX Reel"></figure><!--kg-card-end: image--><p>This is a 3d glitch effect I made for a game jam project about living in quarantine, where household objects appear and disappear with a glitch. It's a shader applied to a cube that scrambles whatever is rendering behind its surface.</p><!--kg-card-begin: image--><figure class="kg-card kg-image-card"><img src="https://steph.ng/content/images/2021/01/checkerboard-1.gif" class="kg-image" alt="Game VFX Reel"></figure><!--kg-card-end: image--><p>As a bonus, here is my talk about Unity Shader Graph that I recently gave to fellow students. Enjoy!</p><!--kg-card-begin: embed--><figure class="kg-card kg-embed-card"><iframe width="200" height="113" src="https://www.youtube.com/embed/hzhOi6uoRT0?start=217&feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></figure><!--kg-card-end: embed-->]]></content:encoded></item><item><title><![CDATA[Leechbug]]></title><description><![CDATA[A 3D action game set in an alien sea, where you are a mind-controlling parasite trying to climb to the top of the food chain by possessing sea creatures.]]></description><link>https://steph.ng/leechbug/</link><guid isPermaLink="false">5dec596a45a1972015a19faf</guid><category><![CDATA[games]]></category><dc:creator><![CDATA[Stephanie Ng]]></dc:creator><pubDate>Wed, 11 Dec 2019 23:58:17 GMT</pubDate><media:content url="https://steph.ng/content/images/2020/01/image_071.jpg" medium="image"/><content:encoded><![CDATA[<img src="https://steph.ng/content/images/2020/01/image_071.jpg" alt="Leechbug"><p>A 3D action game set in an alien sea, where you are a mind-controlling parasite trying to climb to the top of the food chain by possessing sea creatures using swarms of parasites.</p><!--kg-card-begin: gallery--><figure class="kg-card kg-gallery-card kg-width-wide"><div class="kg-gallery-container"><div class="kg-gallery-row"><div class="kg-gallery-image"><img src="https://steph.ng/content/images/2020/01/image_074.jpg" width="2560" height="1440" alt="Leechbug"></div><div class="kg-gallery-image"><img src="https://steph.ng/content/images/2020/01/image_106.jpg" width="2560" height="1440" alt="Leechbug"></div></div><div class="kg-gallery-row"><div class="kg-gallery-image"><img src="https://steph.ng/content/images/2020/02/ezgif.com-optimize--9-.gif" width="600" height="375" alt="Leechbug"></div><div class="kg-gallery-image"><img src="https://steph.ng/content/images/2020/02/safwqe34.png" width="3360" height="2100" alt="Leechbug"></div></div></div></figure><!--kg-card-end: gallery--><!--kg-card-begin: embed--><figure class="kg-card kg-embed-card"><iframe width="480" height="270" src="https://www.youtube.com/embed/m90s_dnGOdU?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></figure><!--kg-card-end: embed--><!--kg-card-begin: markdown--><h2 id="mycontribution">My Contribution</h2>
<!--kg-card-end: markdown--><ul><li>Main game loop design</li><li>Enemy AI design and development</li><li>Material and VFX design and development</li><li>Player character design and creation</li></ul><!--kg-card-begin: markdown--><h2 id="designprocess">Design Process</h2>
<!--kg-card-end: markdown--><p>One of the first steps was to design a strong game loop and sketch out a frame of game elements. This frame includes the environment, enemies, the boss, and the player.</p><!--kg-card-begin: gallery--><figure class="kg-card kg-gallery-card kg-width-wide"><div class="kg-gallery-container"><div class="kg-gallery-row"><div class="kg-gallery-image"><img src="https://steph.ng/content/images/2019/12/IMG_20191125_162517-1.jpg" width="3419" height="1874" alt="Leechbug"></div><div class="kg-gallery-image"><img src="https://steph.ng/content/images/2020/01/IMG_20191125_164404.jpg" width="2000" height="1563" alt="Leechbug"></div></div><div class="kg-gallery-row"><div class="kg-gallery-image"><img src="https://steph.ng/content/images/2020/01/Untitled_Artwork-5.jpg" width="2000" height="1500" alt="Leechbug"></div><div class="kg-gallery-image"><img src="https://steph.ng/content/images/2020/01/Untitled_Artwork-4.jpg" width="2000" height="1500" alt="Leechbug"></div></div></div></figure><!--kg-card-end: gallery--><p>I wrote the game design document (GDD) to explain these mechanics in detail.</p><!--kg-card-begin: image--><figure class="kg-card kg-image-card"><img src="https://steph.ng/content/images/2019/12/Screen-Shot-2019-12-11-at-02.50.41.png" class="kg-image" alt="Leechbug"></figure><!--kg-card-end: image--><h2 id="level-select">Level Select</h2><!--kg-card-begin: gallery--><figure class="kg-card kg-gallery-card kg-width-wide"><div class="kg-gallery-container"><div class="kg-gallery-row"><div class="kg-gallery-image"><img src="https://steph.ng/content/images/2020/01/Untitled_Artwork-7-1.jpg" width="2224" height="1668" alt="Leechbug"></div><div class="kg-gallery-image"><img src="https://steph.ng/content/images/2020/01/ezgif.com-video-to-gif.gif" width="790" height="444" alt="Leechbug"></div></div></div></figure><!--kg-card-end: gallery--><!--kg-card-begin: markdown--><h2 id="characterdesign">Character Design</h2>
<!--kg-card-end: markdown--><p><strong>First Iteration</strong></p><!--kg-card-begin: gallery--><figure class="kg-card kg-gallery-card kg-width-wide kg-card-hascaption"><div class="kg-gallery-container"><div class="kg-gallery-row"><div class="kg-gallery-image"><img src="https://steph.ng/content/images/2020/01/ezgif.com-optimize--7-.gif" width="800" height="599" alt="Leechbug"></div><div class="kg-gallery-image"><img src="https://steph.ng/content/images/2020/01/IMG_0138.PNG" width="1221" height="1094" alt="Leechbug"></div><div class="kg-gallery-image"><img src="https://steph.ng/content/images/2020/01/ezgif.com-video-to-gif-1.gif" width="800" height="624" alt="Leechbug"></div></div></div><figcaption>My initial concept art and finished model</figcaption></figure><!--kg-card-end: gallery--><!--kg-card-begin: embed--><figure class="kg-card kg-embed-card"><iframe width="480" height="270" src="https://www.youtube.com/embed/HdlhFwPvW_E?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></figure><!--kg-card-end: embed--><p><strong>Second Iteration</strong></p><p>The fish didn't fit very well in the game, so I redesigned it and changed its material. The gradient shader was created using Unity's Shader Graph.</p><!--kg-card-begin: gallery--><figure class="kg-card kg-gallery-card kg-width-wide"><div class="kg-gallery-container"><div class="kg-gallery-row"><div class="kg-gallery-image"><img src="https://steph.ng/content/images/2020/01/download.png" width="1172" height="516" alt="Leechbug"></div><div class="kg-gallery-image"><img src="https://steph.ng/content/images/2020/01/ezgif.com-gif-maker.gif" width="252" height="296" alt="Leechbug"></div><div class="kg-gallery-image"><img src="https://steph.ng/content/images/2020/01/image-2.png" width="1135" height="757" alt="Leechbug"></div></div></div></figure><!--kg-card-end: gallery--><h2 id="download">Download</h2><!--kg-card-begin: html--><iframe frameborder="0" src="https://itch.io/embed/559362?bg_color=ffffff&amp;link_color=000000" width="552" height="167"><a href="https://glowcone.itch.io/leechbug">Leechbug by glowcone</a></iframe><!--kg-card-end: html-->]]></content:encoded></item><item><title><![CDATA[Momento]]></title><description><![CDATA[Momento is a platform for creating VR memory palaces. It provides curated templates of spaces in VR where users can replace with their own photos and videos, allowing users to generate a personal VR experience as easy as creating a slideshow.]]></description><link>https://steph.ng/momento/</link><guid isPermaLink="false">5dc8eeab45a1972015a19f58</guid><category><![CDATA[xr]]></category><dc:creator><![CDATA[Stephanie Ng]]></dc:creator><pubDate>Fri, 01 Nov 2019 06:59:00 GMT</pubDate><media:content url="https://steph.ng/content/images/2019/11/download--2-.jpeg" medium="image"/><content:encoded><![CDATA[<img src="https://steph.ng/content/images/2019/11/download--2-.jpeg" alt="Momento"><p>Role: Technical Artist, UI Designer<br>Team Size: 16<br>Duration: September 2019 - May 2020</p><p>Momento is a platform for creating VR memory palaces. It provides curated templates of spaces in VR where users can replace with their own photos and videos, allowing users to generate a personal VR experience as easy as creating a slideshow.</p><h2 id="my-contribution">My Contribution</h2><ul><li>Created materials and shaders of memory tree</li><li>Developed memory tree interactions</li><li>Designed companion mobile app</li></ul><!--kg-card-begin: embed--><figure class="kg-card kg-embed-card"><iframe width="480" height="270" src="https://www.youtube.com/embed/Pq8-HAj6QJM?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></figure><!--kg-card-end: embed--><p>Referencing concept art from my teammate, I created appropriate shaders such as the cloud-like leaves and rippled pond. However, we decided to go with a static shader for better performance in VR.</p><p>Concept art created by Kevin Ke, tree model created by Nick Pudjarminta.</p><!--kg-card-begin: gallery--><figure class="kg-card kg-gallery-card kg-width-wide"><div class="kg-gallery-container"><div class="kg-gallery-row"><div class="kg-gallery-image"><img src="https://steph.ng/content/images/2020/02/download.png" width="1609" height="955" alt="Momento"></div><div class="kg-gallery-image"><img src="https://steph.ng/content/images/2021/01/ezgif.com-gif-maker--11--1.gif" width="600" height="336" alt="Momento"></div></div><div class="kg-gallery-row"><div class="kg-gallery-image"><img src="https://steph.ng/content/images/2020/02/image-2.png" width="1672" height="1037" alt="Momento"></div><div class="kg-gallery-image"><img src="https://steph.ng/content/images/2020/02/image-3.png" width="1666" height="1051" alt="Momento"></div></div></div></figure><!--kg-card-end: gallery--><p>Using Figma, I prototyped the companion mobile app for users to drop in their media.</p><!--kg-card-begin: image--><figure class="kg-card kg-image-card"><img src="https://steph.ng/content/images/2019/12/IMG_20191111_185324-1.jpg" class="kg-image" alt="Momento"></figure><!--kg-card-end: image--><!--kg-card-begin: image--><figure class="kg-card kg-image-card kg-width-wide"><img src="https://steph.ng/content/images/2020/02/image-5.png" class="kg-image" alt="Momento"></figure><!--kg-card-end: image--><p>I was also part of the demo team and have showcased Momento at IndieCade where we won the award for Best Location-Based Experience, Infinity Festival, and Stevens Innovator Showcase where we were selected as a finalist.</p><!--kg-card-begin: embed--><figure class="kg-card kg-embed-card"><iframe width="480" height="270" src="https://www.youtube.com/embed/8jTKwUlA-b0?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></figure><!--kg-card-end: embed-->]]></content:encoded></item><item><title><![CDATA[Spaceship Earth]]></title><description><![CDATA[The journey of a barren planet to become habitable by collecting resources. This game was created during the MEGA game jam at USC. Our team won Best Audio.]]></description><link>https://steph.ng/spaceship-earth/</link><guid isPermaLink="false">5df0ce5f45a1972015a1a07b</guid><category><![CDATA[games]]></category><dc:creator><![CDATA[Stephanie Ng]]></dc:creator><pubDate>Fri, 25 Oct 2019 11:09:00 GMT</pubDate><media:content url="https://steph.ng/content/images/2019/12/_MG_2118-1.JPG" medium="image"/><content:encoded><![CDATA[<img src="https://steph.ng/content/images/2019/12/_MG_2118-1.JPG" alt="Spaceship Earth"><p>Role: Game Design Lead, Game Developer<br>Team Size: 4 <br>Duration: 48 hours</p><!--kg-card-begin: image--><figure class="kg-card kg-image-card"><img src="https://steph.ng/content/images/2019/12/ezgif.com-optimize--4-.gif" class="kg-image" alt="Spaceship Earth"></figure><!--kg-card-end: image--><!--kg-card-begin: image--><figure class="kg-card kg-image-card"><img src="https://steph.ng/content/images/2019/12/ezgif.com-optimize--6-.gif" class="kg-image" alt="Spaceship Earth"></figure><!--kg-card-end: image--><p>The journey of a barren planet to become habitable by collecting resources. This game was created in 48 hours during the MEGA game jam at USC. The theme was "Boundless". Our team won the prize for Best Audio.</p><!--kg-card-begin: markdown--><h2 id="contributions">Contributions</h2>
<!--kg-card-end: markdown--><ul><li>Designed orbit mechanic, game map, and overall gameplay</li><li>Developed inventory system, planet randomizer, and black holes</li></ul><!--kg-card-begin: markdown--><h2 id="designprocess">Design Process</h2>
<!--kg-card-end: markdown--><!--kg-card-begin: image--><figure class="kg-card kg-image-card"><img src="https://steph.ng/content/images/2019/12/IMG_20191025_192825.jpg" class="kg-image" alt="Spaceship Earth"></figure><!--kg-card-end: image--><p>We started by collectively brainstorming game ideas. I came up with the mechanic idea of orbital slingshot, where the player flings itself through space by attaching and detaching from the gravitational field of other objects.</p><!--kg-card-begin: markdown--><h2 id="designchoices">Design Choices</h2>
<!--kg-card-end: markdown--><ul><li>The start screen, "Press &lt;space&gt; to launch", instantly teaches the player the only mechanic (pressing space) from the very start by making it part of the game.</li></ul><!--kg-card-begin: image--><figure class="kg-card kg-image-card"><img src="https://steph.ng/content/images/2019/12/ezgif.com-optimize--5-.gif" class="kg-image" alt="Spaceship Earth"></figure><!--kg-card-end: image--><ul><li>There is only one mechanic, but the player must get the timing right to launch to the correct planet. The same mechanic is also used to escape black holes by mashing the button.</li><li>The game sometimes calls for a quick reaction to detach from the orbit to avoid green toxic planets.</li><li>The goal of the game is to collect the resources by exploring the boundless space. The player cannot see very far, and is encouraged to throw themselves into space to see what happens.</li></ul><!--kg-card-begin: image--><figure class="kg-card kg-image-card"><img src="https://steph.ng/content/images/2019/12/_MG_2122.JPG" class="kg-image" alt="Spaceship Earth"></figure><!--kg-card-end: image--><!--kg-card-begin: markdown--><h2 id="download">Download</h2>
<!--kg-card-end: markdown--><!--kg-card-begin: html--><iframe frameborder="0" src="https://itch.io/embed/506615?link_color=000000" width="552" height="167"></iframe><!--kg-card-end: html-->]]></content:encoded></item><item><title><![CDATA[Software Engineering @ VTProDesign]]></title><description><![CDATA[<p>This summer I worked at VT Pro Design, a production studio for creative technology. One of their specialties is utilizing industrial robot arms for all kinds of entertainment projects by attaching cameras or LED screens to it.</p><!--kg-card-begin: image--><figure class="kg-card kg-image-card kg-width-wide kg-card-hascaption"><img src="https://steph.ng/content/images/2019/10/IMG_20190530_164850-1.jpg" class="kg-image"><figcaption>Testing the robot with wooden dummy frames.</figcaption></figure><!--kg-card-end: image--><p>I worked in a team that</p>]]></description><link>https://steph.ng/summer-2019-robot-arms-and-lasers/</link><guid isPermaLink="false">5d96376645a1972015a19e76</guid><category><![CDATA[robotics]]></category><category><![CDATA[software]]></category><dc:creator><![CDATA[Stephanie Ng]]></dc:creator><pubDate>Tue, 01 Oct 2019 18:35:00 GMT</pubDate><media:content url="https://steph.ng/content/images/2019/10/bots-1.jpg" medium="image"/><content:encoded><![CDATA[<img src="https://steph.ng/content/images/2019/10/bots-1.jpg" alt="Software Engineering @ VTProDesign"><p>This summer I worked at VT Pro Design, a production studio for creative technology. One of their specialties is utilizing industrial robot arms for all kinds of entertainment projects by attaching cameras or LED screens to it.</p><!--kg-card-begin: image--><figure class="kg-card kg-image-card kg-width-wide kg-card-hascaption"><img src="https://steph.ng/content/images/2019/10/IMG_20190530_164850-1.jpg" class="kg-image" alt="Software Engineering @ VTProDesign"><figcaption>Testing the robot with wooden dummy frames.</figcaption></figure><!--kg-card-end: image--><p>I worked in a team that is preparing the robots for MTV's annual Video Music Awards. The client wanted two huge LED screens that would separate as performers walked through the gap. This called for the utmost precision since the robots would be in close proximity to celebrities.</p><p>The studio already has software to control individual robots, but it was the first time we had synchronize multiple robots and calibrate their position relative to each other. My project was to design a tool that would calibrate these robots so that they are in the same coordinate space as each other, which is the main focus of this internship.</p><p>There were two ways of calibrating the robots. The first is to attach skewers to two robots, and move the arms so the pointy ends touch. Doing this several times at different locations creates a point cloud, and from that we can calculate the position offset of the robot from each other. The second way is to use a laser tracking machine, giving us the utmost accuracy and convenience. Renting the laser is expensive and will only be used for larger jobs, so the calibration software supports both modes.</p><!--kg-card-begin: image--><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://steph.ng/content/images/2019/10/Image-from-iOS.jpg" class="kg-image" alt="Software Engineering @ VTProDesign"><figcaption>I manually move the robot arms to create a point cloud.</figcaption></figure><!--kg-card-end: image--><p>We shipped the robots just as my internship ended. Two weeks later, they went live at the VMA's.</p><!--kg-card-begin: image--><figure class="kg-card kg-image-card kg-width-wide"><img src="https://steph.ng/content/images/2019/10/ezgif.com-optimize--2-.gif" class="kg-image" alt="Software Engineering @ VTProDesign"></figure><!--kg-card-end: image--><h2 id="takeaways">Takeaways</h2><p><br><strong>I learnt to see the bigger picture.</strong><br>At the beginning, I was given a collection of subtasks . As the project became more and more clear for me, I was able to "own" a section of the project, taking initiative to generate my own tasks to make that part better.</p><p><strong>I became curious of other departments.</strong><br>At the end of the day I would often walk past the creative content team and chat about what they are working on. They always had something cool rendering on the screen. By being interested in their work, I established good relationships with people from all over the office and learnt from them in addition to my own department.</p>]]></content:encoded></item><item><title><![CDATA[AR Game Development @ Sony]]></title><description><![CDATA[<p>During summer of 2018, I worked at Sony Pictures as a game development intern. This was part of a three-month summer program where thirteen student interns prototyped a game or interactive experience to be played in virtual reality or augmented reality. In groups of two or three, we were assigned</p>]]></description><link>https://steph.ng/summer-2018-ar-vr-xr/</link><guid isPermaLink="false">5d9640a245a1972015a19f29</guid><category><![CDATA[games]]></category><category><![CDATA[software]]></category><category><![CDATA[xr]]></category><dc:creator><![CDATA[Stephanie Ng]]></dc:creator><pubDate>Wed, 12 Jun 2019 18:53:00 GMT</pubDate><media:content url="https://steph.ng/content/images/2019/10/DSC_0748.JPG" medium="image"/><content:encoded><![CDATA[<img src="https://steph.ng/content/images/2019/10/DSC_0748.JPG" alt="AR Game Development @ Sony"><p>During summer of 2018, I worked at Sony Pictures as a game development intern. This was part of a three-month summer program where thirteen student interns prototyped a game or interactive experience to be played in virtual reality or augmented reality. In groups of two or three, we were assigned projects with different themes and objectives. My team was to create a mobile augmented reality app for promoting an upcoming Sony movie. Its main purpose was marketing the movie and to allow users to share the result of an augmented photo, but we decided to take it a step further and to add more interactive elements to turn it into a game, so that it is more than a photo booth app.</p><p>For the first few days, we brainstormed different ideas for the game. Since the main purpose is marketing, the game should be easy to pick up and suitable for a wide audience. After some initial brainstorming, we settled on building a gesture-based minigame based on a scene from the movie. The player will be in the perspective of the main character, who has to break out of a lab by fighting guards. What makes the game special is the interaction. To shoot at the enemies, the player has to wave a hand in front of the camera to trigger an attack. This was to mime the way the main character attacks in the movie.</p><p>Both my teammate and I are programmers, and we split the software development work into two parts. My teammate is a graduate student in game design, so he was responsible for programing gameplay and designing specific mechanics of the game, for example, the number of enemies and their range of attack, as well as any special visual effects that happens when the player hits something. Meanwhile, I took up the machine learning part. For a computer to recognize a hand from a camera, it needs to go through some training to learn what a “hand” looks like. Over a few hours, I gathered hundreds of thousands of hand images and fed them to the computer. It will then find similarities between those images to figure out patterns that determine what a hand is.</p><p>During the program, all thirteen interns shared a basement office and we often went to lunch as a group. This fostered communication between teams and encouraged us to ask each other for help. After a long day, some of us would stay in the office to play virtual reality games. At the end of the program, each group gave a presentation about their game and hosted a live demo in a large room.</p>]]></content:encoded></item><item><title><![CDATA[Hira]]></title><description><![CDATA[<p>Hira is a notebook that listens for you.</p><p>It aims to solve the core problem of bad notetaking. It's difficult for us to take notes and listen at the same time, causing notes to be incoherent when we re-read them. Hira transcribes the current lecture or meeting, while you can</p>]]></description><link>https://steph.ng/hira/</link><guid isPermaLink="false">5d59f64fd2234b0980316de0</guid><category><![CDATA[software]]></category><dc:creator><![CDATA[Stephanie Ng]]></dc:creator><pubDate>Fri, 27 Apr 2018 16:11:00 GMT</pubDate><media:content url="https://steph.ng/content/images/2019/08/30995584_371694419995728_1269524356250206208_n.jpg" medium="image"/><content:encoded><![CDATA[<img src="https://steph.ng/content/images/2019/08/30995584_371694419995728_1269524356250206208_n.jpg" alt="Hira"><p>Hira is a notebook that listens for you.</p><p>It aims to solve the core problem of bad notetaking. It's difficult for us to take notes and listen at the same time, causing notes to be incoherent when we re-read them. Hira transcribes the current lecture or meeting, while you can simply highlight directly on the transcript. This way, you can focus on the present while recording what’s important.</p><p>Hira began as a concept for a class presentation, then months later at LA Hacks, my team decided to build out a prototype for this concept. After some more development and creating a pitch deck, we won $2.5k in the Iovine and Young Pitch Competition!</p><!--kg-card-begin: gallery--><figure class="kg-card kg-gallery-card kg-width-wide kg-card-hascaption"><div class="kg-gallery-container"><div class="kg-gallery-row"><div class="kg-gallery-image"><img src="https://steph.ng/content/images/2019/08/HIRA_Page_03-1.png" width="3014" height="1695" alt="Hira"></div><div class="kg-gallery-image"><img src="https://steph.ng/content/images/2019/08/HIRA_Page_15-1.png" width="10240" height="5745" alt="Hira"></div><div class="kg-gallery-image"><img src="https://steph.ng/content/images/2019/08/HIRA_Page_07-1.png" width="3014" height="1695" alt="Hira"></div></div><div class="kg-gallery-row"><div class="kg-gallery-image"><img src="https://steph.ng/content/images/2019/08/HIRA_Page_09.png" width="5440" height="3060" alt="Hira"></div><div class="kg-gallery-image"><img src="https://steph.ng/content/images/2019/08/HIRA_Page_08.png" width="3014" height="1695" alt="Hira"></div><div class="kg-gallery-image"><img src="https://steph.ng/content/images/2019/08/HIRA_Page_14-1.png" width="10240" height="5745" alt="Hira"></div></div></div><figcaption>Select pages from our winning pitch deck.</figcaption></figure><!--kg-card-end: gallery--><p></p>]]></content:encoded></item><item><title><![CDATA[Shoe Rack Design]]></title><description><![CDATA[<p>In an effort to organize my shoes instead of leaving them in a pile, I decided to build a shoe rack for my room. It needs to be easily disassembled and use minimal materials. Because I study far from home, I move between my dorm and a summer home every</p>]]></description><link>https://steph.ng/shoe-rack-design/</link><guid isPermaLink="false">5d8859f445a1972015a19e56</guid><category><![CDATA[fabrication]]></category><dc:creator><![CDATA[Stephanie Ng]]></dc:creator><pubDate>Thu, 14 Dec 2017 10:31:00 GMT</pubDate><media:content url="https://steph.ng/content/images/2019/09/shoe-3.jpg" medium="image"/><content:encoded><![CDATA[<img src="https://steph.ng/content/images/2019/09/shoe-3.jpg" alt="Shoe Rack Design"><p>In an effort to organize my shoes instead of leaving them in a pile, I decided to build a shoe rack for my room. It needs to be easily disassembled and use minimal materials. Because I study far from home, I move between my dorm and a summer home every year. Any extra furniture I own needs to be compact and lightweight. With these ideas, I began to sketch up some designs.</p><!--kg-card-begin: image--><figure class="kg-card kg-image-card"><img src="https://d33wubrfki0l68.cloudfront.net/e485367dccdb500d19ab56b0701b63acab3b3d84/6e5d1/assets/portfolio/shoe-drawing.jpg" class="kg-image" alt="Shoe Rack Design"></figure><!--kg-card-end: image--><p>I started with the standard design of four supports and some slanted racks. Then, I reduced it to use only two supports. The bottom rack forms a triangle with the supports to act as a stand. Since shoes are lightweight, I could trade some structural stability for using fewer materials. As I sketched, I came up with the idea to include a mesh bag to hold all my socks for easy access.</p><!--kg-card-begin: image--><figure class="kg-card kg-image-card"><img src="https://d33wubrfki0l68.cloudfront.net/5f5064b19e259c50d0789013968540e14e695ce4/81edd/assets/portfolio/shoe-2.jpg" class="kg-image" alt="Shoe Rack Design"></figure><!--kg-card-end: image--><p>I gathered the supplies and took them to a woodworking shop on campus. After cutting the wood, I did a quick test assemble with some of my shoes.</p><!--kg-card-begin: image--><figure class="kg-card kg-image-card"><img src="https://steph.ng/content/images/2019/12/DSC_0140-3.JPG" class="kg-image" alt="Shoe Rack Design"></figure><!--kg-card-end: image--><p>It worked and was able to carry the weight of the shoes, so the next step was to polish it.</p><!--kg-card-begin: gallery--><figure class="kg-card kg-gallery-card kg-width-wide"><div class="kg-gallery-container"><div class="kg-gallery-row"><div class="kg-gallery-image"><img src="https://steph.ng/content/images/2019/12/IMG_20171206_091859_226.jpg" width="3292" height="1792" alt="Shoe Rack Design"></div><div class="kg-gallery-image"><img src="https://steph.ng/content/images/2019/12/DSC_0179.jpg" width="3840" height="2160" alt="Shoe Rack Design"></div></div><div class="kg-gallery-row"><div class="kg-gallery-image"><img src="https://steph.ng/content/images/2019/12/DSC_0180.jpg" width="3840" height="2160" alt="Shoe Rack Design"></div><div class="kg-gallery-image"><img src="https://steph.ng/content/images/2019/12/DSC_0181.jpg" width="3840" height="2160" alt="Shoe Rack Design"></div></div></div></figure><!--kg-card-end: gallery--><p>There is a number of improvements I would make.</p><ul><li>Instead of using sticky tack to hold the racks to the supports, I could simply cut out notches on the sides of each rack. [Update: this was completed!]</li><li>The racks themselves are a little flimsy, so I would use a thicker board. The slanted supports is a good idea, but it's a bit too unstable and tends to wobble. Using a thicker board should also fix it.</li></ul><!--kg-card-begin: image--><figure class="kg-card kg-image-card"><img src="https://d33wubrfki0l68.cloudfront.net/188b57a5cca7c9f7fe0e9685f127342e664d8e68/fc727/assets/portfolio/shoe-1.jpg" class="kg-image" alt="Shoe Rack Design"></figure><!--kg-card-end: image-->]]></content:encoded></item><item><title><![CDATA[Web Development @ F5Works]]></title><description><![CDATA[<p>Duration: Jan - May 2017</p><p>I had decided early on to take a gap year after high school, and one of my goals was to complete a software internship. In December, I sent out a few hopeful resumes with no experience other than some demo projects on Github. I was</p>]]></description><link>https://steph.ng/summer-2017-web-development/</link><guid isPermaLink="false">5d59f64fd2234b0980316ddc</guid><category><![CDATA[software]]></category><dc:creator><![CDATA[Stephanie Ng]]></dc:creator><pubDate>Wed, 16 Aug 2017 09:17:00 GMT</pubDate><media:content url="https://steph.ng/content/images/2019/08/IMG_20170420_225241_313.jpg" medium="image"/><content:encoded><![CDATA[<img src="https://steph.ng/content/images/2019/08/IMG_20170420_225241_313.jpg" alt="Web Development @ F5Works"><p>Duration: Jan - May 2017</p><p>I had decided early on to take a gap year after high school, and one of my goals was to complete a software internship. In December, I sent out a few hopeful resumes with no experience other than some demo projects on Github. I was surprised when a response came back, requesting an interview. Then another. A week later, I had landed my very first job at a web/app development agency.</p><p>My first task was to create an alert modal for a mobile app, and I had no idea where to start. I knew the basics of Javascript but have not used a framework such as Angular or Ionic. The only way I was able to write new code was to find a similar function somewhere, copy it, and modify it.</p><!--kg-card-begin: image--><figure class="kg-card kg-image-card"><img src="https://steph.ng/content/images/2019/08/10Life-2.png" class="kg-image" alt="Web Development @ F5Works"></figure><!--kg-card-end: image--><p>All of the web projects used an API endpoint library that the senior developers had created. It was the most difficult to understand. To make sense of what it was doing, I global-searched functions and followed them deep into the codebase.</p><p>Frontend web development was only the beginning. It was not long before I was given some backend tasks to do, and I had never written a line of Ruby code. Though I was given a tutorial book to read about database operations, it became apparent that the fastest and most engaging way to learn was by trying to understand existing code.</p><p>As things gradually fell into routine, five months passed by before I knew it. I was now able to complete tasks that I used to find impossibly challenging. At the start, I would choose tasks based on how easy they seemed, but now I picked them based on how interesting they were.</p><!--kg-card-begin: image--><figure class="kg-card kg-image-card"><img src="https://steph.ng/content/images/2019/08/fasdfasdf.png" class="kg-image" alt="Web Development @ F5Works"></figure><!--kg-card-end: image--><h2 id="takeaways">Takeaways</h2><p><br><strong>I learnt how to maintain focus.</strong><br>This was my first job, and I was not used to this kind of intense programming for eight hours a day. During this internship, I had built up stamina and could now maintain focus for long periods of time. This helped tremendously in the next internships and during college.</p><p><strong>I optimized my coding workflow.</strong><br>Since I was spending so much time in the code editor and terminal, I put in the effort to customize every part and memorize as many shortcuts as I could. It was worth it. I became much faster at navigating code and getting to whichever file I needed. After three years, I'm still using the same code editor (vim) and its plugins.</p><p><strong>It's ok to ask more questions.</strong><br>I was concerned that I would come across as a total beginner if I asked too many questions. In the end, I learned that it was perfectly fine to do so, being an intern.</p>]]></content:encoded></item></channel></rss>