General – CreativeJS http://creativejs.com The very best of creative JavaScript and HTML5 Wed, 03 Jun 2015 20:19:39 +0000 en-US hourly 1 https://wordpress.org/?v=4.4.1 CreativeJS workshops back and updated http://creativejs.com/2014/10/creativejs-workshops-back-and-updated-for-2014/ Tue, 07 Oct 2014 17:14:20 +0000 http://creativejs.com/?p=6216 Continue reading ]]> Two CreativeJS workshops are back and updated! The first, CreativeJS for Designers is aimed at creative people who have never done any JavaScript programming. I learned to code by drawing pictures and animating stuff, and it’s seriously fun – the best way for creative people to get started in programming in my view.

The second is the return of the original CreativeJS workshop – JavaScript Graphics and Animation, updated for 2014. Just as you’d expect, there are all kinds of visual effects and advanced interactions. A great way to improve your JavaScript and it can really help to renew your excitement about programming.

Tickets go on sale on Tuesday 14th at 11am UK time. Register your interest on the ticket page for a reminder email.

PS if you can’t get to the UK, then mini online courses are coming – sign up to the mailing list to be the first to hear.

More info on the CreativeJS training page.

]]>
One Human Heartbeat http://creativejs.com/2014/03/one-human-heartbeat/ http://creativejs.com/2014/03/one-human-heartbeat/#comments Thu, 27 Mar 2014 10:00:21 +0000 http://creativejs.com/?p=6193 Continue reading ]]> Data scientist Jen Lowe literally put her heartbeat up on the Internet. One Human Heartbeat is a site that pulses as her heart beats – or at least on a 24 hour delay. Statistics in the bottom left of the screen show her BPM and even expected days remaining. Heavy.

Jen describes it better than I ever can:

I’ve put my heartbeat on the internet.

It’s March 25, 2014 and the best technology I’ve found to save my heartrate is the Basis watch. It saves an average heartrate for each minute. It fails to record any heartrate for ~17.5% of minutes. When there is no data for a minute, you’ll see the heartrate from the previous minute.

This really works for me on a number of levels. Obviously there’s neat tech, described in her writeup on what’s involved, but there’s also something about connecting herself to her work in this way that feels really thoughtful and inspired. It’s one thing to say that as a society we’re always connected to the Internet – this is something else entirely. There’s something to be said here about privacy, personal data and openness. Yet more on healthcare. I’m not sure exactly how to describe what Jen has done here but it feels like there’s something soulful and refreshing in this project to me.

One Human Heartbeat by Jen Lowe

]]>
http://creativejs.com/2014/03/one-human-heartbeat/feed/ 1
Urban Jungle Street View http://creativejs.com/2014/03/urban-jungle-street-view/ http://creativejs.com/2014/03/urban-jungle-street-view/#comments Mon, 24 Mar 2014 10:00:56 +0000 http://creativejs.com/?p=6187 Continue reading ]]> Einar Öberg, Technical Director at North Kingdom put together a lovely experiment that generatively adds trees, ferns and other jungle-like matter to Google Street View. What’s particularly nice about it is that the effect has appropriate depth – vegetation scales back toward the horizon as if it were in the photo all along, and of course you can move and pan around. He explains the technique himself:

This experiment using an undocumented part of Street View, the depth data. With that a depth map and a normal map is generated, which can be used in the shaders and to plot geometry and sprites in (almost) the correct position in 3d space.

Considered alongside Hyperlapse and Little Planet, Street View has become one of the most fun and interesting corners of the web to explore and hack. Can’t wait to see what’s next!

UPDATE: Here’s a writeup by Einar himself on the technical details.

Urban Jungle Street View by Einar Öberg

]]>
http://creativejs.com/2014/03/urban-jungle-street-view/feed/ 3
The Arbitrary Logo http://creativejs.com/2014/03/the-arbitrary-logo/ Sat, 08 Mar 2014 10:00:19 +0000 http://creativejs.com/?p=6161 Continue reading ]]> I recently did a writeup on the creation of the dynamic logo for my company, Arbitrary. The logo utilizes the awesome Flat Surface Shader plugin in combination with some pretty slick canvas techniques to feel ever-changing. It even updates the favicon!

The Arbitrary Logo

]]>
Registration open for CreativeJS workshops in Brighton http://creativejs.com/2014/02/registrationopen/ Wed, 19 Feb 2014 11:00:35 +0000 http://creativejs.com/?p=6144 Continue reading ]]> Two CreativeJS workshops are coming up on the 13th & 14th of March in Brighton. CreativeJS for Designers and CreativeJS Fun and Games will be running at the same time.

CreativeJS for Designers is a perfect way to get started with javascript in a visual way. And for more experienced coders, CreativeJS Fun and Games will get you started making HTML5 games. There are still a few tickets left for each course. Get yours before they’re gone!

]]>
Ironbane MMO http://creativejs.com/2014/02/ironbane-mmo/ Fri, 07 Feb 2014 12:00:27 +0000 http://creativejs.com/?p=6088 Continue reading ]]>

While not a new project it’s the first time I’ve seen Ironbane, a 3D MMO that’s been under development since 2012.

