EffectHub.com: your best source for gaming

Recommendation

More Effects...

/*-----------------------------------
    グローバル変数
-----------------------------------*/
var cj = createjs,
    stage,
    particles = [],
    centerX,
    centerY,
    particleNum = window.innerWidth / 6,
    color = ["blue","black","red","yellow","green"];
    speed = Math.PI / 60,
    RADIUS = window.innerWidth / 7,//輪の半径
    margin = RADIUS / 10;
    SPEED_MIN = RADIUS / 2,
    SPEED_MAX = RADIUS;

/*-----------------------------------
    メイン
-----------------------------------*/
function init(){
    var rotateCenterX,
        rotateCenterY,
        circle,
        radius = RADIUS;
    //ステージ生成
    stage = new cj.Stage("world");
    stage.canvas.width　= window.innerWidth;
    stage.canvas.height　= window.innerHeight;

for(var i = 1;i <= 3;i++){
        circle = new Circle(i,1,radius,color[i - 1]);
        circle.create();
        
    }
    
    circle = new Circle(1,2,radius,color[3]);  
    circle.create();
    
    circle = new Circle(2,2,radius,color[4]); 
    circle.create();

//ステージ更新
    stage.update();
}
cj.Ticker.timingMode = cj.Ticker.RAF;
cj.Ticker.addEventListener("tick",tick);

/*-----------------------------------
    自動更新される関数
-----------------------------------*/
function tick(){
    for(var i = 0;i < particles.length;i++){
        var particle = particles[i];
        particle.move();
    }

//ステージ更新
    stage.update();
}

/*-----------------------------------
    パーティクルを定義
-----------------------------------*/
function Particle(cx,cy,_angle,_radius,_color){
    this.initialize();

//半径
    this.radius = getRandomNum(10,20);
    
    getColor(this,_color);
            
    this.graphics.drawCircle(0,0,getRandomNum(1,10))
    .endFill();
    //中心位置
    this.centerX = cx;
    this.centerY = cy;
    //角度
    this.angle = _angle;
    //角速度
    if(getRandomNum(1,10) % 2 == 0){
        this.speed =  Math.PI / (getRandomNum(SPEED_MIN,SPEED_MAX));
    }else{
        //逆回転
        this.speed =  - Math.PI / (getRandomNum(SPEED_MIN,SPEED_MAX));
    }
    
    //回転の中心
    this.rotateCenterX = cx + _radius;
    this.rotateCenterY = cy;
    
    //重なったところの合成方法
    this.compositeOperation = "darker";    
}

//継承
Particle.prototype = new cj.Shape();

/*-----------------------------------
    パーティクル移動位置
-----------------------------------*/
Particle.prototype.move = function(){
    this.angle += this.speed;
    
    //回転中心位置を回転させる
    this.rotateCenterX = this.centerX + (RADIUS - margin) * Math.cos(this.angle / 5);
    this.rotateCenterY = this.centerY + (RADIUS - margin) * Math.sin(this.angle / 5);
    
    //回転の軌跡上を三角関数の軌跡を描く
    this.x = this.rotateCenterX + this.radius * Math.cos(this.angle / 360) * Math.cos(this.angle);
    this.y = this.rotateCenterY + this.radius * Math.sin(this.angle / 360) * Math.sin(this.angle);

};

/*-----------------------------------
    輪
-----------------------------------*/
function Circle(cx,cy,r,_color){
    if(cy == 1){//輪の上段
        this.centerX = r + 2 * r * (cx - 1) + ((window.innerWidth / 2) - 3 * r);
        this.centerY = r * cy + ((window.innerHeight / 2) - 1.5 * r);
    }else{//輪の下段
        this.centerX = r + 2 * r * (cx - 1) + r + ((window.innerWidth / 2) - 3 * r);
        this.centerY = r * cy + ((window.innerHeight / 2) - 1.5 * r);
    }
    
    this.radius = r;
    this.color = _color;
}

