ゆらゆらする円 – 水玉製作所

最近暖かくなってきましたね。それに伴い気も抜けがちになっています。
そんな気持ちをゆらゆらする円で表してみました。
CreateJSを使用しています。

カスタムクラスを作成する際のプライベートメンバの記述方法に迷っています。今回はプライベートの印として”_”を付けています。この辺りの記述方法も揺れています。

var canvas, stage;
var DEGREE = 60;
var RADIUS = 100;
var centerPoint;
var lineCircle, circleColor;
var anchorList, controlList;

function init(){
    var controlRadius;
    var color;

    canvas = document.getElementById("canvas");
    stage = new createjs.Stage(canvas);
    centerPoint = {x: canvas.width / 2, y: canvas.height / 2};

    anchorList = getPointList(DEGREE, 0, RADIUS);
    controlRadius = RADIUS / Math.cos(Math.PI * DEGREE / 2 / 180);
    controlList = getPointList(DEGREE, DEGREE / 2, controlRadius);

    circleColor = createjs.Graphics.getRGB(Math.floor(Math.random() * 0xFFFFFF));
    lineCircle = new createjs.Shape(getLineCircle(anchorList, controlList));
    stage.addChild(lineCircle);

    createjs.Ticker.useRAF = true;
    createjs.Ticker.addEventListener('tick', tick);
}

function tick(){
    var point;
    var len = controlList.length;

    lineCircle.graphics.clear();
    for(var i = 0; i < len; i += 1){
        point = anchorList[i];
        point.update();
        point = controlList[i];
        point.update();
    }
    lineCircle.graphics = getLineCircle(anchorList,  controlList);
    stage.update();
}

function getPointList(degree, offsetDegree ,radius){
    var pointList = [];
    var len = 360 / degree;
    var point;
    var radian;

    for(var i = 0; i < len; i += 1){
        radian = Math.PI * (degree * i + offsetDegree) / 180;
        point = new CustomPoint(
            Math.floor(Math.cos(radian) * radius * 100) / 100 + centerPoint.x,
            Math.floor(Math.sin(radian) * radius * 100) / 100 + centerPoint.y
        );
        pointList.push(point);
    }

    return pointList;
}

function getLineCircle(anchorPointList, controlPointList){
    var anchorPoint, controlPoint;
    var g;
    var len = anchorPointList.length;

    g = new createjs.Graphics();
    g.beginFill(circleColor);
    for(var i = 0; i < len; i += 1){
        anchorPoint = anchorPointList[i];

        if(i === 0){
            g.moveTo(anchorPoint.x, anchorPoint.y);
        }
        else
        {
            controlPoint = controlPointList[i - 1];
            g.quadraticCurveTo(controlPoint.x, controlPoint.y, anchorPoint.x, anchorPoint.y);
        }
    }
    anchorPoint = anchorPointList[0];
    controlPoint = controlPointList[len - 1];
    g.quadraticCurveTo(controlPoint.x, controlPoint.y, anchorPoint.x, anchorPoint.y);
    g.endStroke();

    return g;
}

document.addEventListener("DOMContentLoaded", init, false);

//====================
// CustomPoint
//====================
CustomPoint = {};

(function (){
    function CustomPoint(x, y){
        this.initialize(x, y);
    }

    //Inheritance from Point
    var p = CustomPoint.prototype = new createjs.Point();
    p.Point_initialize = CustomPoint.prototype.initialize;
    p.initialize = function(x, y){
        //call initialize() method from parent class
        this.Point_initialize();
        // override??
        this.x = x;
        this.y = y;
        //
        this._dX = Math.floor(Math.random() * 10) / 20;
        this._dY = Math.floor(Math.random() * 10) / 20;
        this._degree = Math.floor(Math.random() * 360);
    };

    p.update = function(){
        var radian = Math.PI * this._degree / 180;
        this.x += this._dX * Math.sin(radian);
        this.y += this._dY * Math.cos(radian);

        this._degree += 12;
        if(this._degree >= 360){
            this._degree = 0;
            this._dX = Math.floor(Math.random() * 10) / 20;
            this._dY = Math.floor(Math.random() * 10) / 20;
        }
    };

    this.CustomPoint = CustomPoint;

}());

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

