A basic animation test using the HTML SVG element instead of the CANVAS. This one uses the svg.js library. This library has it’s own, built in animation function that is used to make the red rectangle move back and forth (1 second period).
The green circle is moved using the requestAnimationFrame function with some coding to make it bounce back and forth.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<script src='./svg.js/svg.min.js'></script>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="svgPlace"></div>
</body>
<script type="text/javascript">
var draw = SVG().addTo('#svgPlace').size(300,400);
var line = draw.line([[20,20],[200,20]]).stroke({width: 1, color:'#f00'});
//Metronome red rectangle.
rect = draw.rect(50,100).move(200,20).fill('#f00');
rect.radius(10);
dir = 'left';
setInterval(animate, 1000);
function animate(){
if (dir === 'left'){
px = 20;
py = 20;
dir = "right";
}
else {
px = 200;
py = 20;
dir = "left";
}
rect.animate({
duration: 1000,
when: 'now'
}).move(px,py);
}
//Green circle
circ = draw.circle(20).fill('#0f0').move(250,10);
window.requestAnimationFrame(animateCirc);
cx = 250;
cy = 20;
dy = 1;
function animateCirc(){
cy+=dy;
circ.move(cx,cy);
window.requestAnimationFrame(animateCirc);
if (cy > 100 ){
cy = 100;
dy = -dy;
} else if (cy < 20) {
cy = 20;
dy = -dy;
}
}
</script>
</html>
Based off of Mozilla’s nice introduction to basic animations on the web, I made as simple of an animation as I could using the Canvas element in HTML. It just contains a static, red rectangle, and a green sphere that slowly moves across the canvas. This should serve as a simple introduction for my students who want to make online games.
I gave a quick introduction to writing HTML web pages over the last interim. The basic outline of a web page can be seen above (but there’s no content in there, so if you tried this file in a web browser you’d get a blank page). Everything is set between tags. The open html tag (<html>) starts the document, and the close html tag (</html>) ends it.
The head section (<head>) holds the information needed to set up the page, while the body section (<body>) holds the stuff that’s actually on the page.
For example, if I wanted to create a heading and a paragraph of text, I would just put it in the body, like so:
<html>
<head>
</head>
<body>
<h1>My Heading Here</h1>
This is my text.
</body>
</html>
Note that the heading is placed between h1 tags. And the result should look like this:
Basic webpage.
Now save this file as an html file, which means save it as a plain text file using a .html extension (e.g. test.html) and open the file in a browser.
Note on Editors: I’ve found that the best way to do this is by using a simple coding editor. I recommend my students use GEdit on Linux, Smultron (free version here) or GEdit on Mac, and Notepad++ on Windows. You don’t want to use something like Microsoft Word, because complex word processing software like it, LiberOffice and Pages need to save a lot of other information about the files as well (like the font style, who created the file etc.).
CSS Styling
But we typically don’t want something so plain, so we’ll style our heading using CSS. Usually, we’ll want all of our headings to be the same so we set up a style to make all of our headings blue. So we’ll add a styling section to our header like so:
<html>
<head>
<style type="text/css">
h1 { color: blue; }
</style>
</head>
<body>
<h1>My Heading Here</h1>
This is my text.
</body>
</html>
Finally, we’ll often want pages with separate blocks of information, so let’s make a little column for our heading and paragraph. We’ll make the background yellowish, put a border around it, and give it a set width.
To do this we’ll place our heading and paragraph into a DIV tag, which does not do anything but encapsulate the part of the web page we want into sections.
<html>
<head>
<style type="text/css">
h1 { color: blue; }
</style>
</head>
<body>
<div id="section1">
<h1>My Heading Here</h1>
This is my text.
</div>
</body>
</html>
Note that I’ve given the div tag an id (“section1), this is so that I can refer to that section only in the styling section using “#section”:
<html>
<head>
<style type="text/css">
h1 { color: blue; }
#section1 {
background-color: #A2A82D;
border: solid black 2px;
width: 400px;
}
</style>
</head>
<body>
<div id="section1">
<h1>My Heading Here</h1>
This is my text.
</div>
</body>
</html>
to give: More styling.
Unleashed
With that introduction, I set students loose to make their own web pages. They had to make two page, both linking to the other, and one of them being an “About Me” page.
There are lots of places on line to find out what HTML tags and CSS styles are available and how to use them, so my goal was to introduce students to the language they needed to know.
One issue that came up was the use of copyrighted images. Current adolescents see everything online as part of a sharing culture–most of my students for this lesson had Pintrest accounts–and it took some explanation for them to understand why they should not use that cute gif of a bunny eating a slice of pizza without getting permission from the author (or at least finding out if the artwork was free to use).
Finally, I did do a quick intro on how to using JavaScript (with Jquery) to make their pages more interactive, but given that we only had two days for this project, that was pushing things a little too far.
One of my students couldn’t get VPython to install and run her computer. She was running Windows 8, and I have not used Windows, much less this version of it to figure out what the problem was. This is one of the challenges with a bring your own device policy. So, instead I gave the lesson on numerical integration using javascript.
If you open the webpage file (index.html) in your browser you should see nothing but the word “Hello”. The template is blank, but it’s ready so students can start with the javascript programming right away, which a few of my programming elective students have done.
For reference, this file (basic-jquery-numeric-int.zip) uses the template to create a program that does numerical integration. Someone using the webpage can enter the limits (a and b) and the number of trapezoids to use (n), and the program calculates calculates the area under the curve f(x) = -x2/4 + x + 4.
It’s a very bare template and doesn’t have any comments, so it’s not useful unless you’re at least a little familiar with html and javascript and just need a clean place to start.