/*-----------------------------------
    輪の軌道上にパーティクルを生成
-----------------------------------*/
Circle.prototype.create = function(){
    var rotateCenterX = this.centerX + this.radius,
        rotateCenterY = this.centerY;
    
    for(var j = 1;j < particleNum;j++){
        var angle = j * 15 * 10;
        
        //パーティクル生成
        var particle = new Particle(this.centerX,this.centerY,angle,this.radius,this.color);
        particles.push(particle);
        //ステージに追加
        stage.addChild(particle);
    }

};

/*-----------------------------------
    範囲を決めて乱数生成
-----------------------------------*/
function getRandomNum( min, max ) {
    return ( Math.random() * ( max - min ) + min ) | 0;
}

/*-----------------------------------
    パーティクルの色を決定
-----------------------------------*/
function getColor(obj,_color){
    var fillColor;
    //色
    switch(_color){
        case "blue":
            switch((Math.random() * 5 | 0 ) % 5){
                case 0:
                    fillColor = obj.graphics.beginFill("#0B5FA5");
                    break;
                case 1:
                    fillColor = obj.graphics.beginFill("#25547B");
                    break;
                case 2:
                    fillColor = obj.graphics.beginFill("#043C6B");
                    break;
                case 3:
                    fillColor = obj.graphics.beginFill("#3F8FD2");
                    break;
                case 4:
                    fillColor = obj.graphics.beginFill("#66A1D2");
                    break;
                default:
                    break;
            }
            break;
        case "black":
            switch((Math.random() * 5 | 0 ) % 5){
                case 0:
                    fillColor = obj.graphics.beginFill("#000");
                    break;
                case 1:
                    fillColor = obj.graphics.beginFill("#111");
                    break;
                case 2:
                    fillColor = obj.graphics.beginFill("#191919");
                    break;
                case 3:
                    fillColor = obj.graphics.beginFill("#2a2a2a");
                    break;
                case 4:
                    fillColor = obj.graphics.beginFill("#3b3b3b");
                    break;
                default:
                    break;
            }
            break;
        case "red":
            switch((Math.random() * 5 | 0 ) % 5){
                case 0:
                    fillColor = obj.graphics.beginFill("#FF0000");
                    break;
                case 1:
                    fillColor = obj.graphics.beginFill("#BF3030");
                    break;
                case 2:
                    fillColor = obj.graphics.beginFill("#A60000");
                    break;
                case 3:
                    fillColor = obj.graphics.beginFill("#FF4040");
                    break;
                case 4:
                    fillColor = obj.graphics.beginFill("FF7373");
                    break;
                default:
                    break;
            }
            break; 
        case "yellow":
            switch((Math.random() * 5 | 0 ) % 5){
                case 0:
                    fillColor = obj.graphics.beginFill("#FFF500");
                    break;
                case 1:
                    fillColor = obj.graphics.beginFill("#BFBA30");
                    break;
                case 2:
                    fillColor = obj.graphics.beginFill("#A69F00");
                    break;
                case 3:
                    fillColor = obj.graphics.beginFill("#FFF840");
                    break;
                case 4:
                    fillColor = obj.graphics.beginFill("#FFFA73");
                    break;
                default:
                    break;
            }
            break; 
        case "green":
            switch((Math.random() * 5 | 0 ) % 5){
                case 0:
                    fillColor = obj.graphics.beginFill("#25D500");
                    break;
                case 1:
                    fillColor = obj.graphics.beginFill("#3DA028");
                    break;
                case 2:
                    fillColor = obj.graphics.beginFill("#188A00");
                    break;
                case 3:
                    fillColor = obj.graphics.beginFill("#59EA3A");
                    break;
                case 4:
                    fillColor = obj.graphics.beginFill("#80EA69");
                    break;
                default:
                    break;
            }
            break; 
        default:
            break;              
    }
    
    return fillColor;
}
init();

CSS

HTML

Recommendation

Join Effecthub.com