Get Started

You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

Become a sharper developer and jumpstart your career.

Basic

$0

$

. 00

monthly

For Basic members:

  • Standard Profile
  • Access learning courses
  • Access free e-books
  • 1x point

Premium

$20

$

. 00

monthly

For Premium members:

  • Earn 2x reward points
  • Premium profile with Verified check
  • Premium Avatar with status update
  • Learning courses
  • Unlimited Certifications and badges on profile
  • Unlimited Book downloads
  • Access to Premium content
  • Online Training
  • Unlimited PDF conversions and downloads
  • Professional Resume Writing
  • Interview Preparations Guide
  • 25 messages per month
  • 1 "Kodzu" avatar, basic
HTML 5

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 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".

wakakakakak.gif

Step 2 : Create a folder on a desktop.

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

folder.gif

Step 3: Open Visual Studio.

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

new.gif

webapplication.gif

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".

html.gif

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 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>

  <style type="text/css">

       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>

  <body onmousedown="return false;" bgcolor="#ff99cc">

  <canvas id="myCanvas" width="578" height="500">

  </canvas>

 </body>

</html>

 

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

 

Output

55.gif

56.gif

58.gif

Resources

Here is some useful resources:

Up Next
    Ebook Download
    View all
    Learn
    View all