https://jules.technology Julien Kris Fri, 03 Jul 2026 18:24:14 +0000 https://jules.technology en https://jules.technology/Codedex-1 Fri, 03 Jul 2026 18:24:14 +0000 Julien Kris https://jules.technology/Codedex-1 Codédex Year: 2024-PresentRole: Senior Curriculum Developer codedex.io︎︎︎ Select Projects: Make a Baldur’s Gate 3 Mod with Lua (Tutorial) ︎︎︎ “The Internet’s Still My Girl, Despite Everything” with Jenn Schiffer (Podcast Host) ︎︎︎ Build Cher's Closet From Clueless (Tutorial)︎︎︎ Add Time Travel to Games with Phaser (Tutorial) ︎︎︎Build a Chat Game in p5.js (Tutorial) ︎︎︎ Intro to Game Dev with Phaser (Live Workshop)︎︎︎Creative Coding with p5.js (Panel Host) ︎︎︎ Game Dev with Phaser (Course) ︎︎︎Intro to C# (Course) ︎︎︎Intro to Node.js (Course) ︎︎︎Meet The Codédex Crew: Julien (Interview) ︎︎︎Coding The Web From Scratch (Blog) ︎︎︎ Building interactive coding courses &amp; community for 2M+ developers at Codédex. <img width="1512" height="1058" width_o="1512" height_o="1058" data-src="https://freight.cargo.site/t/original/i/f9796109f1a1558ee19a89c2430ecc863441ea24989b2f0180b6de4aa7dd76fc/Screenshot-2026-07-03-at-2.11.15PM.png" data-mid="250054044" border="0" src="https://freight.cargo.site/w/1000/i/f9796109f1a1558ee19a89c2430ecc863441ea24989b2f0180b6de4aa7dd76fc/Screenshot-2026-07-03-at-2.11.15PM.png" /> 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/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/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/Homepage Fri, 28 Apr 2023 19:24:54 +0000 Julien Kris https://jules.technology/Homepage Julien Kris is a Curriculum Developer, Developer Advocate, &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 for 2M+ developers. You can contact him about full-time or freelance roles at hi.jules.kris@gmail.com