chu7in/noLove

Intro

A HTML5 page using codes to express the author's feelings of not having a boyfriend. The codes appear in a typewritter kindof fashion (with sound). Then a butterfly is drawn on the canvas made of flower pedals. It is quite dreamy. A timer then emerges saying that how many seconds the author's been waiting for true love to show up. This work is inspired by Hackerzhou's love page.

No-Love Page

Markdown Code and Syntax Highlighting

I use the markdown language for code rendering under ruhoh framework. For syntax highlighting, I use highlight.js. So basically, I just need to write down my codes like coding in a normal text editor. Markdown framework will turn them into the format that highlight.js would recognize and render. You can check out my index.md for the source code.

To enable the highlighting, you should include the following lines in the html:

<link rel="stylesheet" href="http://yandex.st/highlightjs/7.3/styles/idea.min.css">
<script type="text/javascript" src="http://yandex.st/highlightjs/7.3/highlight.min.js"></script>

and the following in the javascript file:

hljs.initHighlighting();

jQuery Typewriter Effect

I use a self-called closure loop() function together with setTimeOut() to achive a random interval typing effect, which is more close to real-life scenarios.

/* random typing speed to make it more real */
(function loop() {
    setTimeout(function() {
    	rand = Math.round(Math.random() * (maxSpeed - minSpeed)) + minSpeed
		var current = text.substr(progress, 1);
		progress = (current == '<' ? text.indexOf('>', progress) : progress) + 1;
		$ele.html(text.substr(0, progress) + ((progress & 1) && progress < text.length ? '_' : ''));
		if ($audio.ended || $audio.paused) $audio.play();
		if (progress < text.length) loop();  
		else $audio.pause();
    }, rand);
}());

HTML5 Audio

HTML5 has many new elements added such as audio, video, article and etc. I use <audio> to store the typing sound:

<audio id="sound">
    <source src="pathto/type.ogg" type="audio/ogg" />
    <source src="pathto/type.mp3" type="audio/mpeg" />
    Your browser does not support HTML5 audio.
</audio>

Note that some browser only supports .ogg format like firefox, so it's better to include audio files in both .mp3 and .ogg formats. An online mp3 to ogg converter can be found here. More detailed usage of HTML5 audio can be found here.

jQuery is then used to extract the audio object and perform methods like play(), pause() or extract attribute such as paused, ended. More properties of audio can be found in w3schools audio.

/* type sound */
$audio = $("#sound")[0];

if ($audio.ended || $audio.paused) $audio.play();
if (progress < text.length) loop();  
else $audio.pause();

Note that $("#sound") only retrieves the jQuery object, whose first element is the DOM audio object that we can use. It's the same with canvas in next section.

HTML5 Canvas

Canvas is new element in HTML5 to enable drawing a bitmap-based image. It temporarily only supports 2D drawing. All the drawing process is done on some context acquired by calling:

gardenCanvas = $("#garden")[0];
gardenCanvas.width = $animation.width();
gardenCanvas.height = $animation.height()
gardenCtx = gardenCanvas.getContext("2d");
gardenCtx.globalCompositeOperation = "lighter"; // rendering mode

More details can be found in w3schools canvas and wiki canvas.

Flower Effect

It's mainly completed by the garden.js library which renders Pedals for each Bloom in the Garden object. I modify the following parts to change the color, grow speed and radius of the flower bloom:

Garden.options = {
    petalCount: {
        min: 8,
        max: 20
    },
    petalStretch: {
        min: 0.1,
        max: 5
    },
    growFactor: {
        min: 0.1,
        max: 1
    },
    bloomRadius: {
        min: 8,
        max: 12
    },
    density: 15,
    growSpeed: 1000 / 60,
    color: {
		rmin: 128,
		rmax: 220,
		gmin: 0,
		gmax: 128,
		bmin: 220,
		bmax: 255,
        opacity: 0.1
    },
    tanAngle: 60
};

Draw a Butterfly

Butterfly Curve:

getButterflyPoint() function is used to retrieve the current position on the curve. The position vector is pushed to bloom array of the Garden object and is rendered by calling garden.render() continuously using setInterval().

Cute Fonts

The digits in the timer are loaded by defining a new font using font-face:

<style type="text/css">
	@font-face {
		font-family: digit;
		src: url(pathto/digital-7-mono.ttf) format(truetype);
	}
	#elapseClock .digit{
		font-family: digit, 'Joti One';
	}
</style>

'Joti One' is defined by calling Google Fonts:

<link href='http://fonts.googleapis.com/css?family=Satisfy|Joti+One' rel='stylesheet' type='text/css'>

Minify the Scripts

Minifying javascript and CSS before publishing is a good habit, because:

It will reduce the loading speed of you page.
It kindof protects your codes being copied by others.

I use online minifying tools for such tasks:

Dev Tools

For front-end development, I use Sublime Text 2. Love its auto-complete feature. For task management, I use Wunderlist. The sub-task feature and notes feature saved me so much time.

In the End

I built this No-Love page to get a basic understanding of HTML5 and I was moved to cry after seeing how beautiful the page turned out to be. Hope you enjoy it as much as I do =)

chu7in / noLove