CSS3混合模式绘图

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

var project;
(function (project) {
    var ColorUtil = (function () {
        function ColorUtil() {
        }
        /**
         * Converts an HSL color value to RGB. Conversion formula
         * adapted from http://en.wikipedia.org/wiki/HSL_color_space.
         *
         * @param   {number}  h       The hue (0-360)
         * @param   {number}  s       The saturation (0-100)
         * @param   {number}  l       The lightness (0-100)
         * @return  {number}           The RGB representation
         */
        ColorUtil.hslToRgb = function (h, s, l) {
            h = h % 360;
            var m1, m2, hue;
            var r, g, b;
            s /= 100;
            l /= 100;
            if (s == 0) {
                r = g = b = (l * 255);
            }
            else {
                if (l <= 0.5)
                    m2 = l * (s + 1);
                else
                    m2 = l + s - l * s;
                m1 = l * 2 - m2;
                hue = h / 360;
                r = Math.round(ColorUtil.hueToRgb(m1, m2, hue + 1 / 3));
                g = Math.round(ColorUtil.hueToRgb(m1, m2, hue));
                b = Math.round(ColorUtil.hueToRgb(m1, m2, hue - 1 / 3));
            }
            var color = (r << 16) | (g << 8) | b;
            return color;
        };
        /**
         * HUE の?を RGB として返却します。
         * @param {number} m1
         * @param {number} m2
         * @param {number} hue
         * @returns {number}
         */
        ColorUtil.hueToRgb = function (m1, m2, hue) {
            var v;
            if (hue < 0)
                hue += 1;
            else if (hue > 1)
                hue -= 1;
            if (6 * hue < 1)
                v = m1 + (m2 - m1) * hue * 6;
            else if (2 * hue < 1)
                v = m2;
            else if (3 * hue < 2)
                v = m1 + (m2 - m1) * (2 / 3 - hue) * 6;
            else
                v = m1;
            return 255 * v;
        };
        return ColorUtil;
    })();
    project.ColorUtil = ColorUtil;
})(project || (project = {}));
var project;
(function (project) {
    /**
     * グラフィックのユ┼ティリティ┼クラスです。
     * @class project.GraphicUtil
     */
    var GraphicUtil = (function () {
        function GraphicUtil() {
        }
        /**
         * 五芒星の?点座?を?算します。
         * @param radius {number}    半径
         * @returns {{x:number; y:number;}[]}
         */
        GraphicUtil.createStartPoints = function (radius, offsetX, offsetY) {
            //五芒星の?の角度
            var c1 = GraphicUtil.createCordinate(radius, -90, offsetX, offsetY);
            var c2 = GraphicUtil.createCordinate(radius, -234, offsetX, offsetY);
            var c3 = GraphicUtil.createCordinate(radius, -18, offsetX, offsetY);
            var c4 = GraphicUtil.createCordinate(radius, -162, offsetX, offsetY);
            var c5 = GraphicUtil.createCordinate(radius, -306, offsetX, offsetY);
            return [c1, c2, c3, c4, c5];
        };
        GraphicUtil.createCordinate = function (radius, angle, offsetX, offsetY) {
            var x = radius * Math.cos(angle / 180 * Math.PI);
            var y = radius * Math.sin(angle / 180 * Math.PI);
            return {
                "x": x + offsetX,
                "y": y + offsetY
            };
        };
        return GraphicUtil;
    })();
    project.GraphicUtil = GraphicUtil;
})(project || (project = {}));
/// <reference path="easeljs/easeljs.d.ts" />
var project;
(function (project) {
    /**
     * ベクトルパスのクラスです。
     */
    var Path = (function () {
        function Path() {
            this.prev = new createjs.Point();
            this.prev2 = new createjs.Point();
            this.point = new createjs.Point();
            this.mouse = new createjs.Point();
        }
        /**
         * セットアップします。
         * @param {number} x
         * @param {number} y
         * @param {number} _accele マウスから滕れて行く?の加速?
         * @param {number} delayFrame
         * @param {number} percent
         */
        Path.prototype.setup = function (x, y, _accele, delayFrame, percent) {
            if (x === void 0) { x = 0; }
            if (y === void 0) { y = 0; }
            if (_accele === void 0) { _accele = 0.1; }
            if (delayFrame === void 0) { delayFrame = 0; }
            if (percent === void 0) { percent = 0.0; }
            this.xx = this.prev2.x = this.prev.x = this.point.x = innerWidth / 2;
            this.yy = this.prev2.y = this.prev.y = this.point.y = innerHeight / 2;
            this.delayFrame = delayFrame;
            this.percent = percent;
            //初期化
            this.vx = this.vy = 0.0;
            this.ac = _accele;
            this.de = 0.85;
            this.wd = 0.05;
            this.pivotX = 40 * ((Math.random() + Math.random() + Math.random()) / 3 - 0.5) >> 0;
            this.pivotY = 40 * ((Math.random() + Math.random() + Math.random()) / 3 - 0.5) >> 0;
        };
        Path.prototype.setMousePosition = function (x, y, needReset) {
            this.mouse.x = x + this.pivotX;
            this.mouse.y = y + this.pivotY;
            if (needReset) {
                this.resetPosition(x, y);
            }
        };
        /**
         * 更新します。
         */
        Path.prototype.update = function () {
            this.prev2.x = this.prev.x;
            this.prev2.y = this.prev.y;
            this.prev.x = this.point.x;
            this.prev.y = this.point.y;
            // 参考
            // http://gihyo.jp/design/feature/01/frocessing/0004?page=1
            //加速度??
            this.vx += (this.mouse.x - this.xx) * this.ac;
            this.vy += (this.mouse.y - this.yy) * this.ac;
            this.xx += this.vx;
            this.yy += this.vy;
            //?衰?理
            this.vx *= this.de;
            this.vy *= this.de;
            this.point.x = this.xx;
            this.point.y = this.yy;
        };
        Path.prototype.resetPosition = function (x, y) {
            x += +this.pivotX;
            y += +this.pivotY;
            this.point.x = x;
            this.point.y = y;
            this.prev2.x = x;
            this.prev2.y = y;
            this.mouse.x = this.prev.x = this.xx = x;
            this.mouse.y = this.prev.y = this.yy = y;
            this.vx = this.vy = 0.0;
        };
        return Path;
    })();
    project.Path = Path;
})(project || (project = {}));
var project;
(function (project) {
    /**
     * パ┼ティクルのテクスチャを生成する初期化用クラスです。
     */
    var ParticleInitializer = (function () {
        function ParticleInitializer() {
        }
        /**
         * パ┼ティクルの模?を作成します。
         */
        ParticleInitializer.generate = function () {
            var spriteSheetBuilder = new createjs.SpriteSheetBuilder();
            spriteSheetBuilder.padding = 2;
            for (var i = 0; i < ParticleInitializer.NUM_PARTICLE; i++) {
                var shape = new createjs.Shape();
                var size = Math.random() * Math.random() * Math.random() * 120 + 4;
                var colorHsl = createjs.Graphics.getHSL(160 + 20 * Math.random(), 0 + Math.random() * 20, 50 + Math.random() * 50);
                shape.graphics.clear();
                // ?
                if (Math.random() < 0.7) {
                    if (Math.random() < 0.3) {
                        // もやっとした?
                        shape.graphics.beginRadialGradientFill([colorHsl, "#000000"], [0.0, 1.0], 0, 0, size / 10, 0, 0, size);
                    }
                    else if (Math.random() < 0.5) {
                        // キリッとした?
                        shape.graphics.beginFill(colorHsl);
                    }
                    else {
                        // ?郭だけの?
                        shape.graphics
                            .setStrokeStyle(2) // ?の太さ
                            .beginStroke(createjs.Graphics.getRGB(255, 255, 255));
                    }
                    shape.graphics.drawCircle(0, 0, size);
                    shape.graphics.endFill();
                }
                else if (Math.random() < 0.5) {
                    if (Math.random() < 0.1) {
                        // キリッとした?
                        shape.graphics.beginFill(colorHsl);
                    }
                    else {
                        // ?郭だけの?
                        shape.graphics
                            .setStrokeStyle(2) // ?の太さ
                            .beginStroke(createjs.Graphics.getRGB(255, 255, 255));
                    }
                    shape.graphics
                        .drawRect(-size, -size, size * 2, size * 2)
                        .endFill();
                }
                else {
                    if (Math.random() < 0.5) {
                        // キリッとした?
                        shape.graphics.beginFill(colorHsl);
                    }
                    else {
                        // ?郭だけの?
                        shape.graphics
                            .setStrokeStyle(2) // ?の太さ
                            .beginStroke(createjs.Graphics.getRGB(255, 255, 255));
                    }
                    var takasa = size * Math.sin(Math.PI / 3);
                    shape.graphics
                        .moveTo(-size / 2, size / 2)
                        .lineTo(0, size / 2 - takasa)
                        .lineTo(+size / 2, size / 2)
                        .closePath()
                        .endFill();
                }
                var padding = 4;
                shape.cache(-size - padding, -size - padding, size * 2 + padding * 2, size * 2 + padding * 2);
                var frameNum = spriteSheetBuilder.addFrame(shape);
                spriteSheetBuilder.addAnimation("particle_" + i, [frameNum]);
            }
            spriteSheetBuilder.build();
            ParticleInitializer.convertSpriteSheet(spriteSheetBuilder.spriteSheet);
        };
        /**
         * CreateJS のスプライトシ┼トビルダ┼を使られたスプライトシ┼トを
         * Pixi.js のスプライトシ┼ト?能に展檫するクラス。
         */
        ParticleInitializer.convertSpriteSheet = function (spriteSheet) {
            var textureOriginal = PIXI.Texture.fromCanvas(spriteSheet._images[0]);
            for (var frameLabel in spriteSheet._data) {
                var animation = spriteSheet.getAnimation(frameLabel);
                var frame = spriteSheet.getFrame(animation.frames[0]);
                var textureSize = new PIXI.Rectangle(frame.rect.x, frame.rect.y, frame.rect.width, frame.rect.height);
                PIXI.utils.TextureCache[frameLabel] = new PIXI.Texture(textureOriginal.baseTexture, textureSize);
            }
        };
        ParticleInitializer.NUM_PARTICLE = 200;
        return ParticleInitializer;
    })();
    project.ParticleInitializer = ParticleInitializer;
})(project || (project = {}));
/// <reference path="pixi/pixi.d.ts" />
/// <reference path="ParticleInitializer.ts" />
var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    __.prototype = b.prototype;
    d.prototype = new __();
};
var project;
(function (project) {
    /**
     * パ┼ティクル表示クラスです。
     * @class demo.Particle
     */
    var Particle = (function (_super) {
        __extends(Particle, _super);
        /**
         * コンストラクタ
         * @constructor
         */
        function Particle() {
            var texture = PIXI.Texture.fromFrame("particle_" + (project.ParticleInitializer.NUM_PARTICLE * Math.random() >> 0));
            _super.call(this, texture);
            this.blendMode = PIXI.BLEND_MODES.SCREEN;
            this.pivot.x = texture.frame.width / 2;
            this.pivot.y = texture.frame.height / 2;
            this._destroy = true;
        }
        /**
         * パ┼ティクルをリセットします。
         * @param emitX
         * @param emitY
         * @param vx
         * @param vy
         * @param vAngular
         */
        Particle.prototype.resetParameters = function (emitX, emitY, vx, vy, vAngular) {
            this.x = emitX;
            this.y = emitY;
            this.vx = vx * 0.5 + (Math.random() - 0.5) * 10;
            this.vy = vy * 0.5 + (Math.random() - 0.5) * 10;
            this.life = Math.random() * Math.random() * 300 + 30;
            this._count = 0;
            this._destroy = false;
            this.rotation = 360 * Math.random();
            this._vAngular = vAngular;
            this.alpha = 1.0;
            this.scale.x = this.scale.y = 1.0;
        };
        /**
         * パ┼ティクル??の内部?算を行います。
         * @method
         */
        Particle.prototype.update = function () {
            // Gravity
            this.vy += 0.2;
            this.x += this.vx;
            this.y += this.vy;
            this.rotation += this._vAngular;
            this._count++;
            var maxD = (1 - this._count / this.life * 1 / 3);
            this.alpha = Math.random() * 0.4 + 0.6 * this._count / this.life;
            this.scale.x = this.scale.y = maxD;
            // 死亡フラグ
            if (this.life < this._count) {
                this._destroy = true;
                this.parent.removeChild(this);
            }
        };
        /**
         * パ┼ティクルが死んでいるかどうかを催帐します。
         * @returns {boolean}
         * @method
         */
        Particle.prototype.getIsDead = function () {
            return this._destroy;
        };
        return Particle;
    })(PIXI.Sprite);
    project.Particle = Particle;
})(project || (project = {}));
/// <reference path="Particle.ts" />
var project;
(function (project) {
    /**
     * パ┼ティクル半生装置。マウス座?から速度を?算します。
     * @class project.Emitter
     */
    var Emitter = (function () {
        /**
         * @constructor
         */
        function Emitter() {
            /** 速度(X方向)です。 */
            this.vy = 0;
            /** 速度(Y方向)です。 */
            this.x = 0;
            /** マウスのX座?です。 */
            this.latestY = 0;
            /** マウスのY座?です。 */
            this.latestX = 0;
            /** パ┼ティクル半生のX座?です。 */
            this.y = 0;
            /** パ┼ティクル半生のY座?です。 */
            this.vx = 0;
            /** ?在のベクトルの角度です。 */
            this.angular = 0;
            /** 角速度です。 */
            this.vAngular = 0;
        }
        /**
         * パ┼ティクルエミッタ┼の?算を行います。この?算によりマウスの引力が?算されます。
         * @method
         */
        Emitter.prototype.update = function () {
            var dx = this.latestX - this.x;
            var dy = this.latestY - this.y;
            var d = Math.sqrt(dx * dx + dy * dy) * 0.2;
            var rad = Math.atan2(dy, dx);
            this.vx += Math.cos(rad) * d;
            this.vy += Math.sin(rad) * d;
            this.vx *= 0.4;
            this.vy *= 0.4;
            this.x += this.vx;
            this.y += this.vy;
            this.vAngular = rad - this.angular;
            this.angular = rad;
        };
        return Emitter;
    })();
    project.Emitter = Emitter;
    /**
     * パ┼ティクルエミッタ┼のクラスです。
     * @class project.ParticleEmitter
     */
    var ParticleEmitter = (function (_super) {
        __extends(ParticleEmitter, _super);
        /**
         * @constructor
         */
        function ParticleEmitter() {
            _super.call(this);
            this.numParticles = 10;
            this.PRE_CACHE_PARTICLES = 300;
            this.container = new PIXI.Container();
            this._particleActive = [];
            this._particlePool = [];
            /* 予め必要そうな分だけ作成しておく */
            for (var i = 0; i < this.PRE_CACHE_PARTICLES; i++) {
                this._particlePool.push(new project.Particle());
            }
        }
        /**
         * パ┼ティクルを半生させます。
         * @param {number} x パ┼ティクルの半生座?
         * @param {number} y パ┼ティクルの半生座?
         * @method
         */
        ParticleEmitter.prototype.emit = function (x, y) {
            for (var i = 0; i < this.numParticles; i++) {
                this.getNewParticle(x, y);
            }
        };
        /**
         * パ┼ティクルを更新します。
         * @method
         */
        ParticleEmitter.prototype.update = function () {
            _super.prototype.update.call(this);
            for (var i = 0; i < this._particleActive.length; i++) {
                var p = this._particleActive[i];
                if (!p.getIsDead()) {
                    if (p.y >= window.innerHeight) {
                        p.vy *= -0.9;
                        p.y = window.innerHeight;
                    }
                    else if (p.y <= 0) {
                        p.vy *= -0.9;
                        p.y = 0;
                    }
                    if (p.x >= window.innerWidth) {
                        p.vx *= -0.9;
                        p.x = window.innerWidth;
                    }
                    else if (p.x <= 0) {
                        p.vx *= -0.9;
                        p.x = 0;
                    }
                    p.update();
                }
                else {
                    this.removeParticle(p);
                }
            }
        };
        /**
         * パ┼ティクルを追加します。
         * @param {THREE.Vector3} emitPoint
         * @return {project.Particle}
         * @method
         */
        ParticleEmitter.prototype.getNewParticle = function (emitX, emitY) {
            var p = this.fromPool();
            p.resetParameters(this.x, this.y, this.vx, this.vy, this.vAngular);
            this._particleActive.push(p);
            this.container.addChild(p);
            return p;
        };
        /**
         * パ┼ティクルを削除します。
         * @param {Particle} particle
         * @method
         */
        ParticleEmitter.prototype.removeParticle = function (p) {
            this.container.removeChild(p);
            var index = this._particleActive.indexOf(p);
            if (index > -1) {
                this._particleActive.splice(index, 1);
            }
            this.toPool(p);
        };
        /**
         * アクティブなパ┼ティクルを取り出します。
         * @returns {project.Particle[]}
         * @method
         */
        ParticleEmitter.prototype.getActiveParticles = function () {
            return this._particleActive;
        };
        /**
         * プ┼ルからインスタンスを取り出します。
         * プ┼ルになければ新しいインスタンスを作成します。
         * @returns {project.Particle}
         * @method
         */
        ParticleEmitter.prototype.fromPool = function () {
            if (this._particlePool.length > 0)
                return this._particlePool.shift();
            else
                return new project.Particle();
        };
        /**
         * プ┼ルにインスタンスを格见します。
         * @param {project.Particle}
         * @method
         */
        ParticleEmitter.prototype.toPool = function (particle) {
            this._particlePool.push(particle);
        };
        return ParticleEmitter;
    })(Emitter);
    project.ParticleEmitter = ParticleEmitter;
})(project || (project = {}));
/// <reference path="pixi/pixi.d.ts" />
/// <reference path="easeljs/easeljs.d.ts" />
/// <reference path="Path.ts" />
/// <reference path="ColorUtil.ts" />
/// <reference path="GraphicUtil.ts" />
/// <reference path="ParticleEmitter.ts" />
/// <reference path="Particle.ts" />
var project;
(function (project) {
    // 初期化命令
    window.addEventListener("load", function () {
        new project.Main();
    });
    /**
     * パ┼ティクルデモのメインクラスです。
     * @class project.Main
     */
    var Main = (function () {
        /**
         * @constructor
         */
        function Main() {
            var _this = this;
            this.stage = new PIXI.Container();
            this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x000000 });
            document.body.appendChild(this.renderer.view);
            // パ┼ティクルサンプルを作成
            var sample = new ParticleSample();
            this.stage.addChild(sample);
            // Tickerを作成
            createjs.Ticker.timingMode = createjs.Ticker.RAF;
            createjs.Ticker.on("tick", this.handleTick, this);
            this.stats = new Stats();
            document.body.appendChild(this.stats.domElement);
            // リサイズイベント
            this.handleResize();
            window.addEventListener("resize", function () {
                _this.handleResize();
            });
        }
        /**
         * エンタ┼フレ┼ムイベント
         */
        Main.prototype.handleTick = function () {
            // create residual image effect
            this.renderer.render(this.stage);
            this.stats.update();
        };
        /**
         * リサイズイベント
         */
        Main.prototype.handleResize = function () {
            this.renderer.resize(innerWidth, innerHeight);
        };
        return Main;
    })();
    project.Main = Main;
    /**
     * 大量のパ┼ティクルを半生させてみた
     * マウスを押してる殓でてくるよ
     * @see http://wonderfl.net/c/4WjT
     * @class demo.ParticleSample
     */
    var ParticleSample = (function (_super) {
        __extends(ParticleSample, _super);
        function ParticleSample() {
            var _this = this;
            _super.call(this);
            // パ┼ティクルを初期化
            project.ParticleInitializer.generate();
            this.interactive = true;
            this._count = 0;
            this._bg = new PIXI.Graphics();
            this.addChild(this._bg);
            this.canvasForDisplay = document.createElement("canvas");
            this.canvasForDisplay.className = "drawing";
            this.canvasForDisplay.style.pointerEvents = "none";
            var canvasForEasel = document.createElement("canvas");
            this.stageEaselJS = new createjs.Stage(canvasForEasel);
            document.body.appendChild(this.canvasForDisplay);
            var max = 1500;
            this.pathList = [];
            this.mousePositions = [];
            for (var i = 0; i < max; i++) {
                var p = new project.Path();
                p.setup(0, 0, 0.3 + i / max * 0.5, (180 * Math.random() >> 0), (i + 1) / max);
                this.pathList.push(p);
            }
            this._lines = new createjs.Shape();
            this.stageEaselJS.addChild(this._lines);
            this._linePoint = [];
            this._emitter = new project.ParticleEmitter();
            this._emitter.latestX = innerWidth / 2;
            this._emitter.latestY = innerHeight / 2;
            this.addChild(this._emitter.container);
            this._shadow = new PIXI.Sprite(PIXI.Texture.fromImage("imgs/Shadow-assets/Shadow.png"));
            this._shadow.blendMode = PIXI.BLEND_MODES.SCREEN;
            this.addChild(this._shadow);
            // -------------------------
            // オ┼プニングアニメ┼ション
            // -------------------------
            var sx = window.innerWidth / 2;
            var sy = window.innerHeight / 2;
            this._isAutoAnimation = true;
            var points = project.GraphicUtil.createStartPoints(window.innerWidth / 3, sx, sy);
            this._pointAutoMotion = new createjs.Point(points[4].x, points[4].y);
            this._emitter.latestX = this._emitter.x = points[0].x;
            this._emitter.latestY = this._emitter.y = points[0].y;
            var tw = createjs.Tween
                .get(this._pointAutoMotion);
            for (var i = 0; i < 2; i++) {
                for (var j = 0; j < points.length; j++) {
                    tw.to(points[j], 250 + 100 * Math.random(), createjs.Ease.quartInOut);
                }
            }
            tw.call(function () {
                _this._isAutoAnimation = false;
                _this._isDown = false;
                _this.buttonMode = true;
                document.getElementById("attention").classList.add("show");
            });
            this._isDown = true;
            this.buttonMode = false;
            // -------------------------
            // イベントの登彖
            // -------------------------
            this
                .on("mousedown", this.handleMouseDown, this)
                .on('touchstart', this.handleMouseDown, this)
                .on("mousemove", this.handleMouseMove, this)
                .on('touchmove', this.handleMouseMove, this)
                .on("mouseup", this.handleMouseUp, this)
                .on("mouseupoutside", this.handleMouseUp, this)
                .on("touchend", this.handleMouseUp, this)
                .on("touchendoutside", this.handleMouseUp, this);
            createjs.Ticker.on("tick", this.enterFrameHandler, this);
            this.handleResize();
            window.addEventListener("resize", function () {
                _this.handleResize();
            });
        }
        /**
         * エンタ┼フレ┼ムイベント
         * @param event
         */
        ParticleSample.prototype.enterFrameHandler = function (event) {
            if (this._isAutoAnimation == true) {
                // オ┼プニング中は自?的に代入する
                this._emitter.latestX = this._pointAutoMotion.x;
                this._emitter.latestY = this._pointAutoMotion.y;
            }
            else {
            }
            if (this._isDown) {
                this.createParticle();
            }
            this.mousePositions.unshift({ x: this._emitter.latestX, y: this._emitter.latestY, isDown: this._isDown });
            for (var i = 0; i < this.pathList.length; i++) {
                var p = this.pathList[i];
                if (this.mousePositions.length > p.delayFrame) {
                    var position = this.mousePositions[p.delayFrame];
                    //    マウスの位置更新
                    p.setMousePosition(position.x, position.y, !position.isDown);
                    p.update();
                }
            }
            var gCurve = this._lines.graphics;
            gCurve.clear();
            gCurve.setStrokeStyle(1);
            for (var i = 0; i < this.pathList.length; i++) {
                var p = this.pathList[i];
                // マウスの?叟を?数に保存
                var p0x = p.point.x;
                var p0y = p.point.y;
                var p1x = p.prev.x;
                var p1y = p.prev.y;
                var p2x = p.prev2.x;
                var p2y = p.prev2.y;
                if (p0x == p2x || p0y == p2y)
                    continue;
                if (p0x == p1x || p0y == p1y)
                    continue;
                // カ┼ブ用の?点を割り出す
                var curveStartX = (p2x + p1x) / 2;
                var curveStartY = (p2y + p1y) / 2;
                var curveEndX = (p0x + p1x) / 2;
                var curveEndY = (p0y + p1y) / 2;
                // カ┼ブは中殓点を劫ぶ。マウスの座?は制御点として?う。
                var colorLine = createjs.Graphics.getHSL(180, 100, 100, p.percent);
                gCurve
                    .beginStroke(colorLine)
                    .moveTo(curveStartX, curveStartY)
                    .curveTo(p1x, p1y, curveEndX, curveEndY)
                    .endStroke();
            }
            var color1 = { h: new Date().getTime() / 40, s: 30, l: 40 };
            var color2 = { h: (new Date().getTime() + 40 * 89) / 40, s: 70, l: 70 };
            this._bg.clear();
            // グラデ┼ションを作るための?理矢理な手法
            for (var i = 0, max = 1024; i < max; i++) {
                var color = project.ColorUtil.hslToRgb(color1.h * (i / max) + color2.h * (1 - i / max), color1.s * (i / max) + color2.s * (1 - i / max), color1.l * (i / max) + color2.l * (1 - i / max));
                this._bg.beginFill(color, 1.0);
                this._bg.drawRect(0, window.innerHeight * i / max, window.innerWidth, window.innerHeight / max);
            }
            this._emitter.update();
            if (this._isDown) {
                this._linePoint.push({
                    x: this._emitter.x,
                    y: this._emitter.y,
                    vx: this._emitter.vx,
                    vy: this._emitter.vy,
                    angular: this._emitter.angular
                });
            }
            else {
                this._linePoint.shift();
            }
            if (max > 200) {
                this._linePoint.shift();
            }
            var contextForDisplay = this.canvasForDisplay.getContext("2d");
            contextForDisplay.globalCompositeOperation = "source-over";
            contextForDisplay.setTransform(1, 0, 0, 1, 0, 0);
            contextForDisplay.fillStyle = "rgba(0, 0, 0, 0.1)";
            contextForDisplay.fillRect(0, 0, innerWidth, innerHeight);
            contextForDisplay.drawImage(this.stageEaselJS.canvas, 0, 0);
            this.stageEaselJS.update();
        };
        ParticleSample.prototype.handleMouseDown = function (event) {
            if (this._isAutoAnimation == true) {
                return; // OPアニメ┼ション中はイベントを??化
            }
            var data = event.data;
            this._isDown = true;
            this._emitter.x = data.global.x;
            this._emitter.y = data.global.y;
            this._emitter.latestX = data.global.x;
            this._emitter.latestY = data.global.y;
        };
        ParticleSample.prototype.handleMouseMove = function (event) {
            if (this._isAutoAnimation == true) {
                return; // OPアニメ┼ション中はイベントを??化
            }
            var data = event.data;
            this._emitter.latestX = data.global.x;
            this._emitter.latestY = data.global.y;
        };
        ParticleSample.prototype.handleMouseUp = function (event) {
            if (this._isAutoAnimation == true) {
                return; // OPアニメ┼ション中はイベントを??化
            }
            var data = event.data;
            this._isDown = false;
            this._emitter.latestX = data.global.x;
            this._emitter.latestY = data.global.y;
        };
        ParticleSample.prototype.createParticle = function () {
            this._emitter.emit(this._emitter.latestX, this._emitter.latestY);
        };
        ParticleSample.prototype.handleResize = function () {
            this._shadow.scale.x = (window.innerWidth / 1024);
            this._shadow.scale.y = (window.innerHeight / 1024);
            this.stageEaselJS.canvas.width = innerWidth;
            this.stageEaselJS.canvas.height = innerHeight;
            this.canvasForDisplay.width = innerWidth;
            this.canvasForDisplay.height = innerHeight;
        };
        return ParticleSample;
    })(PIXI.Container);
})(project || (project = {}));
//# sourceMappingURL=main.js.map

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