Create a Harmonic Oscillator on Canvas Using HTML5

Manish Singh
12y
6.9k
0
0
100
Article

Introduction

This is a simple application for beginners that shows how to create a harmonic oscillator on canvas using HTML5. We know that HTML 5 is the advanced version of HTML. Basically HTML 5 can be used to develop 3D applications. This article is intended to help with the use of HTML5 tools to create a harmonic oscillator on a canvas application. The <canvas> tag is an HTML element which can be used to draw graphics using scripting. It can be used to draw graphs to make photo compositions or do simple animations. The <canvas> element is a bitmap drawing API and once you have committed to a set of pixels you are stuck with them. Canvas is an important tag of a HTML 5 that is used to show the image and text in a HTML 5 application. I hope this article helps to create a harmonic oscillator on canvas using HTML5 tools.

Step 1 : First open a HTML editor such as Notepad.

Open start->Notepad.
The name of editor is "canvas".

Step 2 : Create a folder on a desktop.

Right-click on desktop->new->Folder.
Name of folder is "Tom".

Step 3: Open Visual Studio.

Go to file -> New->Projects.
Crete an ASP. NET Web Application.
Name of "Harmonic.aspx".

Step 4 : Add a HTML file to your web application.

Right-click on Solution Explorer.
Add->add new item->HTML form.
The Name of the HTML form is "Oscillator.html".

Step 5 : Now in this step we set a style used to set a border and body of a canvas.

Code

body {

margin: 0px;

padding: 0px;

}

#myCanvas {

border: 1px solid #00ff99;

background-color:Green;

}

</style>

Step 6 : Now in this step we set a callback time on windows.

Code

window.requestAnimFrame = (function (callback)
{
        return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
       function (callback) {
       window.setTimeout(callback, 1000 / 60);
             };
})();

Step 7 : Now in this step we create a function named drawWeight that is used to set all the properties of a rectengle.

Code

function drawWeight(canvas, pxt)
{

var size = 200;

pxt.save();

pxt.fillStyle = "red";

pxt.fillRect(-size / 2, 0, size, size);

pxt.restore();

}

Step 8 : In this step we create an onload function that is used to assign an id for the canvas.

Code

window.onload = function ()
{

var canvas = document.getElementById("myCanvas");

var theta = 0;

var d = new d();

var time = d.getTime();

animate(canvas, theta, time);

};

Step 9 : The demonstration of a complete application code is given below.

Code

<html>

<head>

<title>Tom application</title>

body

{

margin: 0px;

padding: 0px;

}

#myCanvas
{

border: 1px solid #00ff99;

background-color:Green;

}

</style>

window.requestAnimFrame = (function (callback)
{
        return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
       function (callback) {
       window.setTimeout(callback, 1000 / 60);
             };
     })();

function drawWeight(canvas, pxt)
{

var size = 200;

pxt.save();

pxt.fillStyle = "red";

pxt.fillRect(-size / 2, 0, size, size);

pxt.restore();

}

pxt.save();

pxt.translate(canvas.width / 2, 0);

pxt.save();

pxt.scale(1, scale);

drawSpring(canvas, pxt);

pxt.restore();

pxt.lineWidth = 6;

pxt.strokeStyle = "#ff0066"; // blue-ish color

pxt.stroke();

pxt.translate(0, 200 * scale);

drawWeight(canvas, pxt);

pxt.restore();

wndow.onload = function ()
{

var canvas = document.getElementById("myCanvas");

var theta = 0;

var d = new d();

var time = d.getTime();

animate(canvas, theta, time);

};

</script>

</head>

</canvas>

</body>

</html>

Step 10 : Press Ctrl+ F5 to run code in a browser.

Output

Resources

Here is some useful resources:

Up Next

Ebook Download

View all

A Guide to Mastering HTML5 CSS3 and JavaScript

Read by 3 people

Download Now!

Learn

View all