Create a Harmonic Oscillator on Canvas Using HTML5

Loading

Create a Harmonic Oscillator on Canvas Using HTML5

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 an HTML 5 that is used to show the image and text in an HTML 5 application. I hope this article helps to create a harmonic oscillator on canvas using HTML5 tools.

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

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

Step 2: Create a folder on a desktop.

Right-click on desktop->new->Folder.
The name of the folder is "Tom".

Step 3: Open Visual Studio.

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

Step 4 : Add an 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

<style type="text/css">
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 rectangle.

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 complete application code is given below.

Code

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

Output

Resources

Here are some useful resources: