HTML5 demo
A description of the development of a demo for a contest for developing sites on Microsoft® WebMatrix .
One of the categories of the competition is “Creative not to stop. Caution HTML5 ”, which is quite suitable for the demo.
What do you need:
- IDE WebMatrix
- music track (you can download free tracks on the site Jamendo )
- introductory documentation on working with canvas
- free registration for parking.ru
- check browser for HTML5 support
')
We will display several multi-colored circles on the page and we will twist them around the axis to the music, for the demo this will be enough. To eliminate the monotony, we will change their size and trajectory to create the impression of approaching / removing. Also add running points-stars and bright flashes.
Page Code
As you can see, there are only two elements on the page - canvas for drawing and audio for playing sound. Everything else will be done by scripts.
This is the main task. Without synchronization, the demo will not look like a demo, but as a picture with music.
First of all, you need to measure the duration of the beat of the selected track (this can be done in any audio editor like Audacity en.wikipedia.org/wiki/Audacity ).
All graphics changes need to be tied to the track beats.
Make a function that starts itself after a certain period of time.
In it we will read the number of seconds that from the beginning of the track and change the coordinates of the balls
where drawX, drawY and drawSize will depend on the sine and cosine of the current player time. Approximately in the same way you can display points-stars and flashes of light.
See what happens as a result here (supported by most modern brazers):
http://habrahabr.ru/special/microsoft/webmatrix/work/16/
Scripts and track can be downloaded at http://sssurkv-2.hosting.parking.ru .
One of the categories of the competition is “Creative not to stop. Caution HTML5 ”, which is quite suitable for the demo.
What do you need:
- IDE WebMatrix
- music track (you can download free tracks on the site Jamendo )
- introductory documentation on working with canvas
- free registration for parking.ru
- check browser for HTML5 support
')
Formulation of the problem
We will display several multi-colored circles on the page and we will twist them around the axis to the music, for the demo this will be enough. To eliminate the monotony, we will change their size and trajectory to create the impression of approaching / removing. Also add running points-stars and bright flashes.
Page Code
<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> As you can see, there are only two elements on the page - canvas for drawing and audio for playing sound. Everything else will be done by scripts.
Sync pictures with sound
This is the main task. Without synchronization, the demo will not look like a demo, but as a picture with music.
First of all, you need to measure the duration of the beat of the selected track (this can be done in any audio editor like Audacity en.wikipedia.org/wiki/Audacity ).
All graphics changes need to be tied to the track beats.
var stepSize=1.92;// ... currentStep=Math.round((player.currentTime-stepSize/2.0)/stepSize); Make a function that starts itself after a certain period of time.
var frate=1000.0/22;//22 ... function tick(){ ... setTimeout("tick()",frate); } In it we will read the number of seconds that from the beginning of the track and change the coordinates of the balls
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); where drawX, drawY and drawSize will depend on the sine and cosine of the current player time. Approximately in the same way you can display points-stars and flashes of light.
See what happens as a result here (supported by most modern brazers):
http://habrahabr.ru/special/microsoft/webmatrix/work/16/
Scripts and track can be downloaded at http://sssurkv-2.hosting.parking.ru .
Source: https://habr.com/ru/post/132242/
All Articles