Как стать автором
Обновить

Демка на HTML5

Время на прочтение 2 мин
Количество просмотров 2K
Описание разработки демо для конкурса по разработке сайтов на 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.
Теги:
Хабы:
-4
Комментарии 9
Комментарии Комментарии 9

Публикации

Истории

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн
PG Bootcamp 2024
Дата 16 апреля
Время 09:30 – 21:00
Место
Минск Онлайн
EvaConf 2024
Дата 16 апреля
Время 11:00 – 16:00
Место
Москва Онлайн