cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              		body {
			background: #fff;
			overflow: hidden;
		}

		#canvasWave {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
            
          
!
            
              ///<reference path="../libs/easeljs/easeljs.d.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; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var project;
(function (project) {
    "use strict";
    /** Processing のパーリンノイズ(連続した乱数)関数へのショートカットです。 */
    var noise;
    /**
     * ウェーブ風グラフィックの表示クラスです。
     * @author Yasunobu Ikeda a.k.a clockmaker
     * @see FrocessingSample by nutsu http://wonderfl.net/c/kvXp
     */
    var WaveShape = (function (_super) {
        __extends(WaveShape, _super);
        /**
         * コンストラクターです。
         * @param maxLines  線自体の個数です。
         * @param maxVertex 線の水平方向の頂点数です。
         * @param debugMode デバッグモードとして実行するかの設定です。trueの場合、デバッグ表示が有効になります。
         */
        function WaveShape(maxLines, maxVertex, debugMode) {
            if (maxLines === void 0) { maxLines = 10; }
            if (maxVertex === void 0) { maxVertex = 5; }
            if (debugMode === void 0) { debugMode = false; }
            _super.call(this);
            /** 時間経過を示す媒介変数です。 */
            this._time = 0;
            // やむを得ない超残念実装
            noise = new Processing().noise;
            this._maxLines = maxLines;
            this._maxVertex = maxVertex;
            this._debugMode = debugMode;
            this._vertexArr = [];
            // Yの頂点座標の初期値を設定
            for (var i = 0; i < this._maxLines; i++) {
                this._vertexArr[i] = [];
                // 頂点座標の上限値はランダムで
                var num = (this._maxVertex - 1) * Math.random() * Math.random() + 1;
                // デバッグ機能が有効の場合は
                if (this._debugMode == true) {
                    // 頂点数は引数で設定したものと同じ値に設定する
                    num = this._maxVertex;
                }
                for (var j = 0; j <= num; j++) {
                    // 初期値は全て0で。
                    this._vertexArr[i][j] = 0;
                }
            }
            this.on("tick", this.handleTick, this);
        }
        /**
         * エンターフレームイベント
         * @param event
         */
        WaveShape.prototype.handleTick = function (event) {
            // 媒介変数を更新
            this._time += 0.005;
            // グラフィックをクリア
            this.graphics.clear();
            // 曲線を描き直す
            for (var i = 0; i < this._maxLines; i++) {
                var lineWidth = (0.05 * i) + 0.10; // ゼロ対策(ゼロのときに太さが1pxになるため)
                // デバッグ機能が有効の場合は
                if (this._debugMode == true) {
                    // 線を2pxで描く
                    lineWidth = 1.0;
                }
                this.drawWave(this._vertexArr[i], lineWidth, i * 0.10);
            }
        };
        /**
         * ウェーブを描きます。
         * @param vertexArr    頂点配列
         * @param strokeSize    線の太さ
         * @param timeOffset    波のオフセット
         */
        WaveShape.prototype.drawWave = function (vertexArr, strokeSize, timeOffset) {
            var vertexNum = vertexArr.length - 1;
            var stageW = window.innerWidth;
            var stageH = window.innerHeight;
            // 線のスタイルを設定
            this.graphics
                .setStrokeStyle(strokeSize)
                .beginLinearGradientFill(["rgba(231, 169, 161, 0.1)", "rgba(231, 169, 161, 0.2)"], [0, 1], 0, 0, 0, 100)
                .beginStroke("rgba(231, 169, 161, 0.8)");
            // 波の次の目標値を計算
            for (var i = 0; i <= vertexNum; i++) {
                // 乱数を取得、-0.5〜+0.5の範囲
                var noiseNum = noise(i * 0.2, this._time + timeOffset) - 0.5;
                // 目標座標を計算。画面の高さに比例
                var targetY = noiseNum * stageH * 2;
                // イージングの公式を使って、頂点座標をなめらかに変化させる
                vertexArr[i] += (targetY - vertexArr[i]) * 0.05;
            }
            // 曲線を描くためにXY座標を計算
            var BASE_Y = stageH / 2; // 基準は画面の中央のY座標
            var points = [];
            // 画面左端の座標
            points.push({ x: -200, y: BASE_Y });
            for (var i = 0; i <= vertexNum; i++) {
                // 途中座標
                points.push({
                    x: (stageW * (i / vertexNum)) >> 0,
                    y: vertexArr[i] + BASE_Y
                });
            }
            // 画面右端の座標
            points.push({ x: stageW + 200, y: BASE_Y });
            // 直線情報を曲線にするテクニック
            // 参考 : http://jsdo.it/clockmaker/createjs-curveto
            for (var i = 0; i < points.length; i++) {
                if (i >= 2) {
                    // マウスの軌跡を変数に保存
                    var p0x = points[i - 0].x;
                    var p0y = points[i - 0].y;
                    var p1x = points[i - 1].x;
                    var p1y = points[i - 1].y;
                    var p2x = points[i - 2].x;
                    var p2y = points[i - 2].y;
                    // カーブ用の頂点を割り出す
                    var curveStartX = (p2x + p1x) / 2;
                    var curveStartY = (p2y + p1y) / 2;
                    var curveEndX = (p0x + p1x) / 2;
                    var curveEndY = (p0y + p1y) / 2;
                    // カーブは中間点を結ぶ。マウスの座標は制御点として扱う。
                    this.graphics
                        .moveTo(curveStartX, curveStartY)
                        .curveTo(p1x, p1y, curveEndX, curveEndY);
                }
            }
            this.graphics.endStroke();
            // デバッグ機能
            // 曲線のもとになっている頂点を可視化
            if (this._debugMode == true) {
                for (var i = 0; i < points.length; i++) {
                    // マウスの軌跡を変数に保存
                    var p0x = points[i - 0].x;
                    var p0y = points[i - 0].y;
                    if (i > 0) {
                        var p1x = points[i - 1].x;
                        var p1y = points[i - 1].y;
                        // 線を描く
                        this.graphics
                            .setStrokeStyle(0.5)
                            .beginStroke("red")
                            .moveTo(p1x, p1y)
                            .lineTo(p0x, p0y)
                            .endStroke();
                    }
                    // 点をプロットする
                    this.graphics
                        .beginFill("red")
                        .drawCircle(p0x, p0y, 3)
                        .endFill();
                }
            }
        };
        return WaveShape;
    })(createjs.Shape);
    project.WaveShape = WaveShape;
})(project || (project = {}));

