text:
This is my creative lab and interactive playground. It's focused on the exploration of interaction, visual effects and technologies.
This is my creative lab and interactive playground. It's focused on the exploration of interaction, visual effects and technologies.
A button that seamlessly transitions from action to confirmation
Scroll the page and see list items expand under the magnifying area. Inspired by a Flash site I saw years ago.
Check a checkbox to generate a wave of checkboxes. Because why not.
A device loop animation that I created for the new slid.es home page.
A UI experiment with pagination arrows that "flex" when you hover or press them. The arrows also collapse when you hit the first or last step of pagination.
I've been having a lot of fun creating these small CSS-only animations lately. They're great fun to work on since it doesn't take long to create one and thanks to Sass they're also very concise.
A UI concept which merges loading indicators into the action that invoked them. Primarily intended for use with forms.
I'm happy to announce the release of Slides - an easy way to create and share presentations. Slides is the new installment of what used to be rvl.io, it's built by myself and @owenbossola. Check out the Welcome to Slides presentation to see an example and find out about what's new.
The app has been rewritten from the ground up to provide the solid foundation we need to be able to iterate faster than what was possible with rvl.io. It's already very capable of producing great presentations but this is just the beginning and we can't wait to show you what we've got in store.
A context-shift transition inspired by iOS. Created using JavaScript, CSS 3D transforms and CSS Animations.
In early 2011 I released a small experiment called Sketch. It's a drawing application where lines appear to vibrate slightly like in an old cartoon. Sketches can be saved to a unique link and when shared, the sketch will replay as it was originally drawn.
Sketch saw a good amount of interest right off the bat and I was really excited when it crossed 100,000 saved drawings. After that initial rush however it quieted down quickly. Nothing unexpected there, that's the lifecycle I've come to expect from releasing many different personal projects and experiments.
Fast forward to late November 2012.
Out of nowhere Sketch started seeing a lot of traffic from a site that I'd never heard the name of before: ask.fm.
According to Wikipedia
"ask.fm is an interest-based social Q&A website" though I'm still not entirely sure what that means. From
there it continued to spread to other sites and at the time of writing Facebook is the biggest referrer.
The traffic spike ended up being much too heavy for my old host to handle and the server started breaking down during peak hours with a few thousand concurrent visitors. It was pretty excruciating.
I ended up migrating the project — including a 5GB MySQL databse — to a new Linux server on AWS. This was challenging considering I've never set up and configured a server before but it was definitely worth it. After working through the initial quirks of getting everything up and running it's been much easier to monitor and scale up further. There's also been further optimization like moving all static assets to a CDN, adding a large cache layer in front of database read/writes and frequently sharding tables.
Beyond changing servers I also felt it was time for a new name since Sketch was too generic. I ended up going with Sketch Toy
which had the big plus of a free domain, Facebook and Twitter name:
- sketchtoy.com
- twitter.com/sketchtoy
- facebook.com/sketchtoy
Traffic first surged in early November and is currently at 800k-1m visits per day. During peak hours that means somewhere around 10-13k concurrent visitors which is very strenuous even with the new setup and probably won't scale much further.
The second challenge is storage. Sketches are saved as compressed JSON blobs but with around 400k saves per day, the databse is still growing by a few GB each week. Unfortunately I believe the only real solution to this is to delete old sketches with few views.
But these are fun problems to have. It's been a great opportunity to learn about server configuration and I look forward to continuing to learn more as I go.
An infinite and hypnotic animation on
A UI concept for thumbnail previews. Hover over a single thumbnail to reveal it as a 3D stack. Works well on touch devices using swiping gestures.
Kort is the Swedish word for cards.
Paul Irish interviewed me about some of my personal projects on GDL Presents. We covered a broad range of projects and even a bit of workflow.
Fokus emphasizes anything you select by covering the rest of the page with semi-transparent black.
This was written in JavaScript and uses a
<canvas> element to paint the cover. The library has no dependencies and weighs in at around 3kb. Works in most modern browsers except IE and touch devices. If you want to use this on your site you just need to include the fokus.min.js script.
Fokus is also available as a Chrome extension.
As reveal.js has grown more popular there has been a lot of requests for an online editor and rvl.io is the answer. rvl.io is a service for authoring, storing and presenting slide decks without having to touch the underlying HTML of reveal.js. It was created by myself (frontend) and @h__r__j (backend).
An interactive experiment based on the visuals originally created for Radar.
A conceptual modal which gives a sense of depth between the page and modal layers.
An experimental CSS 3D fold-in menu. Works in any browser that supports CSS 3D transforms, that includes Mobile Safari so get your iPhone ready!
An audio-visual experiment that uses Audiolet to synthesize sound in real-time. The visuals are rendered on
Almost two years after releasing the web version Sinuous has finally made its way to the App Store! The gameplay is very much alike the web but it ties into Game Center so that you can compete with friends. Oh, and keep and eye our for the new 'vortex'-boost!
The game is still powered by JavaScript and rendered on HTML canvas. It relies on native code for audio and Game Center integration but that bit was easy thanks to the ever so lovely PhoneGap. I'm very happy with how well the controls translated to touch and I hope you will be too.
This runs as smooth as butter on the iPad but the framerate is a bit shaky on the iPhone 4. I will be releasing an update soon to address that as well as some other improvements. Try it out!
An experimental animated ribbon which lets you drag down a curtain of additional content. A fun twist on the "Fork me on GitHub" banner! Created with JavaScript-controlled CSS3 transforms.
Decided it was time for some CSS tinkering again and ended up creating this set of CSS3 scrolling styles. Not intended for any practical use but the visuals are surprisingly impactful.
This works by applying a
past class to list items outside of the viewport
as you scroll. Based on this class a variety of transforms are transitioned to via CSS.
Thanks Paul Irish for improving the JavaScript performance!
It's that time of the year again! In late 2010, having spent five great years working at Fi, I was determined to change up my professional life. After interviewing with Qwiki and accepting the position of Lead Interactive Developer it was decided; I was moving to San Francisco! It took a good few months of hard work to sort out all of the practicalities but it was definitely worth it now that I'm here.
Fortunately I've still been able to keep this site updated and worked on a variety of projects and experiments throughout the year.
The first project to see the light of day was Sketch, a drawing tool that mimics the style of old cartoons. It was refreshing to build something that allows others to be creative. Now – almost a year later – over 78,000 sketches have been saved.
Sketch was followed by a short freelance project which involved building an interactive and animated logo for a Canadian media production company called Yugen. Try it out on their site; http://yugen.ca/.
Next I stumbled into the land of CSS3 3D transforms and ended up trying them out on two projects; Holobox and CSS3 3D Slideshow (later renamed reveal.js). A few weeks ago, in mid December, I resumed my CSS 3D pursuits by creating a rolling effect for links and building a Christmas tree out of form elements.
Being far from tired of working with
<canvas> I also created a new game called
Coil, it's similar in design to Sinuous
but adds a touch of WebGL and perhaps an element of stress to the gameplay. Shortly thereafter I worked on a
tool called Textify.it which allows you to recreate images using thousands
of letters of text. Using Phonegap, I was able to easily port Textify.it to iOS.
It's been really encouraging to see that there's still a lot of activity on sinuousgame.com even though it's been out since 2010 – meaning ancient, in internet-time. In the past year it saw more than 2,000,000 visits.
Now the new year is approaching and with it new adventures. 2012 will start with relocating to NYC and opening up Qwiki's new office. Can't wait to see where it goes from there!
Happy holidays! I didn't get a pine tree for Christmas this year so I decided to compensate by creating a digital counterpart out of HTML form elements.
The DOM tree is generated via JavaScript every time you visit the page so you'll
never see the same one twice. All of the forms are filled with holiday greetings
in a variety of languages. CSS3 3D transforms are used to position and rotate, via
translate3d() and
rotate3d() respectively, the elements
when the page loads. The infinitely looping rotation on the tree is controlled by
an infinitely looping CSS3 animation.
All of the form inputs are interactive so I challenge you to try and select some of
<input type="radio"> snow flakes!
zoom.js is a small proof of concept JavaScript library for zooming in on DOM
elements or points in a document. It uses CSS3 transitions and 2D transforms (scaling, translation, transform origin)
on the
<body> element to achieve animated magnification.
The API is very minimal;
element: <HTMLElement>
x: 150,
y: 50,
width: 300,
height: 300
Reveal.js, formerly CSS 3D Slideshow, is a tool which allows you to quickly create good looking HTML presentations. Beyond the changed name, the updated slideshow includes a fair amount of new features:
.fragment class.
The next js1k is still ways off but I felt like crunching some
JavaScript so I revisited my Sphere experiment.
I was able to squeeze it down into 317 bytes and that includes the code for creating
and appending the
<canvas> element to the body. Here's the full thing:
var a=document,b=a.body.appendChild(a.createElement("canvas")),c=b.getContext("2d"),d=0,e=b.width=innerWidth,f=b.height=innerHeight,g=Math,h=g.cos,j=g.sin,k=g.PI;setInterval(function(){b.width=b.width;d+=0.1;for(i=1E4;i--;)r=(e+f)/2*(h((d+i)*(0.05+0.2*(j(d/1E5)/k)))/k),c.fillRect(j(i)*r+e/2,h(i)*r+f/2,1.5,1.5)},16);
Leave a comment if you can think of more ways to reduce the size!
UPDATE 1: Mathieu 'P01' Henri was able to squeeze it down to 247 bytes http://jsfiddle.net/LBBmM/1/
UPDATE 2: As if 247 wasn't enough, P01's latest update drops the canvas element and hits 222 bytes! http://jsfiddle.net/LBBmM/32/
Decided to spice up the text links throughout my site by reviving an old Flash classic – the 3D roll! You'll only be able to see the new style if your browser supports CSS 3D transforms, at the time of writing that means Firefox Nightly, Chrome or Safari.
The only HTML required for this effect is a
<span> wrapper around the inner HTML of the target anchor node. The
pseudo-element, and its
content: attr(...) property, is used to create the flip side. The 3D transformation is carried out
on the
<span> wrapper since transitions are not possible on pseudo-elements.
If you're interested in the code, it's availalable over at jsFiddle.net for all your forking pleasure.
Simply a colorful folding doodle on
<canvas>. Click anywhere
on the drawing -- or use your keyboard -- to activate different layouts.
I was interviewed by Ben Hutton of TechRant and shared some of my thoughts about the open web, personal projects and professional life.
The folks over at .net magazine have decided to spruce up their 404 page with the help of a few guest artists. For my slot I decided to go for a creepy theme inspired by one of my earlier experiments. The animation is entirely code generated and drawn on an HTML5 canvas element.
If you're interested in how this was created, have a look at the source code on GitHub.
When bored, I sometimes open a blank JavaScript file and start writing without any clear objective of where I want to take it. This is the result of one such coding session.
The sphere -- actually more of a spiral -- is built out of 10,000 particles and the structure changes over time.
AppView was created to help iOS app developers track recent reviews in all markets of the App Store without having to use iTunes Connect's cumbersome UI. Reviews can be sorted on date, rating or store and are automatically translated to English via the Google Translate API.
I was really happy with how the Textify.it web app turned out and decided it was worthwhile creating a version targeted at iOS. I've been curious about the potential of building iOS apps using the standard array of open web technologies.
With the help of PhoneGap, a framework which bridges JavaScript to native functionality, it was incredibly easy to get going. The iOS version of Textify.it is based on the same JavaScript core as the online version. Some code was added to fire up the camera/library as well as for saving images onto the device.
One challenge with any HTML app targeted at iOS and Mobile Safari is rendering performance, particularly so when using the HTML5 canvas element. The mobile version of Textify.it maintains the original resolution of images and those images may well be 2048x1536 pixels large (iPhone 3GS). The most fruitful optimization for this was to use a CSS transform to scale the canvas rather than doing so via its width/height properties. This seems to force the browser to apply a different, faster, image scaling method. Jonas Wagner has written a post about a similar technique for improved performance here.
Textify.it is available for both iPhone and iPad with a $0.99 price tag.
Browser for or drag an image onto the page and watch it be reconstructed purely out of text. The markup for the resulting textual image can be copied and used elsewhere.
There are a lot of settings which allow you to control the characteristics of the text. Even the smallest tweak to the settings can result in a very different output. Beware that using very large amounts of text will cause heavy browser lag.
Was curious about how to efficiently render particles with WebGL so I built a tiny demo. Move your mouse to generate particles.
Building Coil presented me with a few interesting technical challenges. Primarily I had a hard time making the game operate at a reasonable framerate since it uses both 2D Canvas and WebGL. Double whammy. Even though I am still not fully satisfied with how the game performs, I wanted to share some of the optimization techniques used.
The best
canvas optimization technique for animations is to limit the amount of pixels
that get cleared/painted on each frame. The easiest solution to implement is resetting the entire canvas element
and drawing everything anew but that is an expensive operation for your browser to process.
To limit the areas which are cleared in Coil, I keep track of exactly which rectangular regions are being painted in
so that I can then
clearRect(x,y,w,h) only those. This results in the following flow:
1. Clear pixels of all redraw regions
2. Reset redraw region list
3. Paint all elements and store their individual redraw regions
Coil has a debug mode in which these redraw regions are displayed as green rectangles, try it out.
Even though I'm an advocate for generating graphics procedurally, sometimes that's not the most efficient approach. If you're drawing simple shapes with solid fills then by all means drawing them procedurally is the way to go. But if you're drawing more detailed entities with strokes, gradient fills and other performance sensitive make-up you'd be better off using image sprites.
In Coil I use a hybrid approach. Graphical entities are generated procedurally on
canvas, but
only once as the game starts up. For the rest of the game's lifespan I paint copies of those sprites rather
than repeatedly generate the same drop-shadow, gradient and strokes.
One final tip when working with image sprites is to always draw them on integer x/y coordinates for better performance on OS X browsers. You can read about this in greater detail here.
The Chrome Developer Tools profiler is very useful for finding out what your performance bottlenecks are. In my case, for Coil, the two heaviest operations were the discovery of enclosures and rendering of WebGL. Both of these operations were being executed on every frame.
To distribute the processing for these two operations I changed it so that enclosure discovery only occurs on even frames while WebGL only gets rendered on odd frames.
From a scoring point of view, bad performance can be beneficial when playing a reflex based game since it gives you more time to react. To combat this unfair advantage I scale down the scores by a factor of the current FPS divided by the target FPS.
Another, perhaps more elegant, solution to this problem is to base all game mechanics on time rather than frames.
While working on Sinuous I had an idea for a gameplay feature that involved drawing circles around your enemies to destroy them. Trying not to add too many features in one game I decided not to implement it at that point and instead revisit it as a separate game.
Much like Sinuous, Coil is a very straight forward game with as few features and gameplay elements as possible.
The objective is to defeat enemies by enclosing them in the trail formed by your tail. Enemies found within those closures are obliterated. There are two types of enemies; the blue kind explodes after time and causes you damage, red enemies on the other hand are obstacles which should never be drawn into the enclosed area as that will also cause you damage.
Determining how to isolate enclosed areas, and enemies therein, was a very interesting challenge. The final implementation is a three-step process. First I check all line segments in the tail for intersections with each other. Once an intersection is discovered, that enclosed area is filled with a unique color. Finally, collisions are found by checking if the color underneath an enemy matches the closure's unique fill color.
After seeing a video demonstration of a holographic effect created with HTML/CSS I was inspired to build something similar. I ended up creating a 3D box which alters perspective depending on device orientation.
CSS3 3D transforms are used to distort HTML elements and create the walls of the box. JavaScript then tracks
deviceorientation and
devicemotion events and updates the 3D perspective
accordingly. The only property that is being changed via JavaScript is the perspective origin, or
-webkit-perspective-origin to be exact.
Note that this requires a webkit browser and has only been tested on iPhone.
WebGL's introduction is very exciting due to the powerful graphical capabilities it enables in the browser context. This power originates from the ability to run highly optimized programs on the GPU via shaders written in the OpenGL Shading Language – or GLSL for short.
There are two types of shaders; vertex shaders which are used to calculate transformations of vertices and fragment shaders which are used to process indiviual pixels.
Aiming to start learning more about the GLSL language I wrote a few abstract fragment shaders. To avoid some of the rudimentary work I used three.js to compile and run my shaders. I've also been referencing the wonderful Shader Toy for learning examples.
While preparing a presentation on SVG for an upcoming Stockholm Web Monkeys meetup I needed to construct a simple slideshow. Since this would only ever be presented in a controlled environment, I decided to take the opportunity and experiment with CSS 3D transforms.
The transition between slides is made possible by a combination of CSS 3D transforms and transitions. JavaScript is in charge of updating the class names of all slides depending user input and CSS takes it from there. Thanks to the limited logic involved I was also able to avoid using any third party libraries.
Each slide can contain a nested slideshow. The top level slideshow is navigated via keyboard left/right and the nested slideshows are then reached by using the up/down arrows.
Tip: you can improve the rendering performance of transitions/animations in mobile Safari by
applying a dummy CSS 3D transform. For example:
-webkit-transform: translate3d(0,0,0).
Note that this requires a browser with support for CSS3 3D transforms, such as Chromium or mobile Safari.
02-08-2011: The slideshow now provides unique URL's per slide which in turn enables support for internal links.
Ever wondered what it would feel like to attack a bunch of checkboxes with a radio button that's being steered by a scrollbar?
This is a remix of the classic Breakout game except all game elements have been replaced with HTML user interface elements.
In early 2011 I collaborated with Canadian media production company Yugen on a small but very interesting project. The objective was to "...produce a code generated logo that reacts to various inputs..." and works on all platforms. Having looked at the fluid shape in the logo design I felt this would be a lot of fun to take on – and so I did.
I animated the logo using the HTML
<canvas> element and created a fallback
with rotating images for sans
<canvas> browsers. The animtion consists of a
few core properties of the logo, such as shape and color, changing slowly using a fine
combination of randomness and control. Realizing that it would take some value tweaking for
everyone involved to be satisfied with the look and feel, I provided an easy way for Yugen to
configure the logo. If you're curious about how this looks you can view the source of
this page and look for
The animation also works with touch input and runs smoothly on most mobile devices. That latter
part is somewhat of a surprise since everything I've done with
<canvas> up
till this point has always been dissapointingly slow in those environments. The primary reason
for why it works so well in this case is that it's rendered at a relatively small resolution.
I'm really happy with how this turned out in the end. The organic nature of the animation compliments the logo design very well without sacrificing any of its core visual principles.
Out with the old, in with the new! I finally got around to creating a new site for myself.
Even though it hadn't grown very old, my previous portfolio ended up being a limitation in what type of content I could publish so I decided it was time for a revamp.
Translating information from a format aimed at computers into a narrated presentation tailored for human beings is a powerful idea. I realized this after discovering Qwiki in late 2010 and couldn't stop playing around with it. Coincidentally I received an email a few weeks late from Doug Imbruce, founder and CEO of Qwiki, asking for a meeting. After that meeting – and many interviews – I was offered a job which I gladly accepted.
Having worked many years in the advertisement industry I'm excited about the move to a product oriented environment. Primarily because I have longed for an opportunity to invest all of my time and mental energy in one product that I personally believe in. I also want to broaden my scope and what better way to do so than diving into the San Francisco startup scene!
Following the launch of 20 Things I Learned About Browsers And The Web there was a lot of interest regarding some of the HTML5 techniques empowering the site. In particular, the page flip transition was a hot topic.
To explain how the page flip works, and how to create one of your own, I wrote a tutorial which was published in .net Magazine (issue #211). This tutorial later went on to be available on Google's HTML5Rocks.com as well.
Remember those old cartoons where hand drawn lines appeared to vibrate because of differences between frames? That's what this experiment simulates. It also adds a third dimension to your drawings by allowing you to rotate the canvas.
I'm a Swedish engineer that loves working with interactivity, graphics and animation. I'm motivated by a need to create distracting interactive contraptions and obsessive about pushing the open web into unexpected places.
Currently working full time on Slides, which I also co-founded. It's a platform for creating, presenting and sharing presentations.
My work experience includes campaign sites in Flash, web apps in HTML, experimental HTML5 and CSS3 projects as well as mobile development. My personal projects have received a resounding amount appreciation, they were served to over 140,000,000 people around the globe in the past year alone.
In the past I have worked as Senior Interactive Developer at Fi, Lead Interactive Developer at Qwiki and Lead Interface Engineer at Squarespace.
During my time with Fi I led the development of both small and large-scale projects for clients such as Google, BBC, Nintendo, Wacom and SAS.
I am an active part of the web development community and share the source code for most of my work on GitHub and CodePen.
Related links:
This is my first experiment with WebGL. Even though I am very much for the idea of using librares to abstract away some of the rudimentary work involved in programming, I believe it is crucial to understand what happens behind the curtains. With that reasoning in mind, I set off to create this very basic example only so that I would gain an understanding of what makes WebGL tick.
Interested in getting started with WebGL? I highly recommend going through The Lessons on learningwebgl.com.
As the HTML5 spec is slowly making its way from working draft to recommendation and browser implementations are solidifying – the urge to make use of these new features grows strong.
Coming from a Flash background, and being a sucker for anything that moves or can be interacted with, I am
most excited about the introduction of the
<canvas> element which allows for
bitmap drawing through JavaScript. I started creating some visual experiments
using canvas a few months back and have gathered some tips for anyone dabbling in this neck of the woods.
When working with animation on canvas, performance can be a challenge since bitmap operations are very
processing expensive, especially at high resolutions. One important optimization rule to follow is to reuse
as many pixels as possible between frames. What I mean by that is the fewer pixels that need to be processed
each frame, the faster your program will run. For example, when erasing pixels with the
clearRect(x,y,w,h) method, it is very beneficial to clear and redraw only the pixels
that have changed and not the full canvas. Unlike the Flash Player's redraw
regions, this management of "dirty rectangles" needs to be done manually for canvas.
The canvas can be manipulated via transformations such as rotation and scaling, resulting in a change to the
canvas coordinate system. This is where it's important to know about the state stack for which two methods are
context.save() (pushes the current state to the stack) and
context.restore() (reverts to the previous state). This enables you to apply
transformation to a drawing and then restore back to the previous state to make sure the next shape is not
affected by any earlier transformation. The states also include properties such as the fill and stroke colors.
A very powerful tool at hand when working with canvas is compositing modes which, amongst other things, allow
for masking and layering. As an example you can check out Bakemono, where composite modes are used to mask
the eye and mouth. There's a wide array of available composite modes and they are all set through the canvas
globalCompositeOperation property.
To allow for sub-pixel drawings, all browser implementations of canvas employ anti-aliasing (although this does not seem to be a requirement in the HTML5 spec). Anti-aliasing can be important to keep in mind if you want to draw crisp lines and notice the result looks blurred. To work around this you will need to either round to integer values or offset by half a pixel depending on if you're drawing fills or strokes.
To clear the entire canvas of any existing pixels
context.clearRect(x,y,w,h) is
typically used – but there is another option available. Whenever the width/height of the canvas are set, even if they
are set to the same value repeatedly, the canvas is reset. This is good to know when working with a
dynamically sized canvas as you will notice drawings disappearing.
If you're interested in learning more about canvas, I would suggest getting started by reading through Mark Pilgrim's wonderful Dive Into HTML5 chapter. Once you're up and going this cheat sheet is a great point of reference.
Canvas has been around for quite a while already and is supported by all modern, and some not so modern, browsers. This being the case, I think it's very much ready to be used for real production. Some suitable places to utilize canvas would be to enrich buttons, charts/data visualization and navigational elements such as a list of thumbnails for an image gallery.
Preceding the release of the Chrome Web Store (CWS) I collaborated with Google to prepare Sinuous as a launch title app. Following the launch in early December 2010, Sinuous saw a major increase in activity and players. In fact, sinuousgame.com has seen over 900,000 visits since its launch and traffic is now resting at about 5k visits/day.
There are two different ways to deploy apps on the CWS:
The latter has raised some discussion – and complaints – because it essentially means that the "app" is no more than a bookmark. In some ways I agree with this, but I still picked this route to avoid having to maintain and update separate versions of the game.
If my app is merely a link to the original game, why do I bother to use the CWS at all? One reason: exposure. The CWS is a very powerful promotional channel for finding an audience.
An interactive experiment with bacteria in a playful and dynamic physics world.
An online book that aims to better people's understanding about the inner workings of browsers and the web. This project was created for the Google Chrome Team while I was working at Fi and my primary responsibility was building the HTML5 front end.
Collaborating with the Google Chrome team on this project was a great experience. The expertise they brought to the table, both in terms of technology but also in general project process and structure, was invaluable.
I'm really proud of the end result. It demonstrates a use of HTML5 that can not be found in many other applications and has therefore shed light on what can actually be accomplished using these technologies.
Created as part of a team while working at Fi.
Sinuous' sibling game. More evil red dots!
The 10k Apart competition, organized by MIX Online together with An Event Apart, challenged developers to build web apps in HTML5 using less than 10kb.
In the end 367 applications had been submitted and out of those my game, Sinuous, ended up taking home the grand prize!
This site, built entirely in Flash, is used to showcase some of BBC Earth's stunning nature photography. It's centered around a fluid interface that blends organically into the edges of the page so that you can focus on what matters; the content.
Created as part of a team while working at
Update: unfortunately the site is no longer online.
A game built on the HTMLCanvas element which will test your mouse pointer reflexes. The
objective is to stay clear of the evil red dots and stay alive as long as possible. Even
though the game play is
linear sinusoidal and the graphics are minimalist it can get quite addictive.
Sinuous is the grand prize winner of the 10k Apart competition for best HTML application in under 10 kb and has seen over four million visits to date. The game was also released, and featured on the Google Chrome Web Store.
A game built on the HTMLCanvas element which will test your mouse pointer reflexes. The
objective is to stay clear of the evil red dots and stay alive as long as possible. Even
though the game play is
linear sinusoidal and the graphics are minimalist it can get quite addictive.
Sinuous is the grand prize winner of the 10k Apart competition for best HTML application in under 10 kb and has seen over four million visits to date. The game was also released, and featured on the Google Chrome Web Store.
A little monster that I brought to life with JavaScript. Bakemono is Japanese for monster.
A playhead travels between keys which resonate in sound depending on where they are placed in the room.
Soft blobby physics. It's like, you know... jelly?
Control and create currents of particles which react to magnetic nodes.
Particle movement patterns that generate smooth trails.
Particle positioning patterns using depth.
A wave with bubbles floating on the surface, the bubbles each represent a tweet with the word "water" in it.
Particles slide across the screen and grow as they get close to the mouse.
There's much more to put in here but as it turns out – it takes time to write up descriptions and collect old material. To be continued...


text:
Summer hours announced at Emporia StateMay 7, 2012
The Emporia State campus will move to summer hours on Monday, May 14, 2012. For 12 weeks ending Aug. 3, most campus buildings and departments will be open from 7 a.m. to 5:30 p.m. Mondays through Thursdays. They will be closed Fridays.
The campus will still observe the holidays of Memorial Day (May 28) and Fourth of July. On those weeks, campus will be open three days rather than four.
In addition, certain departments will have different hours during the 12-week period:
- The Admissions office in Plumb Hall will be open from 7 a.m. to 5:30 p.m. on these Fridays —May 18 and June 1. Admissions will be open from 7 a.m. to noon on Fridays — June 8, June 15, June 22, June 29, July 13, July 20, July 27 and Aug. 3. (Note: The Admissions office will move to the Memorial Union in July; that date will be announced later.)
- The Memorial Union Bookstore will be open from 9 a.m. to 4 p.m. Monday through Thursday.
- Dining Services:
- UNTIL JUNE 4: Hornet Express will be open from 6:30 a.m. to 4 p.m. Monday through Thursday.
- Buzzcotti will be open 6:30 to 11 a.m. Monday through Thursday.
- Fetta Fresca will serve hot breakfast from 6:30 to 10:30 a.m. Monday through Thursday.
- Hornet Express will be open from 11 a.m. to 4 p.m. Monday through Thursday.
- Skyline will be open 11:30 a.m. to 1 p.m. Monday through Thursday, although the starting date is contingent on the Memorial Union renovation project.
- Hornet's Nest residential dining hall will serve this schedule Monday through Thursday — breakfast from 7:15 to 7:45 a.m., lunch from noon to 1 p.m., dinner from 5 to 6 p.m. The Nest is open on Fridays on an as-needed basis and is closed on weekends.
- The Student Recreation Center will be open from 6:30 a.m. to 8 p.m. Monday through Thursday. The swimming pool in the HPER building will be closed for repairs from May 10through June 18. Beginning June 19, the pool will be open from noon until 5 p.m. Monday through Thursday.
Because the rec center is supported by student fees, all students may use the services for no charge during the semesters in which they are enrolled. If not enrolled in classes this summer, students can pay a monthly membership fee of $11.42. In addition, ESU faculty and staff may purchase memberships for $11.42 per month.
ESU alumni also qualify for membership at the rec center for $17.79 per month. For information, contact the rec center at (620) 341-5952.
Check out our students' achievements and accomplishments on Emporia State's meritpages.com site

subset: commoncrawl


text:
LV=CC VS LANCS: No Play on Day Two10-May-2012
UPDATED 11.00am
There will be no play at The PROBIZ County Ground, Hove today in the LV=County Championship clash between Sussex and Lancashire.
The familiar heavy overnight rain has left the outfield saturated and the Umpires decided at their 11.00am pitch inspection that it would not dry out in time for any play today.
Play will be due to begin at 11.00am tomorrow morning for Day Three of the match.


text:
DUBAI: One extra name in the squad!15-Mar-2013
Sussex will be continuing their preparations for the 2013 season next week, when they fly out to Dubai and escape the chilly British weather to play some competitive cricket with the sun on their backs. But there will be one name in the squad who isn't used to such pre-season preparation, and that is our lucky competition winner who will be joining the team!
18 year-old William Poston, of Horsham, was the very lucky winner of our 'Unlock the Sharktank' competition which we launched in December. We had thousands of entries and William, a big Sussex fan, was the name plucked out of the hat by Professional Cricket Manager Mark Robinson to join the squad in Dubai.
He didn't believe that he had won the trip of a lifetime when he spoke to Robbo on the phone after the draw, but after re-assurances from the staff he was delighted that he'll get to rub shoulders with some of his heroes as they look to defend the Emirates Airline Twenty20 Trophy. He'll not only be the team's lucky mascot during the tournament but will be running drinks and even get to practise and warm-up with the boys.
William, a college student who also plays for Southwater Cricket Club, will be taking his father Simon on the trip – a member at Hove – and they are both pictured above with Sussex stars (L-R) Chris Nash, Ed Joyce and Luke Wright when they came to meet up with their new 'team-mates' recently.
Congratulations William. Everyone at Sussex hope you enjoy the trip and inspire the boys on to glory in Dubai!
For details of forthcoming competitions, why not sign up to the Sussex CCC newsletter? Along with all the latest news from Hove. Just click HERE


text:
All your questions answered about our online shop
How secure are your payment transactions?
All payments are handled by SecPay our online Payment Service Provider. Clicking on the Make Payment button in the checkout will take you directly to the card details page protected by a Secure Socket Layer (SSL) to provide a secure shopping experience.
Your browser should indicate that our site is secure. For example, Internet Explorer displays a padlock in the status bar at the bottom of the screen.
If you are using Internet Explorer and your browser says that our site is not trusted, click on Tools menu > Internet Options and make sure that 'Use SSL 3.0' is ticked in the 'Advanced' section.
Does your site use Cookies?
We use cookies to keep track of what you have in your shopping basket. The cookies used are completely safe, they do no store any information that could be used to identify you. To add products and to place an order you must have cookies turned on.
To turn cookies on please follow the instructions below for AOL, Microsoft and Netscape browsers:
Microsoft Internet Explorer 6.x
1. Select "Internet Options" from the Tools menu.
2. Click on the "Privacy" tab.
3. Slide the "Settings" tab down to Medium
4. Click "OK".
Microsoft Internet Explorer 5.x
1. Select "Internet Options" from the Tools menu.
2. Click on the "Security" tab.
3. Click "Custom Level" button.
4. Scroll down to the "Cookies" section.
5. Set "Allow per-session cookies" to "Enable".
6. Click "OK".
Mozilla Firefox 1.x
1. Select "Options" from the Tools menu.
2. Find the "Cookies" tab in the "Privacy" section.
3. Select "Allow sites to set Cookies".
4. Click "OK".
Safari 2.x
1. Select "Preferences" from the Safari menu.
2. Find the "Security" tab.
3. Under "Accept Cookies" select "Only from sites you naviagte to".
4. Click close.
Netscape Communicator 6.x
1. Select "Preferences" from the Edit menu.
2. Find the "Cookies" section in the "Privacy & Security" category.
3. Select "Enable all cookies".
4. Click "OK".
1. Select "My AOL" from the tool bar.
2. Select "Preferences" from the menu.
3. Click the "WWW" icon.
4. Select the "Security" tab
5. Click "Custom Level"
6. Scroll down to the "Cookies" section.
7. Set "Allow per-session cookies (not stored)" to "Enable"
8. Click "OK"
How do I cancel/return an order?
If you've accidentally placed an order or just changed your mind, don't worry. You can cancel or amend any order by ringing the shop directly on 0844 264 1734 quoting your order reference number. Alternatively, send you details through our enquiry form where we will deal with all enquiries with the utmost importance.
Do you charge VAT on children's clothing items?
VAT is excluded from clothing items sold in children's sizes.
What should I do if my card gets declined?
If you receive notification that your credit or debit card has been declined, you must contact the bank that issued the card to find out why. Only your bank can tell you why your card may have been declined.


text:
Dont talk to me about Windows 8!
70 comments post a comment
Arrgggh! My wife just bought a new PC loaded with the Windows 8 operating system. I tried to wrap my brain around it and now my head hurts!
Arrgggh! My wife (Gina the Gorgeous) just bought herself a new PC that's loaded with the Windows 8 operating system. I tried to wrap my brain around it and now my head hurts!
On the one hand, I know that I like a lot of folks am resistant to change. On the other hand, I also know that you have to adapt or well, "die" might be a bit too strong of a word, although I would certainly like to have strong words with whatever morons came up with Windows 8.
Here's the deal. I started out when everything was command-line only. Then came graphical user interfaces like Windows, which limped its way to Windows 3.1. I remember not being particularly happy when Windows 95 came out "things" were "different" but after a while I adapted and life was good.
The same thing happened when Windows 98 appeared on the scene and again when Windows XP slapped me in the face like a wet kipper.
Fortunately, I managed to completely avoid the Windows Vista fiasco. I was dragged kicking and screaming into the 21st century when my old computer died and I was forced to buy a new one running Windows 7, but I quickly discovered that I really liked Windows 7 (the "Search programs and files" feature is incredible and has "saved my bacon" on more occasions than I care to remember).
And so we come to Windows 8. Hmmm. What can I say? How about taking a deep breath and starting gently and thoughtfully with "I HATE IT!!!"?
I can see what they were trying to do. Tablet computers like the iPad (and other products with touch-screen interfaces) have revolutionized the way we use computers. I must admit that I would love to have touch-screen capability on all of my machines, but it's especially useful in things like tablets. The thing is, however, that the tablet is more of a "content consumer" than a "content creator" and the touch-screen and associated interface is great for the consumer role and playing with applications on an individual basis.
The main thing here is that the touch-screen capability is an adjunct to the underlying graphical user interface (GUI). I want to keep my desktop interface while augmenting it with touch-screen functionality. The tile-based Windows 8 start screen (called Metro, I believe) seems to be geared up to content consumption it "serves" you with information in real-time in a very attractive manner. But my wife and I use our PCs to create content. We want to be able to quickly and easily locate documents (files and folders) and locate and launch applications and drag data from one application to another and so on and so forth.
Now, you can get to a traditional desktop view from the Metro interface. If you are lucky, you can even get there more than once (by which I'm trying to convey that the process is in NO WAY intuitive). The problem is that when you launch an application like Internet Explorer, it seems that there is no way out again unless you use the sledgehammer approach of returning to Metro and then clicking everything in sight in the desperate hope that you will somehow find your way back to the desktop.
Seriously, I spent 30 minutes yesterday on Gina's Windows 8 machine inside a document trying to work out how to print it. Eventually I resorted to using the Save As option to copy the document to a USB memory stick, transport it to my Windows 7 computer, and print it from there.
Meanwhile, Gina is trilling away in the background saying encouraging things like "I thought you were supposed to be a computer expert!"
It really should NOT be this complicated.
Suffice it to say that I currently have a Windows 8 For Dummies book winging its way to me from Amazon (on the bright side, this was a good excuse for me to order the Python Essential Reference book I've been wanting). "Oh the ignominy," is all I can say.
Have you had any experience with Windows 8 yet? If so, do you agree with me, or do you think it's the best operating system you've ever seen (in which case the men in white coats are on their way)?
If you found this article to be of interest, visit Programmable Logic Designline where in addition to my Max's Cool Beans blogs you will find the latest and greatest design, technology, product, and news articles with regard to programmable logic devices of every flavor and size (FPGAs, CPLDs, CSSPs, PSoCs...).
Also, you can obtain a highlights update delivered directly to your inbox by signing up for my weekly newsletter just Click Here to request this newsletter using the Manage Newsletters tab (if you aren't already a member you'll be asked to register, but it's free and painless so don't let that stop you [grin]).


text:
You will need to sign on with your LLLID (La Leche League ID) before you can post. If you have never claimed your LLLID, create your LLLID now. To sign in, click the LLLID Sign On button in the upper right corner. Enter your LLLID Alias and click the button again.
Breast milk continues to be a valuable source of nutrition and disease protection for as long as a child breastfeeds. Find information and support for breastfeeding beyond the first year here!
Use this control to limit the display of threads to those newer than the specified time frame.
Allows you to choose the data by which the thread list will be sorted.
Order threads in...
Note: when sorting by date, 'descending order' will show the newest results first.
Forum Rules


text:
The University Police Department daily police Log is published in compliance with the Jeanne Clery Disclosure of Campus Security Policy and Campus Crime Statistics Act and Texas State Law.
The Daily Police Log contains information about incidents which occurred during the most recent seven day period – to view the log, come to the University Police Department (located in the Central Receiving Building at the corner of Reda Bland Evans & Ann Preston Streets) between the hours of 9 am and 5 pm Monday through Friday or call (936) 261-1375.
Was this information helpful? Provide Feedback or report broken links.


text:
Lund Catch All Premium Cargo Mat 619775
- Our Price: $130.28
- Shipping:FREE SHIPPING
- Part Number: 619775
- Rating: (3)
$130.28Free Shipping
Select your vehicle details above to ensure item compatibility.
- Big-time upgrades come in both style and defense against stains and spills with a Lund Catch All Premium Cargo Mat
- Plush carpet protection for your cargo area
- Moisture resistant barrier keeps factory carpet safe from spills and stains
- Stain resistant treatment keeps mats looking new and easy to clean
- Outer edge is raised to contain liquids
- Color matches your vehicle's interior
Your vehicle's cargo area probably gets a lot of traffic from messy sources like pets, plants, and of course the kid's football gear. Moving these loads can quickly turn your cargo area's carpet into a disaster area that's beyond repair. Don't ruin your investment with daily hauling - keep it protected with a Lund Catch-All Premium Cargo Mat!
The Lund Catch-All Premium series features thick OEM-style nylon carpeting that perfectly matches the color of your interior. This material is protected with a stain-resistant material that keeps spills and mud from sinking into the mat. Cleaning your treated Cargo Mat is as easy as hosing it off and hanging it to dry. The mat is then backed with a heavy-duty moisture-resistant barrier that further prevents liquids from getting through the mat and into the factory carpet. The outer molded edge is raised, keeping mud and liquids from spilling off the mat.
Don't let your messy cargo ruin your investment - get the full protection of a Lund Catch-All Premium Cargo Mat!
Lund 619775 fits:
- 2007-2016 Ford Expedition
- 2007-2017 Lincoln Navigator
There are no reviews for this application.
See All Lund Catch All Premium Cargo Mat Reviews.


text:
Otosclerosis is the growth of abnormal new bone in the inner ear. This growth prevents proper functioning of ear structures. Hearing loss can occur when the new bone surrounds the stapes and other small bones needed for hearing. This is a common cause of hearing loss.
Risk Factors
Otosclerosis is more common in Caucasians, Asians, females, and in people in their teens through late 40s. Other factors that may increase chance of otosclerosis include:
- Family history of otosclerosis
- Drinking nonfluoridated water—some studies suggest that nonfluoridated water may cause a susceptible person to develop otosclerosis
- Hormonal factors, such as pregnancy
- Viral infections, including measles
Gradual hearing loss is the main symptom of otosclerosis. Hearing loss may be of 2 types:
- Conductive—involving the small bones of the inner ear
- Sensorineural—involving the cochlea, which is the sensory organ in the inner ear
Early in the disease, you may first notice trouble hearing low-pitched sounds or whispers. Other symptoms may include:
The doctor will ask about your symptoms and medical history. A physical exam will be done.
Your ears may be tested. This can be done with a hearing test.
Images may be taken of your ear. This can be done with:
Treatments may include:
Hearing Aid
Hearing aids may be effective for conductive and sensorineural hearing loss.
In many cases, a procedure called a stapedectomy may improve hearing. The purpose of this operation is to replace the diseased bone with an artificial device that can transmit sound waves to the inner ear. Stapedectomy is effective and frequently returns hearing to a near normal level.
Oral Treatment
Fluoride tablets are sometimes prescribed to stabilize the condition and prevent further sensorineural hearing loss. However, this treatment remains controversial and unproven.
Revision Information
- Reviewer: Michael Woods, MD
- Review Date: 09/2016 -
- Update Date: 09/30/2013 -


text:
Sussex Women's Cricket Association
The Sussex Women's Cricket Association, under the guidance of the Sussex Cricket Board, run everything to do with Women & Girls County cricket in Sussex, including the cricket clubs.
In the last nine years, the Sussex Women's team have won the County Championship five times, in 2003, 2004, 2005, 2008 and 2010. The Women have also reached the County T20 semi final in the last two years.
In 2011 the Sussex age groups had their most successful season, with the Under 17s winning the County Championship, the Under 11s winning the Arundel Festival, the 13s were runners up in the County Championship final and the under 15s reached the semi final of the County Championship.
Also Sussex had the most girls selected for the Junior Super 4s in 2011, which consists of the best 48 under 19 players. Sussex had 11 players selected for this.
The 2012 season looks even more exciting, as well as having the Under 11, 13, 15, 17 and Women's squad, the Sussex Women's cricket association will be running three new team, Under 11 and 13 development sides and an Under 19 squad.
There are currently a number of Sussex players in the England and England Academy set up.


text:
Emporia State president to address campus communityJanuary 7, 2012
With a week on the job, Emporia State President Michael Shonrock plans to address the ESU community Tuesday, Jan. 10, 2012, during the General Assembly to kick off the spring semester.
Shonrock was named the 16th president of the regional university in December. He began his new role Jan. 3. The General Assembly begins at 2 p.m. Tuesday, Jan. 10, in Albert Taylor Hall. A reception in the Rotunda will follow.
"I hope the Emporia State community will attend the reception and share in the excitement as we start a new semester and begin to plan the celebration of our 150th anniversary," Shonrock said.
So far in his first week, Shonrock has met with numerous constituencies on campus and in the Emporia community to prepare for the upcoming Kansas Legislative session, which begins Monday, as well as getting up to speed on the search for a new president of the Emporia State University Foundation, the University's strategic plan and enrollment initiatives.
Traditionally aimed at the University's faculty and staff to start the new semester, the General Assembly is open to all, including students and the Emporia community.
Check out our students' achievements and accomplishments on Emporia State's meritpages.com site


text:
This is a year of big announcements for Ashton Kutcher and Mila Kunis.
On the heels of their engagement news, the couple, who met while starring on "That '70s Show," is expecting their first child together, sources confirm to Yahoo.
E! was first to report the baby news with an eyewitness telling the site that the "Ted" actress was seen at a prenatal yoga class in Hollywood. According to People magazine, the "Two and a Half Men" star and his love are "both very, very happy," but it's "still early." And, no, they aren't having twins — though, yes, Ashton is a twin himself. Officially, reps for both stars are not commenting on the couple's happy news.
On Saturday, Kutcher and Kunis cozied up during a lunch date at Sweet Butter Kitchen in Sherman Oaks. She was wearing her giant sparkler and an oversized black and white sweater, a baggy look that's been making numerous appearances lately… and now we know why.
That evening, they brought their love fest to a Clippers game — and ended up on the Kiss Cam. While Barry White's "Can't Get Enough of Your Love" played, Kunis seemed embarrassed by the thought of PDA, but Kutcher turned around his baseball cap and they shared a sweet smooch. She then cutely hid her face.
[Related: Famous Faces on the Kiss Cam]
The pair's relationship spans back to 1998 when they played loved up teens Jackie and Kelso on Fox's "That's '70s Show." When she was 15 and he was 20, they locked lips on the show for the first time. It was her first kiss ever.
They started dating in real-life in 2012 after he ended his marriage to Demi Moore. Since his divorce was finalized — in November — the low-key couple has become slightly more open about their romance. In February, she told Cosmopolitan magazine about a special date night tradition they have during which they dress similarly in jeans and white T-shirts.
[Related: Ashton Can't Help But Show His Love for Mila]
Last month, Kunis was announced as a spokesperson for Jim Beam bourbon, appearing in three ad spots for the brand. This is a project she may have to hit the brakes on now that she's expecting, not unlike Jessica Simpson pausing her Weight Watchers deal when she discovered she was expecting her second child in 2012.
What should the future Mr. and Mrs. Ashton Kutcher name their future offspring? Share your suggestions in the comments below. And not "Kelso" or "Jackie," OK?