1. 程式人生 > >繪製曲線

繪製曲線

<!doctype html>

<html>

 

<head>

    <meta charset="utf-8">

    <title>繪製曲線-jq22.com</title>

    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>

    <style>

        body {

 

  margin:0;

  min-height:100vh;

  overflow:hidden;

  font-family:Helvetica,Sans-serif;

  font-size:85%;

}

 

 

form {

  position:absolute;

  top:0;

  left:0;

  z-index:100;

 

  padding:8px;

  font-size:80%;

}

 

form input[type=text] {

  width:30px;

  border:1px solid #000;

  text-align:center;

}

form button {

  margin:4px auto;

  border:1px solid #000;

  display:block;

}</style>

</head>

 

<body>

    <form id="settings" onsubmit="return false">

        Balls<br />

        <input type="range" id="inNum" value="20" min="4" max="300" /><br />

        Size<br />

        <input type="range" id="inSize" value="20" min="2" max="100" /><br />

        Speed<br />

        <input type="range" id="inSpeed" value="5" min="1" max="20" /><br />

        Delay<br />

        <input type="range" id="inDelay" value="8" min="1" max="50" /><br />

        <button id="btnSet">Go!</button><br />

        Presets:

        <button id="preset1">Atomic</button>

        <button id="preset2">Flower</button>

        <button id="preset3">Spiro</button>

        <button id="preset4">YinYang</button>

        <button id="preset0">Default</button>

    </form>

    <script type="text/javascript">

    // Create Canvas.

    var canvas = document.createElement('canvas');

    var ctx = canvas.getContext('2d');

    // Store all particles.

    var particles = [];

    // The default colorset.

    // Configure settings options

    var config = {};

    var settings = document.getElementById('settings');

    initSettings();

    // Init.

    resize();

    // Fire the Go! button.

    settings.btnSet.onclick();

    // Attach canvas.

    document.body.appendChild(canvas);

    // Begin drawing.

    window.requestAnimationFrame(draw);

    // Sync canvas to window.

    window.onresize = resize;

 

    function createBall(angle) {

        var n = 1;

        var origin = [

            canvas.width / 2,

            canvas.height / 2

        ]

        for (var i = 0; i < n; i++) {

            particles.push(new particle({

                angle: angle,

                pos: [origin[0], origin[1]],

                size: config.size,

                speed: config.speed,

                index: i

            }));

        }

    }

 

    function start(delay) {

        clear();

        config.toCreate = config.num;

    }

    // Drawing.

    var tick = 0;

 

    function draw() {

        for (var i = 0; i < particles.length; i++) {

            var p = particles[i];

            p.move();

            p.draw(ctx);

        }

        fade();

        window.requestAnimationFrame(draw);

        if (config.toCreate) {

            if (!(tick % (config.delay))) {

                createBall((180 / config.num) * config.toCreate);

                config.toCreate--;

            }

        }

        tick++;

    }

 

    function particle(options) {

        this.angle = 0;

        this.curve = 0;

        this.pos = [0, 0];

        this.size = 100;

        this.speed = 1;

        this.tick = 0;

        this.color = 'rgba(255,64,64,.95)';

        this.hue = 0;

        this.waveX = false;

        this.waveY = false;

        this.index = 0;

        // Override defaults.

        for (var i in options) {

            this[i] = options[i];

        }

        this.move = function() {

            this.angle += this.curve;

            var radians = this.angle * Math.PI / 180;

            this.pos[0] += Math.cos(radians) * this.speed * Math.cos(this.tick / 50),

                this.pos[1] += Math.sin(radians) * this.speed * Math.cos(this.tick / 50);

            this.hue++

            this.color = 'hsl(' + this.hue + ', 80%, 65%)';

            this.tick++;

        }

        this.draw = function(ctx) {

            ctx.strokeStyle = this.color;

            ctx.beginPath();

            ctx.arc(this.pos[0], this.pos[1], this.size, 0, 2 * Math.PI);

            ctx.stroke();

        }

    }

 

    function preset(options) {

        for (var i in options) {

            if (settings[i].type == 'checkbox') {

                settings[i].checked = options[i];

                continue;

            }

            settings[i].value = options[i];

        }

        clear();

        settings.btnSet.onclick();

    }

 

    function fade() {

        ctx.beginPath();

        ctx.fillStyle = 'rgba(0, 0, 0, .03)';

        ctx.fillRect(0, 0, canvas.width, canvas.height);

        ctx.fill();

    }

 

    function clear() {

        ctx.beginPath();

        ctx.fillStyle = 'rgba(0, 0, 0, 1)';

        ctx.fillRect(0, 0, canvas.width, canvas.height);

        ctx.fill();

        particles.length = 0;

    }

 

    function resize() {

        canvas.width = window.innerWidth;

        canvas.height = window.innerHeight;

    }

    /* Common functions */

    function rand(min, max) {

        return Math.random() * (max - min) + min;

    }

 

    function randColor(min, max) {

        var r = Math.floor(rand(min, max)),

            g = Math.floor(rand(min, max)),

            b = Math.floor(rand(min, max));

        return 'rgba(' + r + ',' + g + ',' + b + ',1)';

    }

    // Settings

    function preset(options) {

        for (var i in options) {

            settings[i].value = options[i];

        }

        settings.btnSet.onclick();

    }

 

    function initSettings() {