///<reference path="../libs/easeljs/easeljs.d.ts" />
///<reference path="WaveShape.ts" />
var project;
(function (project) {
    // 起動コード
    window.addEventListener("load", function () {
        new Main();
    });
    /**
     * パーティクルデモのメインクラスです。
     * @class project.Main
     * @author Yasunobu Ikeda a.k.a clockmaker
     */
    var Main = (function () {
        /**
         * @constructor
         */
        function Main() {
            var _this = this;
            // ウェーブ風グラフィック用のステージを作成
            this.stageCalcInside = new createjs.Stage("canvasWave");
            this.stageCalcInside.autoClear = false;
            // ウェーブ風グラフィックを作成
            var waveShape = new project.WaveShape();
            this.stageCalcInside.addChild(waveShape);
            // Tickerを作成
            createjs.Ticker.setFPS(60);
            createjs.Ticker.on("tick", this.handleTick, this);
            // リサイズイベント
            this.handleResize();
            window.addEventListener("resize", function () {
                _this.handleResize();
            });
        }
        /**
         * エンターフレームイベント
         */
        Main.prototype.handleTick = function () {
            // 薄く暗く塗る
            var context = this.stageCalcInside.canvas.getContext("2d");
            context.fillStyle = "#fff";
            context.fillRect(0, 0, this.stageCalcInside.canvas.width, this.stageCalcInside.canvas.height);
            // 波の表現を更新
            this.stageCalcInside.update();
        };
        /**
         * リサイズイベント
         */
        Main.prototype.handleResize = function () {
            // ウェーブ風グラフィック用ステージのりサイズ
            this.stageCalcInside.canvas.width = innerWidth;
            this.stageCalcInside.canvas.height = innerHeight;
        };
        return Main;
    })();
})(project || (project = {}));
            
          
!
999px
Loading ..................

Console