The Blog of Levi Freeman. His work, his projects and things that inspire him.
LFM Blog
Here you could perhaps write a short paragraph about yourself or the brilliance expressed through your writing. Doesn't have to be anything long but it should be exciting!
This general consumer project your about to see is coming to stores this autumn/winter believe it or not. This is what minority report inspired. Microsoft currently calls this Project Natal, however in the next few weeks the name will be revealed. This device recognises gestures, movements and voice without the user needing to hold or wield a device.
It wasn’t long after I did some research that I remembered seeing a video last year that was up on youtube showing how a website was being manipulated by tilting the laptop. When i remembered the video a lightbulb lit up, could I actually make this, can it become tangible? Having just bought a new macbook pro, my first ever mac computer and finding out thanks to an app called macsaber, that the mackbook has an accelerometer made me naive in thinking that the video i saw last year of a laptop being able to control the website via motion should be possible with my macbook. Well that naivety paid off. I eventually found the video in question, the laptop was indeed a macbook pro.
From there i found myself looking at the firefox developer page and the mention of an api that “listens” to an onboard accelerometer in a device.
I don’t code, im a designer, i had no idea what to do with this. so i dug deeper, clicking on links, reading more blog posts and i came across some demos.
The awesome demo: https://people.mozilla.com/~dolske/tmp/awesome.html by justin dolske
The spirit level demo: http://disruptive-innovations.com/zoo/accel/orient.html by Daniel Glazman
These demos formed the basis of my project. It took me a good couple of weeks to understand the code that enabled me to manipulate how onscreen elements would react to my physical motion.
I created a few demos myself and presented this at my crit review at LCC:
As part of my research into this project that started from my concept challenge of how we interact with websites, i embarked on researching emerging technologies and examples. I came across a whole raft of information and products (one of which i will purchase soon). Here is one of the videos i have been intrigued by.
It is a talk at TED by John Underkoffler who was the Minority report science advisor and inventor.
I have begun steps to finalise the visual look of my interactive web experience by collecting imagery from various sites such as: Visuelle, typographyserved, ffffound and more sites.
I collected imagery based on my goal for a simplistic, clean, yet striking look. Here are a bunch of imagery i collected.
I just wan’t to share this technique I have discovered. Creating a A triangle using only CSS.
Works for all modern browsers like Safari and Chrome. This works in IE8 and possibly IE7 as well.
#triangle {
width: 0;
border-top: 500px solid #000000;
border-left: 300px solid #ffffff;
border-right: 300px solid #ffffff;
}
Where you see #ffffff you should make this the same colour as your background colour and thats it! That is how you create a Triangle purely in CSS and HTML. No image files needed.
I will be using this in my format project.
points to remember:
For all sides of the triangle to be equal they must have the same value. i.e all 300px
the left and right borders should match the background colour