JavaScript Challenge #1 (Spiral)

Frameworks & Extensions

Fiddle Options

http://mootools.net/blog/2012/07/25/javascript-challenge-1/ This week’s challenge is to find an elegant solution to generating elements in a spiral pattern. Consider the following diagram… Your solution can be procedural or recursive, but in either case you will be dealing with a shrinking grid of possible locations for elements. The colours do not have to be in the result - they are only used to indicate the pattern. Hint: Try defining variables for columns and rows so that the shape can change but the positioning and order remain the same.

Normalized CSS

Body tag

DTD

Framework <script> attribute

External Resources

Languages

Results

Ajax Requests

Echo apis are created to simulate Ajax calls: /echo/json/ for JSON, http://jsfiddle.net/echo/jsonp/ for JSONP, /echo/html/ for HTML and /echo/xml/ for XML.

Please read API documentation and follow examples.

Examples

Legal, Credits and Links

Created and maintained by Piotr and Oskar.

Hosted by DigitalOcean.

Special thanks to MooTools community.

License

All code belongs to the poster and no license is enforced.

JSFiddle or its authors are not responsible or liable for any loss or damage of any kind during the usage of provided code.

Links

Please read the documentation.
For updates please follow our blog, tweets or become a fan.

Tip JSFiddle

Keyboard shortcuts

HTML

var mtChallange1 = new Object({
    'spiral': document.getElementById('spiral'),
    // container
    'elements': new Array(),

'makeSpiral': function(x, y) {
        this.spiral.innerHTML = ''; // clear spiral
        var dimensions = 50; // .box width and height in px
        var count = x * y,
            dxi = 0,
            dx = x - dxi,
            dyi = 1,
            dy = y - dyi; // total count, direction on x and y axes and their counters
        var dirs = [
            ['left', 1],
            ['top', 1],
            ['left', -1],
            ['top', -1]
            ]; // direction and modifier
        var di = 0; // direction counter
        var d = dirs[di]; // direction
        // loop
        var top = 0,
            left = 0,
            side = '',
            modifier = 0;
        var bgStart = 240,
            bgStep = 128 / count,
            bgHex, bgColor;
        var i = 0,
            e = null; // main couner, new element
        for (i; i < count; i++) {
            side = d[0], modifier = d[1]; // if direction counter hits 0, change direction
            if (side == 'left') {
                left += modifier * dimensions;
                dx--;
                if (dx == 0) {
                    di++;
                    dxi++;
                    dx = x - dxi;
                }
            }
            if (side == 'top') {
                top += modifier * dimensions;
                dy--;
                if (dy == 0) {
                    di++;
                    dyi++;
                    dy = y - dyi;
                }
            }
            d = dirs[di % 4]; // change direction
            bgHex = Math.round(bgStart - i * bgStep);
            bgHex = bgHex.toString(16);
            bgColor = '#' + bgHex + bgHex + bgHex;

e = document.createElement('div'); // create element
            e.className = 'box';
            e.style.top = top + 'px';
            e.style.left = left + 'px';
            e.style.backgroundColor = bgColor;
            e.innerHTML = i;
            this.elements.push(e); // add new element
        }
    },

'counter': 0,
    'delay': 100,

'addElement': function() {
        if (this.counter < this.elements.length) {
            this.spiral.appendChild(this.elements[this.counter]);
            this.counter++;
            setTimeout("mtChallange1.addElement()", mtChallange1.delay);
        }
    },

'showSpiral': function(cols, rows, delay) {
        this.delay = delay || 100;
        this.makeSpiral(cols, rows);
        this.addElement();
    }
});

mtChallange1.showSpiral(8, 4);

JavaScript

CSS

Result

Frameworks & Extensions

Fiddle Options

External Resources

Languages

Ajax Requests

Examples

jQuery

Dojo

Mootools

YUI

Processing.js

ExtJS

Legal, Credits and Links