Post
Ask Question

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".
wakakakakak.gif
 
Step 2: Create a folder on a desktop.
  • Right-click on desktop->new->Folder.
  • The name of the folder is "Tom".
folder.gif
 
Step 3: Open Visual Studio.
  • Go to file -> New->Projects.
  • Create an ASP. NET Web Application.
  • Name of "Harmonic.aspx".
new.gif
 
webapplication.gif
 
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".
html.gif
 
Step 5 : Now in this step we set a style used to set a border and body of a canvas.
 
Code
  1. <style type="text/css">  
  2.   
  3.        body {  
  4.   margin: 0px;  
  5.   padding: 0px;  
  6. }  
  7.   
  8. #myCanvas {  
  9.   border: 1px solid #00ff99;  
  10.   background-color: Green;  
  11. }  
  12.   
  13. </style> 
Step 6 : Now in this step we set a callback time on windows.
 
Code
  1. window.requestAnimFrame = (function(callback) {  
  2.  return window.requestAnimationFrame ||  
  3.   window.webkitRequestAnimationFrame ||  
  4.   window.mozRequestAnimationFrame ||  
  5.   window.oRequestAnimationFrame ||  
  6.   window.msRequestAnimationFrame ||  
  7.   function(callback) {  
  8.    window.setTimeout(callback, 1000 / 60);  
  9.   };  
  10. })(); 
Step 7: Now in this step we create a function named drawWeight that is used to set all the properties of a rectangle.
 
Code
  1. function drawWeight(canvas, pxt) {  
  2.  var size = 200;  
  3.  pxt.save();  
  4.  pxt.fillStyle = "red";  
  5.  pxt.fillRect(-size / 2, 0, size, size);  
  6.  pxt.restore();  
  7. } 
Step 8: In this step, we create an onload function that is used to assign an id for the canvas.
 
Code
  1. window.onload = function() {  
  2.  var canvas = document.getElementById("myCanvas");  
  3.  var theta = 0;  
  4.  var d = new d();  
  5.  var time = d.getTime();  
  6.  animate(canvas, theta, time);  
  7. }; 
Step 9: The demonstration of complete application code is given below.
 
Code
  1. <html>  
  2.    <head>  
  3.       <title>Tom application</title>  
  4.       <style type="text/css">  
  5.          body  
  6.          {  
  7.          margin: 0px;  
  8.          padding: 0px;  
  9.          }  
  10.          #myCanvas  
  11.          {  
  12.          border: 1px solid #00ff99;  
  13.          background-color:Green;  
  14.          }  
  15.       </style>  
  16.       window.requestAnimFrame = (function (callback)  
  17.       {  
  18.       return window.requestAnimationFrame ||  
  19.       window.webkitRequestAnimationFrame ||  
  20.       window.mozRequestAnimationFrame ||  
  21.       window.oRequestAnimationFrame ||  
  22.       window.msRequestAnimationFrame ||  
  23.       function (callback) {  
  24.       window.setTimeout(callback, 1000 / 60);  
  25.       };  
  26.       })();  
  27.       function drawWeight(canvas, pxt)  
  28.       {  
  29.       var size = 200;  
  30.       pxt.save();  
  31.       pxt.fillStyle = "red";  
  32.       pxt.fillRect(-size / 2, 0, size, size);  
  33.       pxt.restore();  
  34.       }  
  35.       pxt.save();  
  36.       pxt.translate(canvas.width / 2, 0);  
  37.       pxt.save();  
  38.       pxt.scale(1, scale);  
  39.       drawSpring(canvas, pxt);  
  40.       pxt.restore();  
  41.       pxt.lineWidth = 6;  
  42.       pxt.strokeStyle = "#ff0066"; // blue-ish color  
  43.       pxt.stroke();  
  44.       pxt.translate(0, 200 * scale);  
  45.       drawWeight(canvas, pxt);  
  46.       pxt.restore();  
  47.       wndow.onload = function ()  
  48.       {  
  49.       var canvas = document.getElementById("myCanvas");  
  50.       var theta = 0;  
  51.       var d = new d();  
  52.       var time = d.getTime();  
  53.       animate(canvas, theta, time);  
  54.       };  
  55.       };  
  56.       </script>  
  57.    </head>  
  58.    <body onmousedown="return false;" bgcolor="#ff99cc">  
  59.       <canvas id="myCanvas" width="578" height="500">  
  60.       </canvas>  
  61.    </body>  
  62. </html> 
Step 10: Press Ctrl+ F5 to run code in a browser.
 
Output
 
55.gif
 
56.gif
 
58.gif
 
Resources
 
Here are some useful resources:


Similar Articles