We say it’s OK to procrastinate online with these fantastic creative time wasters

It’s 4 PM, on a Tuesday. Your boss hasn’t got back to you yet and neither has the client. You’re dreaming of the first sip of a cold beer the moment the clock turns six, while fantasising about what you’re going to have for dinner. What else is there to do? Well, nothing… so here you are!

In this month’s Double Click we are saying it’s OK to procrastinate (who’s going to know anyway?) by providing some fun, creative websites that you can while away the time you should be spending being very very very productive. But there is a pandemic on, so we’ll let it slide for now. Be it a sandbox experiment or comparing the size of objects in space, there will definitely be a distraction waiting for you.

Brock Kenzler: breakingbadasanovel.tumblr.com

Brock Kenzler was inspired by paperbacks in designing the aesthetic of this website, considering “serif pairings, a series of asterisks to mark the end of a chapter” and “stuff like that.” Resulting in an interactive web-based novel that describes the entire story of the hit television series Breaking Bad, episode by episode. He maintained his style of using standard web fonts, the likes of Times New Roman and Baskerville, which “really nailed that classic novel vibe for me” Brock tells us, adding “to tie in Breaking Bad, I added a trusty drop cap in the style of the iconic logo.”

Languages used:

“I’m an early-2000s front-end developer turned designer, and my development skills have stayed pretty true to that era! I just built the site using HTML and CSS in Dreamweaver, and then used Tumblr as a CMS.”

Neal Agarwal: neal.fun/size-of-space

Neal Agarwal’s Size of Space allows you to explore the scale of cosmic objects. With only each other to compare themselves against, Neal begins your journey “an astronaut so the user is grounded in terms of scale.” The page remains uncluttered, itself within the vacuum of space, with Neal telling us that “overall, the page is very simplistic, it has few elements so the main focus of visualising scale isn't lost.” He carries on, explaining that he “wanted it to feel like you were browsing these celestial objects as if they were marbles on a huge floor” using planets made of “textured rotating spheres” within Three.js.

Languages used:

“The page was made with Javascript, React and Three.js.”

Leo Cheron: lab.cheron.works/webgl-gpgpu-particles

“Working with an autonomous particle system is probably the oldest visual developers playground,” Leo Cherwon tells us, “it surprises us with its unpredictable evolution based on a set of constraints, and its physical behaviour makes it realistic enough to make us want to play with it.” And play with it to your heart’s content on Leo’s particle filter that utilises your webcam, you will. “Working with video emphasises this realistic aspect, and rediscovering yourself through this filter makes it even more playful and fascinating,” Leo explains. With the intention to “generate a real-time bump mapping out of a video” and forcing the audience to interact with the particle, Leo candidly adds, “to be honest, my main motivation was to build an engine that could run multiple millions of particles at 60 FPS, the rest is just fun.”

Although both designed and developed by Leo, he credits developer Ralph Hauwert as his inspiration.

Languages used:

“It's a Gpgpgu particle system made in Webgl using ThreeJs.”

Max Bittker: sandspiel.club

Fulfilling his own fantasies of being a mad scientist, Max Bittker’s Sandspiel is a “painting application disguised as a physics simulation” with the intention of providing “a comfortable setting” to “lower the audience’s inhibitions which prevent people from drawing for fun.” The result is a joyful site that celebrates making. Unsurprisingly, Sandspiel has become very popular with school children and was inspired by the falling sand games Max played himself as a child. In a self-isolating world where children are learning through their browsers, Max feels “an obligation to make things that respect and nurture people who are learning about the world… even if that means providing a space to draw cool volcanoes instead of doing their homework” adding “I think that wasting time on the internet can be a beautiful thing.” We think so too.

Languages used:

“The main simulation is built with Rust compiled to WebAssembly, and the interface is written in Javascript, (mostly React). WebAssembly allows the core logic to be compiled into a very efficient format, while the Javascript affords me the flexibility to experiment with other aspects of the site. There is also a bit of WebGL code used to render the sands onto the screen quickly.”

Rifke Sadlier: excellent-quarantine-ideas.com

“I took the opportunity to make the visual language as loud and gross and unsettling as possible,” Rifke tells us. It‘s one she made for two reasons: firstly because it reflects the coronavirus and “secondly because clients don’t usually ask for gross and unsettling stuff so I felt like I had to make the most of the opportunity in my personal work!”

Although (appropriately) made on her own in isolation, Rifke credits her friend Melanie Issaka for the name. “I think the fact that that I made it pretty much on my own was what initially encouraged me to make it a submission-based site,” she tells us. “I didn't want it to come across too ‘directed and produced by Quentin Tarantino’ and make people feel like I was preaching to them about how they should spend their time!”

Languages used:

“I used the usual suspects – PHP, JavaScript and CSS, and good old trusty WordPress. I used WordPress’ comment functionality with AJAX (very quaint and old-fashioned, I know, but I still haven’t fully wrapped my head around React or Vue!) to process the submissions.”

With advanced design capabilities and specialised features, Wix gives you the freedom to design and customise a website that expresses your vision, no matter your brand or business. To save 30 per cent on all yearly premium plans with Wix, use code “DoubleClick20” at checkout.