The chunky pixellated graphics work well and despite being a little glitchy in places it’s still quite polished and fun to play :)

Ironbane appears to be updated quite frequently, so definitely one to keep an eye on!

Ironbane via /r/javascript
Assets and server source are on Github.

]]>
Remote.js http://creativejs.com/2014/01/remote-js/ http://creativejs.com/2014/01/remote-js/#comments Wed, 22 Jan 2014 10:00:55 +0000 http://creativejs.com/?p=6055 Continue reading ]]> Remote.js is a super slick way to wirelessly communicate between devices without the use of additional hardware or a middle man. Instead it relies on tones: Applications can communicate with one another by literally emitting tones at different frequencies. The receiving computer listens for that tone (via standard microphone input) and then reacts accordingly. No web sockets, nodejs, or any other middle man required.

While I personally can’t imagine any immediate practical use I really admire this kind of hack. This had me looking up the maximum hearing range of humans and laptop microphones – one of those things that just sends me down a Wikipedia rabbit hole. I’d also be curious to see if there’s any way to solve the higher frequency bleeding problem described in the readme: It’d be really cool to use this without hearing high pitched tones.

I also wonder – does anyone out there have ideas for practical applications for this?

Remote.js by Hage Yaapa.

]]>
http://creativejs.com/2014/01/remote-js/feed/ 8
Have a happy hotlink Christmas http://creativejs.com/2013/12/have-a-happy-hotlink-christmas/ http://creativejs.com/2013/12/have-a-happy-hotlink-christmas/#comments Wed, 11 Dec 2013 12:51:46 +0000 http://creativejs.com/?p=5985 Continue reading ]]> pepsico

Deck the halls, hang the mistletoe and fill your website with a cheezy snow effect. Yes it’s Christmas! My favourite time of the year, but if you want to go straight onto the naughty list, all you need to do is hotlink to external JS files without permission.

Over the years, I’ve programmed Christmas twinkles, Christmas trees and snow for many of the world’s largest websites so three years ago, I posted a Three.js 3D snow effect on my blog. And since then, it’s spread over the internet like wildfire. I love when people use my stuff – that’s why I share it!

But rather than take the files and host it on their servers, people have been hot-linking to my image and JS files. Of course, you all know to only ever hot-link to JS files that you can absolutely trust – like Google hosting JQuery for example. To hot-link to any old JS files can at best cause your pages to break, and at worst, open yourselves up to any crazy code running on your website!

My server’s been crushed by the weight of websites linking to my files, the current biggest culprit is an Arabian weather website that seems to get 10,000s of hits a day. I could have just moved the files, but my server would still be having to deal with the 404s, and that’s quite a lot to deal with.

I asked on twitter what I should do, typically most people responded that I should replace the snow with a particular body part. My favourite suggestion was to make yellow snow :) But boringly, I replaced them with 0 byte files, and I added an alert to the JS files. Have you got any better ideas? Let me know!

And, um. Happy Christmas!

]]>
http://creativejs.com/2013/12/have-a-happy-hotlink-christmas/feed/ 16
Moonjs http://creativejs.com/2013/12/moonjs/ http://creativejs.com/2013/12/moonjs/#comments Tue, 03 Dec 2013 16:24:26 +0000 http://creativejs.com/?p=5980 Continue reading ]]> I’m sure you’ve all heard before about how the iPhone is more powerful than the computer on the original space shuttle. That’s all well and good, but replicating the guidance system entirely in the browser? That’s just crazy.

…or maybe it isn’t, thanks to Moonjs! From the site:

Moonjs is an online Apollo Guidance Computer (AGC) simulator. It is a port of Virtual AGC by Ronald Burkey from C to javascript/asm.js using the Emscripten compiler.

The site comes complete with instructions on how the guidance system worked. While using the controls is obviously complicated and cumbersome (no UX back in the day!) I still felt connected to a piece of history learning how the system worked. So inspiring!

Moonjs by Shahriar Iravanian

]]>
http://creativejs.com/2013/12/moonjs/feed/ 1
Achievement unlocked! http://creativejs.com/2013/09/achievement-unlocked/ Thu, 05 Sep 2013 14:00:14 +0000 http://creativejs.com/?p=5820 Continue reading ]]> achievement

Back when most people were just starting to get to grips with 3D CSS, Steven Wittens redesigned his site, acko.net, with clever mathematics, shiny geometry and a nice (not too heavy) bit of interactivity. Eighteen months later, he’s taken another jump forward in combining 3D CSS with WebGL and the DOM to create a 3D interactive graffiti-inspired piece of interactive art.

Really, just go look at it. It’s lovely. Scroll down a bit and you can see the seamless merging of 3D elements with the 2D blog content. Once you’ve done that a few times, scroll up past the top of the page and enjoy the show. Then drag it around and look vertiginously down at the content below, press play and drive through the tubes.

There’s so much to do with it, there’s even a set of unlockable achievements of which I’ve managed to get 4 so far. If you figure out any of them, please let us know in a comment here or on our Facebook page.

A related sidenote

In Steven Wittens post about the development of his site, you’ll find a link to voodoo.js, a nifty little library to help build things in a similar style and add in those nice little 3D/HTML interactions.

]]>