By Carl Heaton on

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.   chrome experiments

What are Google Chrome Experiments?

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. I certainly feel more intrigued to learn creative web coding programs now, because the outcome can be so awesome. Google Chrome Experiments are experiments being displayed in a showcase, each submitted by its creator, and made using open source technologies. It’s based on web browsers, interactive programs, and artistic projects that you can view and play with online. Launched in March 2009, Chrome Experiments is an official website that was originally meant by Google to test the limits of JavaScript and the Google Chrome browser’s performance and abilities. Its role of showcasing and experimenting latest open-source web-based technologies (majorly using JavaScript, HTML5, WebGL, Canvas, SVG, CSS) has work alongside with accelerated progress. Its aim is to inspire the creative coding community who anyone who’s interested in experimenting creatively with the web, and to prove that the programming can be fun.

Wormz

WORMZ 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

OLD SKOOL TUNNEL Old School Tunnel uses JavaScript, HTML5 and Canvas. To appreciate this site, you’d have to challenge your imagination. If you’ve been to Disneyland, imagine the Space Mountain (indoor roller coaster) ride. Enough said. If you haven’t been, watch the rotating old school tunnel in front of your air conditioner at minimum temperature & highest fan speed, play some upbeat techno music, and sit on a rocking chair. Yeah, that’d be pretty close. To turn it into a demo scene, just play your favorite song, and change the aspects in the control box to adjust color, add/subtract amount of segments, and meet your desired speed of movement. I suggest you hide the control box and hit Full Screen Mode. Just stare at it for a little while. It’s really awesome & hypnotizing.

Stereographic Streetview

Streetview Stereographic Stereographic Streetview uses WebGL & JavaScript. Pick any spot in the world and you’ll get to see it in stereographic projection or a spherical panorama. If you’re familiar with photography, its effect is a combination between a circular fisheye lens & full-frame fisheye lenses. In other words, it gives you a full-frame hemispherical result, which is also achievable by using the filter tool in Photoshop. Fun Chrome experiments.

Glass Shader

GLASS SHADER Glass Shader also uses WebGL & JavaScript. It features refraction, reflection, fresnel effect and chromatic dispersion. It truly blew my mind away. Imagine being up in the air (sky’s the limit, and the world at your feet, literally). It’s a 3D environment with a see through glass skull in the middle of the screen. You can look around 360 degrees by moving your mouse.

CSS Zoetrope

ZOETROPE 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.

Pronunciation Game

PRONUNCIATION GAME This Pronunciation Game uses JavaScript & HTML5 Speech Input. Let’s admit it, we’ve all been there. I find the tagline to this site really amusing. It says, “If Google can understand you, anyone can”. This site uses a speech recognition technology, so all you need to do is speak into your microphone and read out each word that comes up. You’ll get 3 attempts for each word. I bet some of you will be intrigued to throw in some silly accent or mumble on the first 2 attempts. Go ahead, feel free and try it out!

WebGL Water Simulation

WebGL Water 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.

Textify.it

Textified Image 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 “!@#?”

Font Bomb

FontBombz God bless JavaScript & CSS for Font Bomb! Don’t we all feel like blowing up something when we get stressed out? This one allows you to blow up a webpage (only visually, unfortunately, but better than nothing right?). You’ll get to plant as many bombs as you want. Each has a 3 second countdown before it explodes. Go on and freak your co-workers out. Fire in the hole!

Sticky Thing

Fun Chrome Experiments. You can throw this pink gooey thingy around the monitor and adjust its stickiness, stiffness, size and gravity level. Sticky Thing uses JavaScript, Canvas and CSS3. If you used to be obsessed in throwing sticky toys that crawls down the wall, this one is an absolute must!   STICKY

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.

carl68

About The Author

Carl

He is our senior instructor and originally from Manchester UK. Carl teaches our Web Design and Online Marketing Courses.

Do you have ideas you want to grow?

We run design courses and here in Bangkok that will
bring life to your ideas.

tick

20+ courses taught by industry experts trainers. Learn how to create a website from scratch, a full branding guideline or how to master SEO.

tick

Now you can learn online and all our courses with come with fantastic worksheets, video tutorials and you get as much support as you need.

tick

We are a fully accredited school by the Ministry of Education and soon we will offer a full Education Visa allowing you stay in Thailand.