https://jules.technology Julien Kris Tue, 02 Jul 2024 19:04:52 +0000 https://jules.technology en https://jules.technology/Processing-Foundation-Tutorial-Development Tue, 02 Jul 2024 19:04:52 +0000 Julien Kris https://jules.technology/Processing-Foundation-Tutorial-Development Processing Foundation Tutorial Development Year: 2023-2024Roles: Developer Relations Engineer, Tutorial Developer, Technical Writer Full credits︎︎︎ The Processing Foundation approached me to develop fresh p5.js tutorials for their newly redesigned website. I designed and developed the Drawing chapter of their Tutorials page, structured around the p5.js Technical Writing Guide &amp; Accessibility Guidelines.As a culmination of this work, I was invited to attend the Open Source Arts Contributors Conference︎︎︎ in Denver, where I gave talks, facilitated workshops, and built community with fellow developers. <img width="2100" height="1360" width_o="2100" height_o="1360" data-src="https://freight.cargo.site/t/original/i/c667c3b6e5ceac6dbc969a92aa91817cabf94fb5e254d5c1462425f6f2d7ade0/Screenshot-2024-07-02-at-3.25.50PM.png" data-mid="214014316" border="0" src="https://freight.cargo.site/w/1000/i/c667c3b6e5ceac6dbc969a92aa91817cabf94fb5e254d5c1462425f6f2d7ade0/Screenshot-2024-07-02-at-3.25.50PM.png" /> Color Gradients Tutorial︎︎︎ Custom Shapes and Smooth Curves Tutorial︎︎︎ https://jules.technology/Reddit-Games Mon, 29 Apr 2024 17:32:39 +0000 Julien Kris https://jules.technology/Reddit-Games Reddit Games Year: 2023-2024Roles: Product Manager, Technical Lead, UX Engineer&nbsp; Studio Lead: Chloe Ward Producer: Rohaina Hassan Full Stack Developer: James Lee Front End Developer: Stacy Yuan UX &amp; Creative: Natasha Dzhola Illustrator: Wei Chen Creative: Connie Van Animation: Mac Wojcik Feed Me is a multi-player competitive pet growing game built on Reddit’s Developer Platform, built by Reddit’s Creative Studio Team. Developer Platform is a new way of making custom posts on Reddit. Where users could previously make text posts or polls, they can now create custom games, animation, leaderboards, and boundless other types of interactive posts using the platform.Feed Me mixes individual decisions, aggregated team moves, and an urgent sense of competition to create a compelling gameplay experience.&nbsp;Inspired by pet games, furbies, and r/awww, we created simple, delightful actions players take to grow their pet.&nbsp; Game Mechanics As players join Feed Me, they are randomly assigned one of four animal teams: Cat, Narwhal, Frog, or Duck. Once per turn, they can either feed their character bananas to help them grow to the great beyond, or throw poop at the other characters to push them back to earth.&nbsp;We tested how to gamify a common goal and encourage users to rally around it.&nbsp; We implemented simple buttons, quick actions, and cool down mechanisms to urge players to return to the game over and over. Streaks When each user clicks the banana or the poop button multiple times in a row, we begin counting them as streaks. This triggers the combo animation, which counts up to five. Once the user reaches five streaks, the animal they’re targeting either moves up five points with a supercake animation for banana combos, or moves down five points with a superpoop animation for poop combos. Multiplayer &amp; Leaderboard Within each team, each player’s moves (whether they click banana or poop that turn) are added together and affect the height of the animals on the screen in real time. Each player gets one move per turn, with a cooldown period in between, and must coordinate with their team to strategically race their animal to space while keeping other teams close to the ground.The leaderboard shows the rankings for most bananas and most poops thrown by each user on your team. Our team tracked the points for each user, and attached them to their username. The total number of bananas or poops are added together at the bottom. Users can toggle between viewing the banana leaderboard and the poop leaderboard.&nbsp; https://jules.technology/Meta-x-Dior Fri, 28 Apr 2023 19:24:51 +0000 Julien Kris https://jules.technology/Meta-x-Dior Meta x Dior Year: 2022Role: Creative Technologist (AR Developer)&nbsp; Full case study &amp; credits︎︎︎ Dior wanted sparkle and shine for the holidays, so we collaborated with Meta to bring some elegant AR wonder to their holiday campaign: Dream in Dior. Four site-specific experiences in Seoul and Paris, an at-home experience, and a point-of-sale experience across hundreds of locations adorned and transformed multiple environments through a blanket of stars, glittering artworks, and ornate visual feasts. <img width="2692" height="2692" width_o="2692" height_o="2692" data-src="https://freight.cargo.site/t/original/i/3b7a4453a1d9024bcd432cb0db46b0a876a7e0c40476096a9dbe2de917ce0f84/06_Dior_OTS_Flagship-act-i-seoul_03.jpg" data-mid="177076397" border="0" src="https://freight.cargo.site/w/1000/i/3b7a4453a1d9024bcd432cb0db46b0a876a7e0c40476096a9dbe2de917ce0f84/06_Dior_OTS_Flagship-act-i-seoul_03.jpg" /> Paris Pop-up "L’atelier des Reves" was a magical holiday pop-up in a historic mansion on Paris’ beautiful Parc Monceau. Over several weeks, Dior completely redecorated the mansion, creating a workshop of dreams. Guests enjoyed two acts of bespoke AR, which — for maximum immersion — had been designed for, and calibrated to each room, Le Grand Salon and L’Espace Parfums.Act I in Le Grand Salon launched from an image target that the guest scanned on a freestanding stele. A trail of stardust leads the guest to pivot and observe the ceiling around the room’s central chandelier, located above the lavishly decorated dining table. The room’s ceiling was replaced with an endless starry dome of Pietro Ruffo’s imagination. Guests explored the celestial subjects by tapping them, bringing them to life through animation.In Act II, upstairs in the L’Espace Parfums, guests set themselves among the heavens while interacting with the shimmering, falling stars. <img width="2732" height="2720" width_o="2732" height_o="2720" data-src="https://freight.cargo.site/t/original/i/56a004af34a1ca1e99dfa28196d7544e4d2fd5037092e684563bb5e3e127fb12/02_Dior_Paris_ActI_still_2.png" data-mid="177433934" border="0" data-scale="99" src="https://freight.cargo.site/w/1000/i/56a004af34a1ca1e99dfa28196d7544e4d2fd5037092e684563bb5e3e127fb12/02_Dior_Paris_ActI_still_2.png" /> Seoul The Seoul activation led shoppers on a dazzling journey configured to the store's layout. Act I of the experience begins in the Chandelier Room, where Pietro Ruffo's constellation artwork lights up and beams brightly above the J'Adore Chandelier. Act II, in the Dinner de la Colle Noir, is a second experience with sparkling, falling stardust that blankets users as they interact with the environment. <img width="2760" height="2720" width_o="2760" height_o="2720" data-src="https://freight.cargo.site/t/original/i/a9c695a3568122413dbc44c08a5d4e7d2574b19c963da0837d6b25356013befa/08_SeoulDining_2.png" data-mid="177433935" border="0" data-scale="99" src="https://freight.cargo.site/w/1000/i/a9c695a3568122413dbc44c08a5d4e7d2574b19c963da0837d6b25356013befa/08_SeoulDining_2.png" /> Dior Constellations Dior Constellations is an AR reimagining of Pietro Ruffo’s intricate artwork available to interact with hundreds of Dior beauty point of sale locations. We were tasked with bringing the figures in the two-dimensional etched illustration to life through animated interactive constellations.To keep the AR effects performant, we kept the animation loops for our seven figures short and slow. We used baked animations for more complex assets that required it, like the constellations. We programmed particle animations and texture transition animations in Spark directly to fit within our constraints.We compressed all textures to work within the data budget before bringing them into Spark. Since we used multiple 4k and 8k textures for the sky domes in the scene, we used a custom patch to string together various 1k textures. <img width="990" height="2040" width_o="990" height_o="2040" data-src="https://freight.cargo.site/t/original/i/43311fc15e4715b361860651c5d9437eee482186588947bccc4ef0ce542644fe/Group-1982-up.png" data-mid="177433933" border="0" src="https://freight.cargo.site/w/990/i/43311fc15e4715b361860651c5d9437eee482186588947bccc4ef0ce542644fe/Group-1982-up.png" /> Dior Stars Dior Stars is an effect available globally that immerses users in a night sky featuring figures from Pietro Ruffo’s artwork. By interacting with the scene, users transform these constellations into the iconic Dior products Sauvage, J’Adore, or Miss Dior, while dispersing stars across the environment through touch gestures on their device.The defining feature of the Dior Stars is the product reveal/disappear transitions, which went through several rounds of experimentation and design to get just right. Our first attempt was a custom dissolve animation that gave us control over the extraneous details and visually matched how the filigrees (the ornate, intricate patterns) looked —but ultimately, it still felt too distracting as a transition. To synchronize with the client’s vision, we opted for a simple fade-in/fade-out of each of the main elements: the product materials, the constellations, and the filigrees.We combined Fresnel effects with custom glass shaders using multiple layers of render passes to simulate glass in real-time rendering with reflection and refraction faithfully. This combination helped create a differing reflectance on the surface of each product depending on the angle from which the viewer stood. Since our team wouldn’t have access to the Paris and Seoul venues until just a couple days before launch, we used blueprints from each location to map out the effects in Buck’s NYC Office weeks ahead of time. This ensured that the 3D animations in each of the four projects would be accurately mapped to the walls, ceiling height, table location, and centerpieces in each location. This process paid off once we arrived onsite -- our effects were just about perfectly mapped to the venues, and our onsite team only had to tweak a few coordinates before launch. <img width="3024" height="4032" width_o="3024" height_o="4032" data-src="https://freight.cargo.site/t/original/i/b2c6e102f480f5e16e73cd248c7d93e7ab788185f113ef4c24a9746700274493/nyc_office_floor_tape.jpg" data-mid="177433936" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/b2c6e102f480f5e16e73cd248c7d93e7ab788185f113ef4c24a9746700274493/nyc_office_floor_tape.jpg" /> https://jules.technology/BUCK-Sandbox-Identity Fri, 28 Apr 2023 19:24:53 +0000 Julien Kris https://jules.technology/BUCK-Sandbox-Identity BUCK Sandbox Identity Year: 2022-2023Role: Creative Technologist (Javascript, p5.js, Procedural Branding) Full case study &amp; credits︎︎︎ For our new R&amp;D-focused Instagram channel, BUCK Sandbox, we needed an identity that evoked the raw, experimental spirit of the initiative.&nbsp; Pushing Pixels with Code We leveraged p5.js to replace the square pixels with different sprites and create a modular grid to form the logo. We were then able to manipulate the grid with our cursor and produce a different logo just by wiggling our wrists.But we needed to find a middle ground to ensure readability and a cohesive design. <img width="2000" height="1487" width_o="2000" height_o="1487" data-src="https://freight.cargo.site/t/original/i/6ff89d8efd6e61d913e888907a12cf1467f630ae384bb0cf39d7f14a6eac76a6/6063ff7708cccc77b86dad4be972fc4f3a33b60f-853x634.png" data-mid="179884518" border="0" src="https://freight.cargo.site/w/1000/i/6ff89d8efd6e61d913e888907a12cf1467f630ae384bb0cf39d7f14a6eac76a6/6063ff7708cccc77b86dad4be972fc4f3a33b60f-853x634.png" /> <img width="2000" height="1887" width_o="2000" height_o="1887" data-src="https://freight.cargo.site/t/original/i/18f7affeb756293d5100621b55414b702eef4aea3b64f983922181916ad0fe06/c2537f7adc7f50c7efe96308069bba7b2b189cea-1118x1055.png" data-mid="179884519" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/18f7affeb756293d5100621b55414b702eef4aea3b64f983922181916ad0fe06/c2537f7adc7f50c7efe96308069bba7b2b189cea-1118x1055.png" /> <img width="2000" height="1521" width_o="2000" height_o="1521" data-src="https://freight.cargo.site/t/original/i/512e1fcf4e4ec8e4080766df15473f91b52e67e4ee66032f91416d83e0caba89/35e9bb28e6e6215ee3620d5a8d32136f30c2ee54-1370x1042.png" data-mid="179884517" border="0" src="https://freight.cargo.site/w/1000/i/512e1fcf4e4ec8e4080766df15473f91b52e67e4ee66032f91416d83e0caba89/35e9bb28e6e6215ee3620d5a8d32136f30c2ee54-1370x1042.png" /> <img width="2000" height="1465" width_o="2000" height_o="1465" data-src="https://freight.cargo.site/t/original/i/7ce18a7208b5271ddaae466efdd8d794234abb698ab63e9c09e2f973790b3712/0ec646506b282851ef51d0c045e39d7b77ada1e0-1600x1172.png" data-mid="179884791" border="0" src="https://freight.cargo.site/w/1000/i/7ce18a7208b5271ddaae466efdd8d794234abb698ab63e9c09e2f973790b3712/0ec646506b282851ef51d0c045e39d7b77ada1e0-1600x1172.png" /> Final Outcome Our final logo is comprised of squares and stars that can be distorted. The latter is mapped to the current day and time to give it a life of its own, setting up a routine of identity transformation for whenever we release a Sandbox post. As an additional interactive nugget, the CT team experimented with PoseNet to distort the logo based on the position of the user's nose. Some wacky face-dancing ensued, and the full circle of collaborative fun was complete. One Year Anniversary Refresh After 54 posts and one full year of this new community, we decided to revisit our identity—where a lot of the fun started—and give it a well-earned refresh. To get the ball rolling, Group Creative Director of Experience Michelle Higa Fox suggested we incorporate water as a theme, in reference to this being the Year of the Water Rabbit. Building on the foundation of our original identity, I created a glitch effect that integrated a water look to distort and wash away the logo. I matched the randomly generated color palette to the brand colors we used for the Instagram grid. <img width="750" height="1334" width_o="750" height_o="1334" data-src="https://freight.cargo.site/t/original/i/c59dec7f6af8e28c5ca0223023a302bec19fe6ee51e4264c550b72b945fbc1d0/IMG_1E2BE77C9AB1-1.jpeg" data-mid="179884508" border="0" data-scale="100" src="https://freight.cargo.site/w/750/i/c59dec7f6af8e28c5ca0223023a302bec19fe6ee51e4264c550b72b945fbc1d0/IMG_1E2BE77C9AB1-1.jpeg" /> <img width="720" height="720" width_o="720" height_o="720" data-src="https://freight.cargo.site/t/original/i/3768cf554cf2ac2fdab251df0c3bf26a1517314e8744757cdeed4345e0adcbee/logo_refresh.gif" data-mid="179886120" border="0" data-scale="87" src="https://freight.cargo.site/w/720/i/3768cf554cf2ac2fdab251df0c3bf26a1517314e8744757cdeed4345e0adcbee/logo_refresh.gif" /><img width="598" height="599" width_o="598" height_o="599" data-src="https://freight.cargo.site/t/original/i/306e62258ee365da91a72de66063dd6e4089cd819000936f75c1d98d00d34747/Screen-Shot-2023-05-24-at-9.39.15-PM.png" data-mid="179886564" border="0" data-scale="87" src="https://freight.cargo.site/w/598/i/306e62258ee365da91a72de66063dd6e4089cd819000936f75c1d98d00d34747/Screen-Shot-2023-05-24-at-9.39.15-PM.png" /> https://jules.technology/Meta-x-Murakami-at-The-Broad Tue, 23 May 2023 20:21:12 +0000 Julien Kris https://jules.technology/Meta-x-Murakami-at-The-Broad Meta x Murakami at The Broad Year: 2022Role: Creative Technologist (AR Developer)&nbsp; Full case study &amp; credits︎︎︎ As one of the most famous and beloved living artists, Takashi Murakami’s exhibitions always create a lot of excitement and fanfare. For his first solo exhibition at the Broad Museum in Los Angeles, Takashi Murakami: Stepping on the Tail of a Rainbow, BUCK was invited to collaborate with Meta on six site-specific AR experiences. Museum goers scanned QR codes to reveal AR artworks complementing Murakami’s physical installations.&nbsp; <img width="1400" height="788" width_o="1400" height_o="788" data-src="https://freight.cargo.site/t/original/i/3912114c07e463485ff7de79d2df55a3d89fed80bfbec8a07b5295238cea0703/Murakami_Thumbnail3.png" data-mid="179726129" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/3912114c07e463485ff7de79d2df55a3d89fed80bfbec8a07b5295238cea0703/Murakami_Thumbnail3.png" /> <img width="2000" height="3715" width_o="2000" height_o="3715" data-src="https://freight.cargo.site/t/original/i/27e3dde915b214db151dc5edf720cda128f923ede7b8099f0ff21dcc2055260a/9cac0ac43195a15caa1e2249c3f2e2d8897828c5-990x1839.png" data-mid="179729821" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/27e3dde915b214db151dc5edf720cda128f923ede7b8099f0ff21dcc2055260a/9cac0ac43195a15caa1e2249c3f2e2d8897828c5-990x1839.png" /> <img width="2000" height="1249" width_o="2000" height_o="1249" data-src="https://freight.cargo.site/t/original/i/2e5c02ddf7b5670e57bd3a12a619c9d5b8494709fc18e53cdfdcee65eda62145/47ec10fe3c66d294b58bdb96750e9cc8536f1945-3114x1944.png" data-mid="179730359" border="0" data-scale="97" src="https://freight.cargo.site/w/1000/i/2e5c02ddf7b5670e57bd3a12a619c9d5b8494709fc18e53cdfdcee65eda62145/47ec10fe3c66d294b58bdb96750e9cc8536f1945-3114x1944.png" /> <img width="2076" height="1226" width_o="2076" height_o="1226" data-src="https://freight.cargo.site/t/original/i/39b2250d09ed8bbab2a4e435f0f63b244c7aeb47ad3b58b2583a446db12578bc/Screen-Shot-2022-08-29-at-4.06-3iphone_2.png" data-mid="179726084" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/39b2250d09ed8bbab2a4e435f0f63b244c7aeb47ad3b58b2583a446db12578bc/Screen-Shot-2022-08-29-at-4.06-3iphone_2.png" /> <img width="990" height="1944" width_o="990" height_o="1944" data-src="https://freight.cargo.site/t/original/i/fb19d3b31137a145bf9b52736bf2a00befab1f0d91e1626a354a4f66e392c073/05Gallery01_device-1iphone_4.png" data-mid="179726060" border="0" data-scale="92" src="https://freight.cargo.site/w/990/i/fb19d3b31137a145bf9b52736bf2a00befab1f0d91e1626a354a4f66e392c073/05Gallery01_device-1iphone_4.png" /> <img width="1040" height="898" width_o="1040" height_o="898" data-src="https://freight.cargo.site/t/original/i/b52c36db561f5e0c055fb8f87ebc51c23988c14c5723b272abbbbb7c09298366/Framemap.png" data-mid="179728202" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/b52c36db561f5e0c055fb8f87ebc51c23988c14c5723b272abbbbb7c09298366/Framemap.png" /> <img width="2076" height="1168" width_o="2076" height_o="1168" data-src="https://freight.cargo.site/t/original/i/bb9e8b3819e681c0de5b41bf15d30ceb9011eae8dba7dbc6c6f5403f55415493/MurakamiBroadMeta_AR_PR_CloneXAvatarHIROPON_16x9_Landscape-1final.png" data-mid="179726083" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/bb9e8b3819e681c0de5b41bf15d30ceb9011eae8dba7dbc6c6f5403f55415493/MurakamiBroadMeta_AR_PR_CloneXAvatarHIROPON_16x9_Landscape-1final.png" /> <img width="990" height="1023" width_o="990" height_o="1023" data-src="https://freight.cargo.site/t/original/i/7d079aafab7944b3d205bad0a5ed78e8b665178a5f363888c078c3fc0b955de9/FLOWER_RND-1color_code.png" data-mid="179726065" border="0" data-scale="100" src="https://freight.cargo.site/w/990/i/7d079aafab7944b3d205bad0a5ed78e8b665178a5f363888c078c3fc0b955de9/FLOWER_RND-1color_code.png" /> https://jules.technology/BUCK-Research-and-Development Thu, 25 May 2023 19:52:15 +0000 Julien Kris https://jules.technology/BUCK-Research-and-Development BUCK Research and Development Years: 2020-2023 Role: Creative Technologist/Art Director As a Creative Technologist with a hybrid development/design background, I was often tasked with dreaming up R&amp;D projects to expand our tech capabilities. Passthrough Portals (2022) Unity project exploring the Oculus Quest 2’s passthrough capabilities. Collaboration with fellow Creative Technologists Haolin Fang and Anthony Enns. Character Design and 3D Modeling by Jesseter Wang and Katherine Guggenberger. <img width="1342" height="860" width_o="1342" height_o="860" data-src="https://freight.cargo.site/t/original/i/d9b7d72209f1924db3ab46bdd24191d98d6b58998727166d826643b2c6991f89/intro_sequence.gif" data-mid="179978940" border="0" src="https://freight.cargo.site/w/1000/i/d9b7d72209f1924db3ab46bdd24191d98d6b58998727166d826643b2c6991f89/intro_sequence.gif" /> <img width="288" height="512" width_o="288" height_o="512" data-src="https://freight.cargo.site/t/original/i/1f224bfb936d253ab41cfa05ae7ff095220cebd71b66ff3806398cd50ca58e0d/instructions_2.png" data-mid="179983205" border="0" src="https://freight.cargo.site/w/288/i/1f224bfb936d253ab41cfa05ae7ff095220cebd71b66ff3806398cd50ca58e0d/instructions_2.png" /> <img width="288" height="512" width_o="288" height_o="512" data-src="https://freight.cargo.site/t/original/i/d8d8af66d64f70560a84104b5e8b9caed7e5c50cd175d9d6b2aab0f9628855ea/instructions_3.png" data-mid="179983208" border="0" src="https://freight.cargo.site/w/288/i/d8d8af66d64f70560a84104b5e8b9caed7e5c50cd175d9d6b2aab0f9628855ea/instructions_3.png" /> <img width="900" height="1600" width_o="900" height_o="1600" data-src="https://freight.cargo.site/t/original/i/d8a999aff3188e64f09123baeb205d2a2205b010eb1eda855518d68ed01df39b/the_experience_3.png" data-mid="179983199" border="0" src="https://freight.cargo.site/w/900/i/d8a999aff3188e64f09123baeb205d2a2205b010eb1eda855518d68ed01df39b/the_experience_3.png" /> &nbsp; <img width="800" height="458" width_o="800" height_o="458" data-src="https://freight.cargo.site/t/original/i/5bede3dd704448930fd69b3abdd4e5a60baf91d76086d67a0f33ce9d78389117/screen_recording2.gif" data-mid="179979549" border="0" src="https://freight.cargo.site/w/800/i/5bede3dd704448930fd69b3abdd4e5a60baf91d76086d67a0f33ce9d78389117/screen_recording2.gif" /><img width="640" height="380" width_o="640" height_o="380" data-src="https://freight.cargo.site/t/original/i/d4e5cbb77e45409ef7b0a69be4632d575911d2e875c68d5d3d6cf98d0d1a3e7c/Nov-17-2020-17-10-46.gif" data-mid="179979046" border="0" data-scale="100" src="https://freight.cargo.site/w/640/i/d4e5cbb77e45409ef7b0a69be4632d575911d2e875c68d5d3d6cf98d0d1a3e7c/Nov-17-2020-17-10-46.gif" /> Banana Tone (2020) Full case study and credits︎︎︎ Banana Tone lets you scan, detect, and DJ with inanimate objects from your surroundings. It turns your room into a synthy musical playground. Built with Tensorflow.js, and tone.js. <img width="720" height="720" width_o="720" height_o="720" data-src="https://freight.cargo.site/t/original/i/200708bbbb0f2898ae25f0a1ab825b745b13e8bbdb06d0ca4d4bb9c05dc695ba/square_shortened.gif" data-mid="179989638" border="0" src="https://freight.cargo.site/w/720/i/200708bbbb0f2898ae25f0a1ab825b745b13e8bbdb06d0ca4d4bb9c05dc695ba/square_shortened.gif" /><img width="750" height="750" width_o="750" height_o="750" data-src="https://freight.cargo.site/t/original/i/010824f861bc4fc1c519e810dddf29b77f7d19fa3a749dd4539b76f398cf3f0c/IMG_4902.jpg" data-mid="179988156" border="0" data-scale="100" src="https://freight.cargo.site/w/750/i/010824f861bc4fc1c519e810dddf29b77f7d19fa3a749dd4539b76f398cf3f0c/IMG_4902.jpg" /> <img width="750" height="750" width_o="750" height_o="750" data-src="https://freight.cargo.site/t/original/i/f59fa153ca45e8006d70546009bc138e6b4e978a44c75a0ca3e4d3e4945bd550/IMG_4903.jpg" data-mid="179988154" border="0" src="https://freight.cargo.site/w/750/i/f59fa153ca45e8006d70546009bc138e6b4e978a44c75a0ca3e4d3e4945bd550/IMG_4903.jpg" /><img width="720" height="720" width_o="720" height_o="720" data-src="https://freight.cargo.site/t/original/i/341ea4f6fca00e118b232f6e5fe8bb0920c205f17e952f000b2be18057faee35/sandbox_story.gif" data-mid="179988863" border="0" data-scale="100" src="https://freight.cargo.site/w/720/i/341ea4f6fca00e118b232f6e5fe8bb0920c205f17e952f000b2be18057faee35/sandbox_story.gif" /> Banter with Buck Audio Visualizer (2022) We’d been experimenting with how to bring audio bites from our podcast, Banter with BUCK, to life on our social media. I created an audio visualizer with cables.gl to streamline the process and hand the power over to designers to easily create content.Designers can plug audio from the interviews into cables.gl, which generates an Instagram feed and story post with an animated asset that syncs audio to shape animation (by progressing through a sprite sheet based on audio levels), and then they download it straight from the project URL. https://jules.technology/Nike-50th-Anniversary Fri, 28 Apr 2023 22:02:06 +0000 Julien Kris https://jules.technology/Nike-50th-Anniversary Nike 50th Anniversary AR Year: 2022Role: Creative Technologist (Web AR Developer) Full case study &amp; credits︎︎︎ In celebration of Nike’s 50th anniversary, BUCK partnered with the Nike Global Brand Experience team to bring the brand’s past, present, and future to life in stores globally through a WebAR experience that captures the spirit of DNA (Department of Nike Archives) and supports the future of storytelling within the retail space. The AR experience is a portal into the DNA archives for visitors to Nike stores. Through the virtual display of culturally-significant artifacts from 11 stories, the experience encourages consumers to engage with Nike’s legacy. <img width="1400" height="2100" width_o="1400" height_o="2100" data-src="https://freight.cargo.site/t/original/i/de1b898bbff643579b170e96b5c92bb98ca506007e2bf4e021ff6aa6aa9606f1/44ea4830eae504de092e023870fd6d286c7b6de4-3413x5120.jpg" data-mid="179881161" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/de1b898bbff643579b170e96b5c92bb98ca506007e2bf4e021ff6aa6aa9606f1/44ea4830eae504de092e023870fd6d286c7b6de4-3413x5120.jpg" /> <img width="1400" height="2100" width_o="1400" height_o="2100" data-src="https://freight.cargo.site/t/original/i/2ae7452e9f879c268891a30e0b453dfac371e71c5deabd1d41a3d8b5bb6ac58c/074253c5416e87a7bbe176b103421bc4e5b9787d-3413x5120.jpg" data-mid="179881160" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/2ae7452e9f879c268891a30e0b453dfac371e71c5deabd1d41a3d8b5bb6ac58c/074253c5416e87a7bbe176b103421bc4e5b9787d-3413x5120.jpg" /> <img width="1400" height="2100" width_o="1400" height_o="2100" data-src="https://freight.cargo.site/t/original/i/7e1ebecfa9fa5a453b804c3ddf00cb671e11641948eabc46e17844776a8fec65/f241dcc26a0f9f7addd5fcc54f4048306cf85d98-3413x5120.jpg" data-mid="177079955" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/7e1ebecfa9fa5a453b804c3ddf00cb671e11641948eabc46e17844776a8fec65/f241dcc26a0f9f7addd5fcc54f4048306cf85d98-3413x5120.jpg" /> <img width="1400" height="933" width_o="1400" height_o="933" data-src="https://freight.cargo.site/t/original/i/517e36a05fb9793c772db8e8b6e00d777cf503205ca7544054870d42b41fde9f/6f4be4b450c6cb7c76af467dc627b7aa229b9526-6720x4480.jpg" data-mid="179881162" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/517e36a05fb9793c772db8e8b6e00d777cf503205ca7544054870d42b41fde9f/6f4be4b450c6cb7c76af467dc627b7aa229b9526-6720x4480.jpg" /> <img width="1400" height="934" width_o="1400" height_o="934" data-src="https://freight.cargo.site/t/original/i/d5c18a207624e85d88ae838b42ce45e526c51f8a7e4b8ceb0dbab85335c5025f/11921cb3b70cd09faddf5de8d93feeae71bf7cb0-8192x5464.jpg" data-mid="177079464" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/d5c18a207624e85d88ae838b42ce45e526c51f8a7e4b8ceb0dbab85335c5025f/11921cb3b70cd09faddf5de8d93feeae71bf7cb0-8192x5464.jpg" /> https://jules.technology/Twitch-Pokemon-Badge-Collector Fri, 28 Apr 2023 22:10:35 +0000 Julien Kris https://jules.technology/Twitch-Pokemon-Badge-Collector Twitch Pokémon Badge Collector Year: 2018Role: Art Direction, Motion, Prototyping Full case study &amp; credits︎︎︎ As Twitch was planning a ten-week marathon of Pokémon TV shows and movies on their Twitch Presents channel, Twitch came to Stink Studios to explore the untapped potential of Extensions to better engage fans and foster camaraderie among members of the Twitch community. We created a mini-game to turn the marathon into a live, collaborative, Pokémon badge-collecting experience.&nbsp; The Pokémon Badge Collector Extension allows tens of thousands of concurrent viewers to train alongside Ash and friends by catching and collecting Pokémon badges that appear in the stream—earning points, unlocking bonuses, and competing for a spot on the global leaderboard while they watch. The Extension consists of three main panels: the Inventory where collected Pokémon badges are stored, Stats &amp; Bonuses where viewers can track their progress, and the Leaderboard where the top twenty high-scorers worldwide are celebrated. <img width="3200" height="1796" width_o="3200" height_o="1796" data-src="https://freight.cargo.site/t/original/i/95815260f5e5581964100c49ffe8d861bb1dc5e892ac75ba274609cb897de736/TwitchUI.png" data-mid="180010041" border="0" src="https://freight.cargo.site/w/1000/i/95815260f5e5581964100c49ffe8d861bb1dc5e892ac75ba274609cb897de736/TwitchUI.png" /> https://jules.technology/Facebook-ScenesKits Tue, 23 May 2023 21:30:28 +0000 Julien Kris https://jules.technology/Facebook-ScenesKits Facebook ScenesKits Year: 2021-2022Role: Creative Technologist (AR Developer) Group Creative Director: Michelle Higa Fox 2D Animation Lead: Mercy Lomelin Creative Technology: Donovan Keith, Haolin Fang, Jules Kris, Kirin Robinson, Rozi Zhu Production: Alex Dos Santos, Alexandra Belsky Full Credits Coming Soon In 2022, Meta launched a new standalone app – ”Scenes”. They needed to populate the world with weird, wonderful virtual objects, and BUCK was just the team to call. ScenesKits is a collection of 2D and 3D animated stickers designed and developed to maximize delight. Using Spark’s plane-tracking technology, users enhance their environment by placing stickers from each kit on any surface they wish.&nbsp; https://jules.technology/Homepage Fri, 28 Apr 2023 19:24:54 +0000 Julien Kris https://jules.technology/Homepage Julien Kris is a Curriculum Developer &amp; Creative Technologist based in NYC. He is currently working with the team at Codédex to build a new generation of learning and playing experiences. You can contact him about full-time or freelance roles at hi.jules.kris@gmail.com