Wednesday, July 31, 2013

impress.js - An Impressive HTML5 Presentaton Tool

I know that impress.js is a very old-fashioned tool for some, but since I'm not some cutting edge expert, I learned it today, and find it quite interesting.

What is impress.js?

impress.js is a Javascript file written by Bartek Szopka, which serves as a tool for HTML-based presentations. 
To have a better understanding, please have a look:
Really impressive, isn't it? It looks like a Prezi presentation (see http://prezi.com/) but as it says, it's in 3d! So if you are patient enough, you can create presentations that can beat Prezi!

A Brief Introduction to Beating Prezi

But impress.js is not so easy. First, you need to have some knowledge of HTML5, CSS3, and Javascript to create you own slides. Second, although it is not hard to understand the code, it requires hard effort and great designs to fully utilize its potential.


Determining the Position of the Slide

impress.js uses data-x, data-y, and data-z to determine where the slide would be. Note that the unit is counted in pixels, and you can use arbitrarily any integer you like (just, don't get too big!) for the position of the screen is adjusted automaticly. But how can I zoom in or zoom out?

Zooming by using data-scale

The data-scale is originally used when you need to make some texts bigger or smaller, but you can also use data-scale to zoom in or zoom out. This is shown in the following piece of code:
In this piece of code, data-scale is set to 10, so the canvas is 10 times bigger(which means other elements look 10 times smaller, remember that), a good viewpoint isn't it!


Overview the code using data-scale

Other Features

If you want to know more, just download the code:
The comments will explain more, and I think its far better than my explanaitons.


My First Trial

I intended to make a very simple self-intro presentation using this newly learnt impress.js.
Here are the effects(Note that this is only an overview, the useful information was actually inside the asterisk on the upper right!)

Nice to meet you!
Hope you will enjoy it!

Some Problems

There are still some problems though, namely, it is very difficult to decide the position of the elements, make everything look pretty, and you have to design you own .css file to make you slides. I think I will try to come up with a solution later.

Also the rotation is a bit strange. In the asterisk I went like this 0 -> -18 -> 54 -> 126 -> 198 -> 270 -> 360 -> 0, but it turns around when it goes from 360 -> 0! Any ideas? Thanks!



Hello World!

Since I am too lonely at home with only books, movies, and games for company, I think that sharing my experiences would be a good idea. Whilst it would be cool to share what I know to all my readers, it is also a very good method to help me remember what I have done, for I always have a bad memory. Always. Literally.

In case I forget, let me review who I am, and what I am doing.

I am Jiaming Song (aka Tony Soong, or Tony, or whatever), currently a sophomore in Tsinghua University's Computer Science and Technology (aka CST) Department. Life in Tsinghua is awesome, you can never realize how cheap life can be! If one doesn't waste his money, he can survive in the school with $5 a day; also, great news for fitness-lovers: the gym costs only $1 each time, a fantastic price (only because it doesn't have treadmills or swimming pools. But this place will explode if they do, because there are so many people here in China!) Even better, the on-campus dorm I live in has an air conditioner and it costs $250 ... a year.(WHAT THE F**K!) I always wonder what foreigners would think of China after they come to Tsinghua (Good for you, Socialism?)

I'm very fond of Computer Science, and I'm interested in most aspects, but I currently find machine learning most fabulous. I plan to enter the lab that does Bayesian AI, so I am reading a book called Pattern Recognition and Machine Learning (Bishop), the beginners' guide to Bayesian AI. The concept of the Bayesian interpretation of probability is pretty interesting, but math seems to be a great problem. Although I've had calculus and linear algebra in my freshman year, the math used by all sorts of distributions(Gaussian, Beta, Dirichlet, Student's t, ... don't make me list all of them) required more, such as matrix derivatives, and variation calculus. So I'm pretty stuck at the previous chapters, and hopefully I could do better later.

// TODO(Tony) As for my hobbies, I decide to postpone them for later editing.
// TODO(Tony) I haven't revised my grammar, for I am soooo excited to type!