This post is taken from my blog, so be sure to check it out for more up-to-date content 😉
I have written about how great current web development tools, libraries, frameworks etc. are right now many, many times in my previous posts. I've also talked about growing users demands for better UI, animation, experiences and all that stuff. So, I might have repeated myself some times by now, but IMHO it's just such a great time to be a web developer! What's more, I can assure you that the future looks even brighter! 🤯 With web on-going, rapid development, there are more tools, APIs, functionalities, and ideas available every day. And, in this article, I would like to showcase you what the future holds, or rather, what's possible with currently accessible tools! With that said, let's push the limits and explore some best of the best web experiments! Enjoy! 🚀
A word on Google dominance
Before we jump into all this awesome, futuristic stuff, let's first explore some background behind all this. More specifically I would like to talk a bit about the origin of these mentioned web experiments. These are more specifically known as Chrome Experiments or even more generally - Experiments with Google. Which brings us to, naturally, Google. 🙂
So, at the time of writing this post, Google Chrome is the most wide-used web browser on the market. Having control over more than half of the entire web browsers market, there's no doubt about its dominance. You might like it or not, but that's a fact. 🤔 If you think this kind of monopoly isn't good, then I can comfort you with only one more fact - it's not as bad as it was back in the IE times (90%+ market shares). 😅 And if you'd dig even deeper, you would find even more interesting stuff. Chrome is based on open-source project Chromium, which, besides Chrome itself, powers many other browsers, like Opera, for example. So, adding this up, Chromium-based browsers can have as much as 70% - 80% or more of market shares. And, with some rumors about Microsoft's Edge browser going to migrate to Chromium too, this number will most likely continue to grow.
With this data, we can clearly see, that the web browsers market is currently heading into Chromium-based standardization. I don't really know what to think about this all. On one hand, Chromium is implementing the latest features really fast and it's an open-source project. But on the other hand, most of its contributions and control over this project is in Google's hands, so that means that the web is so, too. And yet having a kind-of standard, without caring about cross-browser compatibility would be great, but... Yeah, I'll leave this for you to decide. 😉 It's not the topic of this post anyway...
The point of all this was just to show, what's going behind the scenes. Chrome Experiments I'm talking about are backed by Google and that's for one particular reason. Google, being the leader in web browsers industry, implements the latest standards and functionalities ASAP. And, as they wanted to display this fact, they created and backed-up Chrome Experiments.
Chrome Experiments introduction
So, what are these Chrome Experiments in-depth? Well, by now we know 2 things: it's a part of Experiments with Google and was created to display features of modern web standards that are constantly being implemented by the Chromium project. Now, which web features are we talking about? Well, quite a few actually. 🙂 Most of the experiments focus on WebGL (especially 2.0) and Web VR which are the latest trends. There are also examples of Web Audio API and Canvas API. Also, great many of these include some AI capabilities which also have their own Experiments with Google collection - AI Experiments. Yup, that's true, these experiments go way beyond the web with even more AI, VR/AR, and cultural stuff. But, as we're focusing on the web right now, these are just some side-notes. 🙃
If you didn't get what experiment stands for yet, it's just a nice showcase of the given feature. With that said, why should you even care about such things? There are a couple of reasons actually:
- Inspiration - Such experiences can definitely let you know about what's currently possible on the web. You can easily get inspired to create similar things yourself!
- Learning - The source code of great many of experiments is available for everyone! Thus, if something interested you, you can freely just grab the code and learn how to get the job done. 😁
- Entertainment - This one is obvious. Many of these experiments are very interesting. AI, image recognition, Web VR stuff, Web GL games, and all others provide just that - fun.
So, generally, an exploration of these experiments is nothing more than something new. So, if you have some free time, sit back, relax and go into any of the links below to experience the potential of the modern web! 🌟
Experiments
Biomes
Biomes created by Marpi is a WebGL experience that generates pixelated 3D biomes based on noise randomization. With additional colors, this demo looks stunning and definitely requires a good graphics card. 👍
The Chaos Game
The Chaos Game is yet another GPU-hungry demo. This time it is an attractor-based fractal generator ⚒ made using Canvas API and React by Andrew Wang-Hoyer.
VoxSculpt
VoxSculpt is a nice WebGL application that allows you to create your own Voxel-based 3D models. You can sculpt or paint the blocks one-by-one. You have access to different colors brushes and more. When you're done with your design, you can export it to image or ".vox" format. Made by Josh Shadik.
Paper Planes
Paper Planes is one of my favorite experiments. It's a WebGL experience where you can catch, stamp and create your own's and other's paper planes. You can use the PWA on your smartphone to do all those things with respective real-world gestures! You'll know what I mean when you'll try it yourself. 🎉 Sadly, there's no source code available for this one. But most likely the WebGL and Accelerometer, Device Orientation and Web Audio APIs were used. Made by Active Theory.
Cube
Cube is a little WebGL and Google Maps game. Here, you rotate your 3D cube with small 3D models of cities like New York and Tokyo on each side. Your task is to make the ball get to the right place. But, in general, the 3D cities cube is just so gorgeous to watch! ⚡ Made by Google Maps team.
Tendrils
Tendrils is a WebGL-based music particle-based visualizer. But there's more to this experiment than simple visualization (which in fact is stunning as well). You can actually interact with generated particles with your microphone (sound) and camera (movements). Now that's interesting, isn't it? Made by Eoghan O'Keeffe.
Origami simulator
Origami simulator is as the origami folding simulator. If you don't already know, origami is a Japanese art of paper folding to create different forms and models. With this tool, you can exactly see, how a piece of paper becomes a 3D origami model. You can also export the visualization and import SVG file with specified folding lines, to see your model visualized. Made by Amanda Ghassaei.
Teachable Machine
With Teachable Machine, we're entering the AI field. This experiment allows you to teach the machine to react to certain gestures (through the camera) with respective GIFs or sounds. It's really simple, but it can showcase you the magic behind AIs. With source code available and based on deeplearn.js (tensorflow.js predecessor) you can get into AI programming basics relatively easily. Made by Google Creative Lab team.
Quick, draw!
Quick, draw! is a simple AI-related game. What's basically going on here is, you're trying to doodle given drawing in the specified amount of time and AI (neural network) tries to guess what it is. It's interesting, especially the way it works under-the-hood. Sadly, we'll never know that as there's no source code available. Made by Google Creative Lab team.
Google Shadow Art
Google Shadow Art is a truly impressive experience. It was created with the help of tensorflow.js AI. Here, the neural network tries to guess what shadow are you trying to create (with the help of camera) and displays the illustration for that. It's really interesting, especially with source code available! Made by Google ZOO & bit.studio teams.
Semi-Conductor
With Semi-Conductor, you can become the conductor of your own virtual orchestra! Just move your baton in front of the camera and hear the music. Made by Google Creative Lab team with help of AI - tensorflow.js and PoseNet.
Bagan
Bagan is an immersive WebGL and Web XR visual experience. It's an impressive tour of old temples and cultural monuments. It takes advantage of the latest Web XR API, so be sure to enable it in your flags before continuing. And, enjoy the view! Made by Google Art & Culture team.
There's more!
So, above you have some of my personal bests of Chrome Experiments. Did I miss some? Probably a thousand or more. 😂 The point is, there's a lot more for you to discover and this article to handle. Just remember to keep an open mind and get inspired by the work of others. Also, if you want, you can contribute to this enormous collection of demos, by submitting one of your own! That's all for now. 🌟
As always, if you liked this post, consider checking out my personal blog. Also, follow me on Twitter and on my Facebook page for more interesting content. 😁
Top comments (0)