I am trying to insert this JavaScript code (that is borrowed from someone else with credit given appropriately) into an HTML page. I understand how to use the simple document.write() to display text with JavaScript and am also pretty fluent in Java but am having a hard time trying to get these functions to work properly. For lack of a better word or words I am trying to get some animation to happen using JavaScript. I found various tutorials that show some JavaScript logic and print to the screen but none of them use animation and if they do show some animation they do not show how to include it into HTML. I want to display the animation properly within the HTML page. I have been reading through the w3 schools tutorials on JavaScript and most of them either return something or use the document.write to pull information from a form or a browser. I believe this might have something to do with creating an object to use for displaying the movement in the algorithm or with the DOM for JavaScript.
The idea behind my JavaScript is, I would like to simulate a working example of the bresenham line algorithm. There is an example of this here: Bresenham line algorithm
I also saw plenty of tutorials for including the JavaScript in a secondary file and referencing the JavaScript using the src tag but I would like to keep the JavaScript at the end of the html page please.
I am also using Dreamweaver for the development of the HTML & JavaScript page.
The code is listed below. Also please feel free to list a website or tutorial I can reference to view more information on this.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bresenham's Line Algorithm</title>
</head>
<body>
<script type="text/javascript">
/**
* Bresenham's line algorithm function
* by Matt Hackett [scriptnode.com]
* @param {Object} el The element to target (accepts both strings for id's and element *objects themselves)
* @param {Number} x1 The starting X coordinate
* @param {Number} y1 The starting Y coordinate
* @param {Number} x2 The finishing X coordinate
* @param {Number} y2 The finishing Y coordinate
* @param {Object} params Additional parameters [delay, onComplete, speed]
*/
var bresenham = function(el, x1, y1, x2, y2, params) {
var
interval,
b,
m,
sx,
y;
var init = function() {
var dx, dy, sy;
// Default parameters
params = params || {};
params.delay = params.delay || 10;
params.onComplete = params.onComplete || function(){};
params.speed = params.speed || 5;
// No point in doing anything if we're not actually moving
if ((x1 == x2) && (y1 == y2)) {
plot(x1, y);
params.onComplete();
return;
}
el = ((typeof el === 'string') ? document.getElementById(el) : el);
// Initalize the math
dx = x2 - x1;
sx = (dx < 0) ? -1 : 1;
dy = y2 - y1;
sy = (dy < 0) ? -1 : 1;
m = dy / dx;
b = y1 - (m * x1);
interval = setInterval(next, params.delay);
};
/**
* Execute the algorithm and move the element
*/
var next = function() {
y = Math.round((m * x1) + b);
plot(x1, y);
x1 += (sx * params.speed);
if (x1 >= x2) {
clearInterval(interval);
params.onComplete();
}
};
/**
* Move the target element to the given coordinates
* @param float x The horizontal coordinate
* @param float y The vertical coordinate
*/
var plot = function(x, y) {
el.style.left = x + 'px';
el.style.top = y + 'px';
};
init();
};
</script>
</body>
</html>
el = document.createElement('div')to create the red box that is animated.