iOS7 striped wallpaper generator

asdasdasd

by vijayweb

HTML

<script src="https://raw.github.com/matthewlein/cicadaJS/master/cicada.1.0.js"></script>
<body>
    <div class="container">
        <canvas></canvas>
        <img src=""></img>
        <div class="menu">
             <h2>iOS7 striped wallpaper generator</h2>

            <p>Refresh this page to change the pattern, tap and hold the image to save it, <a href="https://www.icloud.com/photostream/#A1GY8gBYGUaIOe" target="blank">see some examples</a>

            </p>
        </div>
    </div>
</body>

CSS

html, body {
    height: 100%;
    font-family: Helvetica-neue ultralight, helvetica-neue, helvetica, verdana;
}
.menu {
    display: block;
    position: absolute;
    top: 100px;
    left: 100px;
    background-color: rgba(255, 255, 255, 0.7);
    padding: 15px;
    color: #000;
    transition: all 1s ease-out;
    width: 450px;
}
.menu a, .menu p {
    color: #000;
    margin: 4px;
    font-size: x-large;
}

JavaScript

var randomColor = function () {
    var hex = ['0', '1', '2', '3', '4', '5', '6', '7',
        '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'];
    var color = '#',
        i;
    for (i = 0; i < 6; i++) {
        color = color + hex[Math.floor(Math.random() * 16)];
    }
    return color;
};

var Palette = function () {
    this.index = 0;
    this.palette = [];
};

Palette.prototype = {
    generate_random: function (n) {
        for (var i = 0; i < n; i++) {
            var color = randomColor();
            this.palette.push(color);
        }
    },
    color_get_next: function () {
        var index = this.index % this.palette.length;
        this.index++;
        return this.palette[index];
    }
};

var MainView = function () {
    this.canvas = document.querySelector('canvas');
    this.menu = document.querySelector('.menu');
    this.image = document.querySelector('img');
}

MainView.prototype = {
    init: function () {
        var self = this;
        setTimeout(function () {
            self.menu_init();
        }, 5000);
        this.canvas.hidden = true;
    },

    menu_init: function () {
        var menu = this.menu;
        menu.style.opacity = 0;
        this.image.addEventListener("click", function () {
            if (menu.style.opacity == 1) {
                menu.style.opacity = 0;
            } else {
                menu.style.opacity = 1;
            }
        });
    },

    draw: function (options) {
        options = options || {};
        var max_width = options.max_width || 100;
        var width_unit = options.width_unit || 1;
        var num_colors = options.num_colors || 500;

        var image = this.image;
        var canvas = this.canvas;
        var context = canvas.getContext("2d");

        // We make it slightly larger because iOS7 wants larger background
        // to exploit the parallax effect
        canvas.width = document.body.clientWidth * 1.2;
        canvas.height = document.body.clientHeight * 1.2;
       ...