上升的颜色

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

'use strict';

// --------------------
// Init
// --------------------

var canvas = document.getElementById('canvas');
var image  = document.getElementById('image');

var context      = canvas.getContext('2d');
var imageContext = image.getContext('2d');

image.width  = window.innerWidth;
image.height = window.innerHeight;

canvas.width  = window.innerWidth;
canvas.height = window.innerHeight;

var img = new Image();

var wDifference = 0;
var hDifference = 0;
var imageWidth = 720;
var imageHeight = 460;

img.onload = function() {

wDifference = canvas.width - imageWidth;
    hDifference = canvas.height - imageHeight;
    imageContext.drawImage(this, (wDifference / 2), (hDifference / 2), imageWidth, imageHeight);
    new Stage();
};

function map(value, start1, stop1, start2, stop2) {
    return start2 + (stop2 - start2) * ((value - start1) / (stop1 - start1));
}

// --------------------
// Drawing
// --------------------

function Clear() {

this.update = function() {
        context.fillStyle = 'rgba(0, 0, 0, .08)';
        context.fillRect(0, 0, canvas.width, canvas.height);
        context.fill();
    };
}

function Ball(x, y, size) {

this.location     = new Vector(x, y);
    this.velocity     = new Vector(0, 0);
    this.acceleration = new Vector(0, -0.1);

this.size = size;
}

Ball.prototype.update = function() {

this.velocity.add(this.acceleration);
        this.velocity.limit(5);

this.location.add(this.velocity);

this.repeatOnEdges();
    };

Ball.prototype.repeatOnEdges = function() {

if (this.location.x < 0) {
            this.location.x = canvas.width;
        }

if (this.location.x > canvas.width) {
            this.location.x = 0;
        }

if (this.location.y < 0) {
            this.location.y = canvas.height;
            this.location.x = Math.random() * canvas.width;
        }

if (this.location.y > canvas.height) {
            this.location.y = 0;
        }
    };

function Balls() {

this.balls = [];

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

this.balls.push(
            new Ball(
                Math.random() * canvas.width,
                Math.random() * canvas.height,
                Math.floor(Math.random() * 100) + 20
            )
        );
    }
}

Balls.prototype.update = function() {

for (var i in this.balls) {

this.balls[i].update();
        }
    };

function Dots(imageData, balls) {

this.imageData = imageData;
    this.balls = balls;

this.locations = [];
    this.moveTo  = new Vector(0, 0);
    this.counter = 0;

this.locate();
}

Dots.prototype.locate = function() {

var i = 0;
        while(i <= this.imageData.length) {

if (this.imageData[i].c !== undefined) {

var c = this.imageData[i].c;
                this.imageData[i].s = 1;
                this.imageData[i].r = 0;

if (c.r > 1 && c.r < 255 &&
                    c.g > 1 && c.g < 255 &&
                    c.b > 1 && c.b < 255) {

this.locations.push(this.imageData[i]);
                }
            }

i+=110;
        }
    };

Dots.prototype.update = function() {

this.counter = 0;
        this.draw();
    };

Dots.prototype.draw = function() {

var loc = this.locations[this.counter];

if (loc.s > 0) {

var add = 0;

context.fillStyle =
                'rgba(' + loc.c.r + ','
                + loc.c.g + ','
                + loc.c.b + ', .7)';

for (var i in this.balls.balls) {

var ball = this.balls.balls[i];
                var distance = loc.v.distance(ball.location);
                var alpha = 0;

if (distance < ball.size) {
                    add = map(distance, 0, ball.size, 10, 1);
                    alpha = map(distance, 0, ball.size, 1, 0);

if (Math.random() < 0.01) {
                        context.fillStyle = 'rgba(255, 255, 255, .6)';
                    } else {
                        context.fillStyle =
                            'rgba(' + loc.c.r + ','
                            + loc.c.g + ','
                            + loc.c.b + ','
                            + alpha + ')';
                    }
                }
            }

context.beginPath();
            context.arc(loc.v.x, loc.v.y, loc.s + add, 0, Math.PI * 2, false)
            context.fill();
        }

this.counter += 1;

if (this.locations[this.counter] !== undefined) {

this.draw();
        }
    };