var canvas, stage;

var DEGREE = 60;

var RADIUS = 100;

var centerPoint;

var lineCircle, circleColor;

var anchorList, controlList;

function init(){

var controlRadius;

var color;

canvas = document.getElementById("canvas");

stage = new createjs.Stage(canvas);

centerPoint = {x: canvas.width / 2, y: canvas.height / 2};

anchorList = getPointList(DEGREE, 0, RADIUS);

controlRadius = RADIUS / Math.cos(Math.PI * DEGREE / 2 / 180);

controlList = getPointList(DEGREE, DEGREE / 2, controlRadius);

circleColor = createjs.Graphics.getRGB(Math.floor(Math.random() * 0xFFFFFF));

lineCircle = new createjs.Shape(getLineCircle(anchorList, controlList));

stage.addChild(lineCircle);

createjs.Ticker.useRAF = true;

createjs.Ticker.addEventListener('tick', tick);

}

function tick(){

var point;

var len = controlList.length;

lineCircle.graphics.clear();

for(var i = 0; i < len; i += 1){

point = anchorList[i];

point.update();

point = controlList[i];

point.update();

}

lineCircle.graphics = getLineCircle(anchorList, controlList);

stage.update();

}

function getPointList(degree, offsetDegree ,radius){

var pointList = [];

var len = 360 / degree;

var point;

var radian;

for(var i = 0; i < len; i += 1){

radian = Math.PI * (degree * i + offsetDegree) / 180;

point = new CustomPoint(

Math.floor(Math.cos(radian) * radius * 100) / 100 + centerPoint.x,

Math.floor(Math.sin(radian) * radius * 100) / 100 + centerPoint.y

);

pointList.push(point);

}

return pointList;

}

function getLineCircle(anchorPointList, controlPointList){

var anchorPoint, controlPoint;

var g;

var len = anchorPointList.length;

g = new createjs.Graphics();

g.beginFill(circleColor);

for(var i = 0; i < len; i += 1){

anchorPoint = anchorPointList[i];

if(i === 0){

g.moveTo(anchorPoint.x, anchorPoint.y);

}

else

{

controlPoint = controlPointList[i - 1];

g.quadraticCurveTo(controlPoint.x, controlPoint.y, anchorPoint.x, anchorPoint.y);

}

anchorPoint = anchorPointList[0];

controlPoint = controlPointList[len - 1];

g.quadraticCurveTo(controlPoint.x, controlPoint.y, anchorPoint.x, anchorPoint.y);

g.endStroke();

return g;

}

document.addEventListener("DOMContentLoaded", init, false);

//====================

// CustomPoint

//====================

CustomPoint = {};

(function (){

function CustomPoint(x, y){

this.initialize(x, y);

}

//Inheritance from Point

var p = CustomPoint.prototype = new createjs.Point();

p.Point_initialize = CustomPoint.prototype.initialize;

p.initialize = function(x, y){

//call initialize() method from parent class

this.Point_initialize();

// override??

this.x = x;

this.y = y;

this._dX = Math.floor(Math.random() * 10) / 20;

this._dY = Math.floor(Math.random() * 10) / 20;

this._degree = Math.floor(Math.random() * 360);

};

p.update = function(){

var radian = Math.PI * this._degree / 180;

this.x += this._dX * Math.sin(radian);

this.y += this._dY * Math.cos(radian);

this._degree += 12;

if(this._degree >= 360){

this._degree = 0;

this._dX = Math.floor(Math.random() * 10) / 20;

this._dY = Math.floor(Math.random() * 10) / 20;

}

};

this.CustomPoint = CustomPoint;

}());

スマホのブラウザで即参加！

スマホのブラウザで即参加！

スマホのブラウザで即参加！

Related Posts

FlashPlayer11 JSONクラス

Canvasアニメーション3

QuickBox2D練習

NOTTV「占いテレビ」の製作協力しました。