Описание разработки демо для конкурса по разработке сайтов на Microsoft® WebMatrix.

image

Одной из категорий конкурса является «Креатив не остановить. Осторожно HTML5», что вполне подойдёт для демки.

Что нужно:
— IDE WebMatrix
— музыкальный трек (можно скачать бесплатные треки на сайте Jamendo)
— вводная документация о работе с canvas
— бесплатная регистрация на parking.ru
— проверить браузер на поддержку HTML5

Постановка задачи


Выведем на страницу несколько разноцветных кружков и будем крутить их вокруг оси под музыку, для демки этого будет достаточно. Чтобы устранить однообразие, будем менять их размер и траекторию чтобы создать впечатление приближения/удаления. Также добавим бегущие точки-звёзды и яркие вспышки.

Код страницы
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>F11</title>
		<script src="jquery-1.6.4.min.js"></script>
		<script src="F11.js"></script>
		<style>
			body {margin: 0px; padding: 0px; background-color:#000000;}
		</style>

	</head>
	<body>
		<canvas id="canvas" width="500" height="500" />
		<audio id="player" autoplay loop>			
			<source src="mz.ogg" />
			<source src="mz.mp3" />
		</audio>
		<script type="text/javascript">
			$(document).ready(function(){
				initAll();
				});
		</script>
	</body>

</html>

Как видно, на странице всего два элемента — canvas для рисования и audio для воспроизведения звука. Всё остальное будет сделано скриптами.

Синхронизация картинки со звуком


Это главная задача. Без синхронизации демка будет выглядет не как демка а как картинка с музыкой.
Прежде всего нужно измерить длительность такта выбранного трека (это можно сделать в любом звуковом редакторе типа Audacity en.wikipedia.org/wiki/Audacity).
Все изменения графики нужно привязывать к тактам трека.

var stepSize=1.92;//такая длительность такта у используемого трека
...
currentStep=Math.round((player.currentTime-stepSize/2.0)/stepSize);


Сделаем функцию которая запускает саму себя через определённый промежуток времени

var frate=1000.0/22;//22 кадра в секунду
...
function tick(){
	...
	setTimeout("tick()",frate);
	}


В ней будем считывать количество секунд которые от начала трека и менять координаты шариков

var ball = context2D.createRadialGradient(drawX+drawSize/2,drawY+drawSize/2,1,drawX+drawSize/2,drawY+drawSize/2,drawSize/2+1);
ball.addColorStop(0.1,"rgba(255,255,255,1)");
ball.addColorStop(0.5,"rgba(255,255,255,0.1)");
ball.addColorStop(1.0,"rgba(255,255,255,0)");
context2D.fillStyle=ball;		
context2D.fillRect(drawX-1, drawY-1, drawSize+2, drawSize+2);


где drawX, drawY и drawSize будут зависеть от синуса и косинуса из текущего времени плеера. Примерно таким же образом можно выводить точки-звёзды и вспышки света.

Посмотреть что получится в результате можно тут (поддерживается большинство современных брайзеров):
http://habrahabr.ru/special/microsoft/webmatrix/work/16/

Скрипты и трек можно скачать на странице http://sssurkv-2.hosting.parking.ru.