Here’s the source code:

<br /> /**<br /> * Bresenham’s line algorithm function<br /> * by Matt Hackett [scriptnode.com]<br /> * @param {Object} el The element to target (accepts both strings for id’s and element objects themselves)<br /> * @param {Number} x1 The starting X coordinate<br /> * @param {Number} y1 The starting Y coordinate<br /> * @param {Number} x2 The finishing X coordinate<br /> * @param {Number} y2 The finishing Y coordinate<br /> * @param {Object} params Additional parameters [delay, onComplete, speed]<br /> */<br /> var bresenham = function(el, x1, y1, x2, y2, params) {</p> <p> var<br /> interval,<br /> b,<br /> m,<br /> sx,<br /> y;</p> <p> var init = function() {</p> <p> var dx, dy, sy;</p> <p> // Default parameters<br /> params = params || {};<br /> params.delay = params.delay || 10;<br /> params.onComplete = params.onComplete || function(){};<br /> params.speed = params.speed || 5;</p> <p> // No point in doing anything if we’re not actually moving<br /> if ((x1 == x2) && (y1 == y2)) {<br /> plot(x1, y);<br /> params.onComplete();<br /> return;<br /> }</p> <p> el = ((typeof el === ’string’) ? document.getElementById(el) : el);</p> <p> // Initalize the math<br /> dx = x2 – x1;<br /> sx = (dx < 0) ? -1 : 1;<br /> dy = y2 – y1;<br /> sy = (dy < 0) ? -1 : 1;<br /> m = dy / dx;<br /> b = y1 – (m * x1);</p> <p> interval = setInterval(next, params.delay);</p> <p> };</p> <p> /**<br /> * Execute the algorithm and move the element<br /> */<br /> var next = function() {</p> <p> y = Math.round((m * x1) + b);<br /> plot(x1, y);<br /> x1 += (sx * params.speed);</p> <p> if (x1 >= x2) {<br /> clearInterval(interval);<br /> params.onComplete();<br /> }</p> <p> };</p> <p> /**<br /> * Move the target element to the given coordinates<br /> * @param float x The horizontal coordinate<br /> * @param float y The vertical coordinate<br /> */<br /> var plot = function(x, y) {<br /> el.style.left = x + ‘px’;<br /> el.style.top = y + ‘px’;<br /> };</p> <p> init();</p> <p>};<br />

The parameters are self-explanatory except for the (optional) params object. Here’s a breakdown:

• delay: The interval that the setInterval call uses [default: 10]
• onComplete: An optional function to call when the algorithm is finished
• speed: How quickly to move the element down the line [default: 5]

I’m not sure how much use this has in the “real world” but it’s typically pretty neat to see elements dancing around the page,
and I always love to see classic algorithms put to good use.
Enjoy!

• [Download bresenhams-line-algorithm.js] (1,769 bytes)
• [Download bresenhams-line-algorithm-min.js] (516 bytes; compressed)

Here’s a simple script to get a random range:

<br /> var rand = function(from, to) {<br /> return (from + Math.floor((to – from + 1) * Math.random()));<br /> };<br />

Try the button below to get a random number between 50 and 100:

50 – 100

It’s that easy! Enjoy.