SVG (Group Project)

SVG stands for Scaleable Vector Graphics. It is a markup language which works with 2D vector and raster images, as well as text. SVG is XML based, and drawings created can be interactive and dynamic. It can be used to create basic shapes such as rectangles and circles, but can also create filters such as a gaussian blur and gradients.

But why would you want to use SVG rather than any other kind of graphic file? Adobe describe SVG's as "compact and provide high-quality graphics on the Web, in print, and on resource-limited handeld devices. In addition, SVG supports scripting and animation, so is ideal for interactive, data-driven, personalized graphics".

SVG's are scaleable, meaning that users can "zoom in" to view the image in more detail. They can also be displayed well at varying resolutions. They are rendered on the viewers side, so will use their processing power.

 

HTML5 Canvas (Group Project)

The canvas element is a new way to draw graphics in HTML5 using JavaScript. Most of today's browsers include HTML5 support, meaning it is widely available. You can create JavaScript commands in a "context" to draw graphics. The "context" is the work area which you use to implement your HTML5 canvas.

The canvas itself is a rectangular space which has different methods for drawing shapes such as rectangles, lines, circles, and displaying images.

Here is an example of the code which shows how to set up canvas in an HTML5 document.

<canvas id="myCanvas" width="300" height="150">
Fallback content, in case the browser does not support Canvas.
</canvas>

Here you can see that you can assign attributes such as width, height, and canvas ID. We can also use X and Y co-ordinates to place images / drawings on the canvas in certain locations.

Here is an example of the code which allows you to draw a red rectangle.

<script type="text/javascript">

var c = document.

getElementById("myCanvas");

var cxt = c.getContext("2d");

cxt.fillStyle = "#FF0000";

cxt.fillRect(0,0,150,75);

</script>



This project needs a question / problem and an answer / solution.

My essay looked at bioengineering, biomedical developments and Sci-Art, and I was particularly interested in the examples which looked at animals and ways to help animals.

I have started to look into small biomedical engineering projects to find inspiration for my own project. Some projects were to make fairly normal devices, like a digital thermometer or hearing aid, but some sounded more interesting and unheard of.

One of these is an emotional stress indicator, which is a device that shows when the user is experiencing a high level of stress. It does this through LED's and beeping when the stress level is high. It works on the idea that the resistance of the skin is lower when stressed, and higher when not. This is due to the blood supply to the skin. The device would work by using pads attatched to the skin to monitor resistance levels.

Another project was a sleep inducer, which aims to help people suffering from insomnia. The idea behind the device is that geo-magnetic fields can be used to help make an environment which will aid sleep. The device generates these geo-magnetic fields.

HTML5's Geolocation and Maps

I finally got Geolocation working on my website! The only problem is, I can't find a way to display my markers from Google Maps on the Geolocation map...

This is the map with the Geolocation feature.

And this is the map with the information!

I think I'll be removing the geolocation map to make the site look good... It's a shame I can't combine the two maps, but this is only meant to be a simulation after all...

Developing the Site - HTML5 Features

In my website I have used a few HTML5 features. I've used a few tags / elements such as <header> which has more semantic value and streamlined process than <div id ="header">.

Another thing I have looked at is the transition element, and the use of hover. Hover means that when you place the cursor over the button to be clicked on, it will change something about the button. In this case, the button changes appearance, becoming lighter in colour. The transition element also makes the button 'rise up' from it's original position (see below screenshot for an example).

Augmented Reality Today

Augmented Reality, although a relitively new technology, has already had some commercial applications.

The Pokedex 3D is an example of the technology today. The user places a card in front of the Nindtendo 3DS' camera, and uses the console to view the Pokemon which appears on the screen, thanks to the Pokedex 3D software. Nintendo have used this technology quite a lot in their 3DS, and it is a popular selling point of the console.

The video below displays a quirky application of AR. A company has had some AR business cards made up, and you can see how they interact in the video. 

As you can see, at the moment AR is mostly for entertainment purposes.

However, the supermarket chain Tesco have released an augmented reality web application which is designed to help customers with online shopping. At the moment there are only electronics such as televisions and media such as DVDs available to view. If Tesco were to expand this to include everyday groceries, this could be a very useful feature. You would be able to compare products by size as if they were in front of you. This would be very handy, as often online shopping can be even harder than shopping in real life as products often don't have decent descriptions or even images.

Unfortunatley the application crashes every time I try to use it so I can't post screenshots.

Augmented Reality and the Future

Augmented Reality is a technology which can be hard to explain. Imagine if a computer games graphics were projected into the real world. AR is, basically, this idea brought to life.

AR has a range of useful applications, as well as being something you can use purely for entertainment. Informative graphics and writing can be layered over the real world, and viewed with a smartphone or a pair of specially designed glasses. Audio can coincide with the graphics you see.

MIT Media Lab's SixthSense is an example of Augmented Reality technology. It incorporates a small projector, camera, smartphone, and mirror in a necklace style piece of equipment, as well as coloured caps which the user wears on their fingertips. By using the mirror and camera to view and examine the surrounding environment, transferring that data to the smartphone which processes it and obtains GPS coordinates, and then using the projector to project information onto the surface in front of the user, SixthSense can make a watch appear on your arm, a phone number pad appear on your hand, or something else entirely.

Using the fingercaps, the user can physically manipulate the projected infromation, like a mouse is used to interact with a web browser, or how a user interacts with a touch screen smartphone.

In day to day life, SixthSense could be a handy piece of technology. If you were to pick up a can of soup in a supermarket, SixthSense could find and project information such as nutritional value, allergy / suitability information, and reviews onto the can.

Although this isn't an example of AR as it is today, this "reverse AR" is a good example of how the technology could look in the future.