Описание разработки демо для конкурса по разработке сайтов на Microsoft® WebMatrix.
Одной из категорий конкурса является «Креатив не остановить. Осторожно HTML5», что вполне подойдёт для демки.
Что нужно:
— IDE WebMatrix
— музыкальный трек (можно скачать бесплатные треки на сайте Jamendo)
— вводная документация о работе с canvas
— бесплатная регистрация на parking.ru
— проверить браузер на поддержку HTML5
Выведем на страницу несколько разноцветных кружков и будем крутить их вокруг оси под музыку, для демки этого будет достаточно. Чтобы устранить однообразие, будем менять их размер и траекторию чтобы создать впечатление приближения/удаления. Также добавим бегущие точки-звёзды и яркие вспышки.
Код страницы
Как видно, на странице всего два элемента — canvas для рисования и audio для воспроизведения звука. Всё остальное будет сделано скриптами.
Это главная задача. Без синхронизации демка будет выглядет не как демка а как картинка с музыкой.
Прежде всего нужно измерить длительность такта выбранного трека (это можно сделать в любом звуковом редакторе типа Audacity en.wikipedia.org/wiki/Audacity).
Все изменения графики нужно привязывать к тактам трека.
Сделаем функцию которая запускает саму себя через определённый промежуток времени
В ней будем считывать количество секунд которые от начала трека и менять координаты шариков
где drawX, drawY и drawSize будут зависеть от синуса и косинуса из текущего времени плеера. Примерно таким же образом можно выводить точки-звёзды и вспышки света.
Посмотреть что получится в результате можно тут (поддерживается большинство современных брайзеров):
http://habrahabr.ru/special/microsoft/webmatrix/work/16/
Скрипты и трек можно скачать на странице http://sssurkv-2.hosting.parking.ru.
Одной из категорий конкурса является «Креатив не остановить. Осторожно 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.