function ImageAnalytics() {

this.data = [];

this.startX = wDifference / 2;
    this.startY = hDifference / 2;
    this.endX = canvas.width - this.startX;
    this.endY = canvas.height - this.startY;

this.analyze();
    this.order();
}

ImageAnalytics.prototype.analyze = function() {

var colorData = imageContext.getImageData(this.startX, this.startY, imageWidth, imageHeight).data;

var counter = 0;
        var r = 0;
        var g = 0;
        var b = 0;
        var a = 0;

for (var i in colorData) {

switch (counter) {
                case 0:
                    r = colorData[i];
                    break;
                case 1:
                    g = colorData[i];
                    break;
                case 2:
                    b = colorData[i];
                    break;
                case 3:
                    a = colorData[i];
                    break;
            }

counter++;
            if (counter > 3) {

this.data.push({r:r, g:g, b:b, a:a});
                counter = 0;
            }
        }
    };

ImageAnalytics.prototype.order = function() {

var i = 0;

for (var y = this.startY ; y < this.endY ; y++) {
            for (var x = this.startX ; x < this.endX ; x++) {

this.data[i] = {v: new Vector(x, y), c: this.data[i]};

i++;
            }
        }
    };

// --------------------
// Animate
// --------------------

function Stage() {

this.clear = new Clear();
    this.analyze = new ImageAnalytics();
    this.balls = new Balls();

this.dots = new Dots(this.analyze.data, this.balls);

var animate = function() {

this.clear.update();
        this.balls.update();
        this.dots.update();

requestAnimationFrame(animate);

}.bind(this);

animate();
}

function Vector(x, y, z) {

this.x = x;
    this.y = y;
    this.z = z === undefined ? 0 : z;

this.add = function(v) {

this.x += v.x;
        this.y += v.y;
        this.z += v.z;
    };

this.multiply = function(n) {

this.x *= n;
        this.y *= n;
        this.z *= n;
    };

this.divide = function(n) {

this.x /= n;
        this.y /= n;
        this.z /= n;
    };

this.magnitude = function() {

return Math.sqrt(this.x * this.x + this.y * this.y + this.z * this.z);
    };

this.normalize = function() {
        var m = this.magnitude();
        if (m !== 0) {
            this.divide(m);
        }
    };

this.limit = function(n) {

if (this.magnitude() > n) {
            this.normalize();
            this.multiply(n);
        }
    };

this.distance = function(v) {

var dx = this.x - v.x,
            dy = this.y - v.y,
            dz = this.z - v.z;

return Math.sqrt(dx * dx + dy * dy + dz * dz);
    };

this.inverseX = function() {

this.x *= -1;
    };

this.inverseY = function() {

this.y *= -1;
    };

this.inverseZ = function() {

this.z *= -1;
    };

this.get = function() {

return new Vector(this.x, this.y, this.z);
    };

this.dot = function(v) {

return this.x * v.x + this.y * v.y + this.z * v.z;
    };
}

// -------------------------
// Vector: Static
// -------------------------

Vector.add = function(v1, v2) {

var v3 = new Vector(v1.x + v2.x, v1.y + v2.y, v1.z + v2.z);

return v3;
};

Vector.subtract = function(v1, v2) {

var v3 = new Vector(v1.x - v2.x, v1.y - v2.y, v1.z - v2.z);

return v3;
};

Vector.multiply = function(v1, v2) {

var v3 = new Vector(v1.x * v2.x, v1.y * v2.y, v1.z * v2.z);

return v3;
};

Vector.divide = function(v1, v2) {

if (typeof v2 === Vector) {
        var v3 = new Vector(v1.x / v2.x, v1.y / v2.y, v1.z / v2.z);
    } else {
        var v3 = new Vector(v1.x / v2, v1.y / v2, v1.z / v2);
    }

return v3;
};

Vector.distance = function(v1, v2) {

return v1.distance(v2);
};

Vector.random2D = function() {

var x = parseInt((Math.random() * 3)) -1;
    var y = parseInt((Math.random() * 3)) -1;
    var z = parseInt((Math.random() * 2)) -1;

var v1 = new Vector(x, y, z);
    return v1;
};

img.src = 'http://www.jq22.com/demo/ft-carousel201712202245/img/a3.png';

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg