JavaScriptで星のように輝くエフェクトを表示して一平ちゃんショートケーキ味の画像をキラキラさせる方法

網干裕介 — Tue, 06 Dec 2016 09:22:36 +0000

昨日発売した「一平ちゃんショートケーキ味」を仕入れてテンションが振り切れています！網干です！
見てくださいこの包装！クリスマスにふさわしいデザインがたまりません！
く～！ニクイ！

出典：明星一平ちゃん夜店の焼そばショートケーキ味: 明星食品

見た目もこんなに綺麗！！パッと見ケーキと見分けがつきません！！

最も衝撃的だったのはソースの香りです！
見た目は普通のソースっぽい色なのですが、香りが全く違いました！
甘い匂い……どこかで嗅いだことのある甘い香り……

これは……パ、パンケーキ！そう！パンケーキの香り！！

甘い！これはデザートだ！三時のおやつだ！
が、しかし！嗅覚の情報は確実にパンケーキなのに！視覚が捉えているのは焼きそば！
嗅覚情報と視覚情報が一致しない！不思議！！

こ、この視覚的感動を伝えるには………そうだ！！
画像にエフェクトをつけて、皆さんに私が見ているビジョンを共有すればいいんだ！！！！！

…ということで、今回は画像にキラキラした星の輝きのようなエフェクトをつける方法を記載します。

今回の記事を読むことで、下図のように画像にエフェクトをつけることができるようになります。

キラキラエフェクトのプログラムをご紹介

今回は下記の記事を参考にさせて頂きました。
CreateJS 星キラキラ
※オリジナルのソースコードは上記のページより引用してください

このソースコードから、やきそばが輝くために必要な部分だけ抜き出してご紹介します！
焼きそばだけに！ソース！！

htmlファイル



kirakira

cssファイル

* {
  margin: 0;
  padding: 0;
  border: 0;
}

#kirakira_arae{
  width:100%;
  height:100%;
}

#kirakira_canvas{
  width:100%;
  height:100%;
  background-image: url('XXXXX.jpg'); // !!ファイル名とパスを入力!!
  background-repeat: no-repeat;
  background-size: contain;
}

jsファイル

(function(window){
  var PARAM = new Object();
  $.canvas = {
    init : function(){
      PARAM = {
        main   : {id:$('#kirakira_arae')},
        canvas : {
          id   : $('#kirakira_canvas'),
          size : {width:1920, height:1080} // !!画像サイズと一致させる!!
        },
        velocity : {x:0, y:0},
        circle   : new Shape(),
        stage    : ''
      };		
      $.canvas.seting();
    },
    seting : function(){
      var canvasObject = PARAM.canvas.id.get(0);
      var context      = canvasObject.getContext("2d");

      PARAM.stage = new Stage(canvasObject);
      PARAM.velocity.x = Math.floor(Math.random()*5) + 5;
      PARAM.velocity.y = Math.floor(Math.random()*5) + 5;

      setInterval(function(){
        $.canvas.star();
      },1);

      Ticker.on("tick", $.canvas.tick);
    },
    star : function(){
      var shape      = new Shape();
      var g          = shape.graphics;
      var color      = (Math.random()*360);
      var glowColor1 = Graphics.getHSL(0, 100, 100, 1);
      var glowColor2 = Graphics.getHSL(color, 100, 75, 0.5);
      var radius     = (Math.random()*15);
      var position   = {x:Math.random()*PARAM.canvas.size.width, y :Math.random()*PARAM.canvas.size.height};

      g.beginRadialGradientFill( [glowColor1,glowColor2], [0.1,0.5], 0,0,1, 0,0,(Math.random()*10+13)*2);
      g.drawPolyStar(0, 0, radius, 5, 0.95, (Math.random()*360));
      g.endFill();

      g.beginRadialGradientFill( [Graphics.getHSL(color,100,75,0.5),Graphics.getHSL(color,100,75,0)], [0,0.5], 0,0,0, 0,0,radius);
      g.drawCircle(0, 0, radius);
      g.endFill();

      shape.compositeOperation = "lighter";

      shape.x      = position.x;
      shape.y      = position.y;
      shape.scaleX = 0;
      shape.scaleY = 0;
      shape.alpha  = 0;

      PARAM.stage.addChild(shape);
      $.canvas.tween(shape);
    },
    tween : function(SHAPE){
      var tween = Tween.get(SHAPE)
        .to({scaleX:1, scaleY:1, alpha:1}, 500, Ease.sineOut)
        .to({scaleX:0, scaleY:0, alpha:0, }, 800, Ease.sineIn)
      ;
      tween.call(function(){
        $.canvas.remove(this);
      });
    },
    remove : function(SHAPE){
      PARAM.stage.removeChild(SHAPE);
    },
    tick : function(){
      PARAM.stage.update();
    },
  };

  window.addEventListener("load", function(e){$.canvas.init();}, false);
})(window);

上記のプログラムに対して、下記の修正を加えることで好きな画像にキラキラエフェクトを追加することができます。
・htmlファイルのcanvasのサイズを画像のサイズに変更。
・cssファイルのコメント箇所を画像のファイル名（ファイルパス）に変更。
・jsファイルのコメント箇所を画像のサイズに変更。

以上のプログラムで、通常でも眩しいやきそばをもっと輝かせることができます！

ちなみに、一平ちゃんショートケーキ味は意外とおいしかったです！
~~かやくの「ヨーグルト風味キューブ」がちょっとアレな感じはありましたが…。~~
ごちそうさまでした！

ではまた！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。