👋🏼 Hi! This is a collection of AR experiments by cwervo.
You can click the links below to go to each of the experiments and hit the question mark in the bottom left corner to get more info on how to see each experiment - each one requires a marker of some sort, a couple accept multiple markers, but usally you'll be looking for . You can also go to accompanying Medium post if you'd like to see videos of each experiment!
#ARctober 2017 pieces:
- Day 1 - a torus-knot winding & unwinding
- Day 2 - a shader on a sphere that changes a bit when you click or tap on the screen!
- Day 3 - This experiment utilizes the experimental Web Speech API (if your browser supports it) with some text-geometry! The voice is picked based on the syllable count of the randomly generated word.
- Day 4 - Today's experiment is all about planets! 🌏🌍🌎 I was inspired by this wonderful collection of space globe textures, which pointed me to NASA's database of solar system maps, which I ended up using for all the textures in the demo. Additionally, this is my first proper UI experimentation in AR - it has a slider at the bottom of the screen (out of the way, convenient for mobile users) that shifts the position of the planets, effectively acting as an AR scroll mechanism!
- Day 5 - Today's experiment is a motion study using triangle-faced tetrahedrons! This is in the same vein of work at Bees & Bombs popular GIFS, and I was specifically inspired by the motion seen in this tweet.
- Day 6 - This interaction experiment is a remix ofday two's shader experiment, except this time I'm using Hammer.js to read in the delta of the x position and scale the sphere up or down (with some clamping between 0.1 and 6). This sort of interaction makes phone-based AR more interesting I think, and I hope to incorporate it more in my future work!
- Day 7 - This dodecahedron has an "outline" that bounces in and out for today's experiment! I was inspired by Lee Stemkoski's early Three.js outline demo using a copy of a box or sphere with some small scale above the original mesh (e.g. 1.01) and setting the copy's rendering side to "back". This is basically the technique I used for this outline component - you can see the source code by remixing this glitch or take a look at this gist :)
- Day 8 - A combination of the wiggle-shader experiment & day one's torus animation experiment.
- Day 9 - A puppy-GIF-filled experiment!
- Day 10 - Another GIF - this time messing with the marker itself!
- Day 11 - A zoetrope! This is more like an emulation of a zoetrope, in that the frames simply replicate the motion of a zoetrope - that is, the frames are traveling in a circle as a high speed. I originally prototyped this as a VR zoetrope demo, where the intention is you could build a more physical representation, and maybe even connect the speed of spinning to a swipe interaction, to replicate the original zoetrope interaction. This animation specifically is Horse In Motion
- Day 12 - An animated pirouette made of spheres! This one is using motion capture data from the CMU Graphics Lab Motion Capture Database and the smaller skeleton is the helper from the THREE.js SkeletonHelper, while the blue spheres are my own simple recreation.
- Day 13 - Playing around with Kinect point cloud data! I revisted an A-Frame point cloud experiment I did earlier this year with my friend Sage Jenson for this experiment - I was trying to push the limits in terms of geometry and scene-size for marker-based AR with this one.
Day 14 - This random pattern generator scene is using a 10PRINT-like algorithm to generate walls of planes that stack up on each other!
Day 15 - This "blue sky" scene shows off how changing just a few parameters in an algorithm (e.g. day 14's 10PRINT inspired piece's color & shape) can produce a idfferent result, which is helpful for producing a lot content with unique variety!
Day 16 - Tori appearing with random colors & radii, but interactive! Using the slider from day 4 in this experiment you can mess with the spawning rate of the tori!
Day 17 - Some floating imaginary organs! These imaginary organ 3D models were created by Presstube.
- Day 18 - A floating layered illustration! I'm interested in pop-up book like aesthetics for AR, and I think this experiment is working toward that goal, a 21st century hand-drawn experience :) The original illustration is by Niels Sinke.
- Day 19 - Spinning arcs! Inspired by yesterday's illustration collaboration, I made these arcs in Illustrator & animated them using the A-Frame animation component.
- Day 20 - Another art collaboration! This time I animated some sliced up images from a piece by Trauma Doll
- Day 21 - Playing around with gradients. I made these little gradients in Photoshop and thought they played around nicely with each other, so I decided to put them in AR!
- Day 22 - A prototype for a comic idea. I've been thinking about augmented reality comics lately & this is the first step toward that idea: overlaying an image of a face on top of a skull GIF.
- Day 23 - Some rotating furniture! This experiment pulls in a random furniture.3d.io piece into a little spinning AR asset! Hoping to revisit this idea with physics or more animation.
- Day 24 - A "holographic" meme-collage. This is another collaboration with Trauma Doll, this time using randomly generated animation, more layers, and slight opacity to get the layers to appear through each other, creating a more interesting effect.
- Day 25 - More GIFS, this time from the 90's! I was feeling nostalgic, so I took a few GIFs from the Internet Archive's Gif Cities project to make an AR experience that's an interesting toy - it adds more GIFs each time you click/tap & they get closer to you the more there are.
- Day 26 - A paper airplane experiment! This is a rather involved animation because it has a hand-drawn illustration (the paper airplane) moving along a path.
- Day 27 - A Stranger Things inspired scene! While appropriate for today (the premiere of season 2 of the show) this scene also shows of the use of red lighting to achieve a similar effect as in the title screen, as well as dramatic lights by the rotating waffles — so I actually got to play around with some new techniques!
- Day 28 - Another collaborationw ith the artist Trauma Doll! This one generates a balloon with a different color & then sends it floating along a path, a relatively complicated animation that was simple to achieve with a few components like aframe-alongpath-component & Kevin’s animation component!
- Day 29 - A birthday-themed experiment! This one generates a balloon with a different color & then sends it floating along a path, a relatively complicated animation that was simple to achieve with a few components like aframe-alongpath-component & Kevin’s animation component!
- Day 30 - A generative line sculpture! This experiment is a concept for a generative AR sculpture. There are lines generated on some Catmull–Rom splines defined by a set points, starting with 3 points. Every couple of seconds a point gets added, while every 4 seconds a point gets deleted. Red & blue lights along with rotation complete the AR kinematic sculpture.
- Day 31 - A jack-o-lantern 🎃 with a mysterious floating light inside! Using a jack-o-lantern model from misfit410 on Sketchfab I put a little light on a curve path (using the same component as day 30) & messed around with the lighting on the outside of the pumpkin to achieve the inside light glowing effect. This is the last experiment for #ARctober 2017