Being a web designer can be quite stressful sometimes. This article is dedicated to those who are having a ‘my brain is drained’ moment. I found 10 Chrome Experiments sites that can help you let loose for a bit, and recharge your creativity, or simply just for entertainment.
What are Google Chrome Experiments?
Wormz uses HTML5 and Canvas. Here you can drag and drop images (text, vectors, silhouettes) onto the screen, and it will play a slideshow of the images you’ve uploaded in a loop. What’s interesting is that your pictures get turned into a million green fluorescent swarm of worms! It’d also be cool to play it on a big projector with all the lights out and boost up your stereo. I think that’s what I might do next Halloween, and serve neon glowing gummy worms.
Old School Tunnel
An early animation device built entirely with CSS (3D-Transforms & Animation). CSS Zoetrope is an old timey black and white rotating picture machine. Set the background to black, turn all your lights out, and I recommend watching Steamboat Willie (among other options available on the site). You can play around with the rotational periods and angles to view this turn of the century(-ish) animations.
WebGL Water Simulation
Ever heard a saying, that water brings you peace & calm effect? Well, you believe that, then you can simply run the tab or visit a pond. WebGL Water Simulation makes you want to splash around and experiment like nuts. I know I did. It’s a 3D simulation of pool of water using WebGL, rendered with reflection, refraction, caustics, and ambient occlusion. The pool is simulated with a heightfield and contains a sphere that can interact with the water’s surface. You can make ripples, move the ball around, rotate the camera, play with light direction, toggle gravity, etc. So, jump in! Make a huge splash! This demo will only work on WebGL implementations with graphics cards that support floating point textures, screen-space partial derivatives, and vertex texture fetches. Google Chrome is currently the only browser that supports all of these.
How do I put Textify.it in words? Turns any image into a text portrait basically. It uses HTML5, Canvas and File API. You just need to upload an image and it’ll get ‘textified’. You can pick your font of preference, adjust font size, font weight, enter whatever type of characters, alphabets, and/or numeric you want to use. You can also enter the amount of characters you want. It ‘textifies’ any image you upload and allows you to save it. The ones I used was “[email protected]#?”
Got any ideas for your own experiment?
If you’re inspired and intrigued to come up with your own experiment/project, please check out our Web Development Training. Enhance your creativity with us.