others | KNAP Member Blog

2020/06/02 others, sakurai

p5.js でマウスストーカーを作る

こんにちは。櫻井です。
この間マウスストーカーを作る機会があったのでその備忘録を兼ねてちょっと振り返りとこんなやり方もあったんだーっていうのを残したいと思います。

いつも通りに作る

自作した場合、やり方は色々あるとは思いますが基本的に
・マウスの座標を取得する
・マウスの動きに合わせて追従させたいものを動かす
って処理が必要になるはずです。

TweenMaxを使って作ったのがこちらです。

<div class="l-mousestalker">
  <div class="l-mousestalker_item_wrapper">
    <div class="l-mousestalker_item">
      <div class="l-mousestalker_item_img"></div>
      <h2 class="l-mousestalker_item_ttl">見出しが入ります</h2>
      <p class="l-mousestalker_item_txt">親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。</p>
      <a href="" class="l-mousestalker_item_btn js-link_btn">リンクボタン</a>
    </div>
    <div class="l-mousestalker_item">
      <div class="l-mousestalker_item_img"></div>
      <h2 class="l-mousestalker_item_ttl">見出しが入ります</h2>
      <p class="l-mousestalker_item_txt">親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。</p>
      <a href="" class="l-mousestalker_item_btn js-link_btn">リンクボタン</a>
    </div>
    <div class="l-mousestalker_item">
      <div class="l-mousestalker_item_img"></div>
      <h2 class="l-mousestalker_item_ttl">見出しが入ります</h2>
      <p class="l-mousestalker_item_txt">親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。</p>
      <a href="" class="l-mousestalker_item_btn js-link_btn">リンクボタン</a>
    </div>
  </div>
</div>
<svg height="30" width="30" id="cursor" class="l-mousestalker_cursor">
  <circle cx="15" cy="15" r="12" stroke-width="1" stroke="#000" fill="none"></circle>
</svg>

$breakpoint: "screen and (max-width: 48em)";
html {
  font-size: 62.5%;
}
.l-mousestalker {
  padding: 10rem 2rem;
  &_item {
    width: calc(100% / 3 - 3rem);
    @media #{$breakpoint}{
      width: 100%;
      margin-bottom: 4rem;
    }
    &_wrapper {
      display: flex;
      justify-content: space-around;
      @media #{$breakpoint}{
        display: block;
      }
    }
    &_img {
      width: 100%;
      height: 25rem;
      background: #afafaf;
    }
    &_ttl {
      font-size: 2.4rem;
    }
    &_txt {
      line-height: 2;
      font-size: 1.6rem;
    }
    &_btn {
      display: block;
      height: 6rem;
      border: 1px solid #000;
      margin: 0 auto;
      line-height: 5.8rem;
      text-align: center;
      color: #000;
      font-size: 2rem;
      text-decoration: none;
    }
  }
  &_cursor {
    position: fixed;
    display: block;
    border-radius: 0;
    transform-origin: center center;
    top: 0;
    left: 0;
    z-index: 9999;
    pointer-events: none;
  }
}

function mouseStalker() {
  var cursor = document.getElementById('cursor');
  var linkBtn = document.querySelectorAll('.js-link_btn');
  for (var i = 0; i < linkBtn.length; i++) {
      linkBtn[i].addEventListener('mouseenter', onMouseHover);
      linkBtn[i].addEventListener('mouseleave', onMouseHoverOut);
    }
  function onMouseMove(e) {
      TweenMax.to(cursor, 0, {
        x: e.clientX - 15,
        y: e.clientY - 15
      })
    }
  function onMouseHover() {
    TweenMax.to(cursor, .3, {
      scale: 4
    })
  }
  function onMouseHoverOut() {
    TweenMax.to(cursor, .3, {
      scale: 1
    })
  }
  document.addEventListener('mousemove', onMouseMove);
}
mouseStalker();

p5.jsを使って作る

最近少しp5.jsを勉強してるんですけどこの子あらかじめマウスの座標とかウィンドウの幅とか色々取得してくれていてマウスストーカーもっと簡単にできるんじゃない！？っと思ったんで先ほどのマウスストーカーと同じことを今度はp5.jsを使って作ってみます。

<div class="l-mousestalker">
  <div class="l-mousestalker_item_wrapper">
    <div class="l-mousestalker_item">
      <div class="l-mousestalker_item_img"></div>
      <h2 class="l-mousestalker_item_ttl">見出しが入ります</h2>
      <p class="l-mousestalker_item_txt">親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。</p>
      <a href="" class="l-mousestalker_item_btn js-link_btn">リンクボタン</a>
    </div>
    <div class="l-mousestalker_item">
      <div class="l-mousestalker_item_img"></div>
      <h2 class="l-mousestalker_item_ttl">見出しが入ります</h2>
      <p class="l-mousestalker_item_txt">親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。</p>
      <a href="" class="l-mousestalker_item_btn js-link_btn">リンクボタン</a>
    </div>
    <div class="l-mousestalker_item">
      <div class="l-mousestalker_item_img"></div>
      <h2 class="l-mousestalker_item_ttl">見出しが入ります</h2>
      <p class="l-mousestalker_item_txt">親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。</p>
      <a href="" class="l-mousestalker_item_btn js-link_btn">リンクボタン</a>
    </div>
  </div>
</div>

$breakpoint: "screen and (max-width: 48em)";
html {
  font-size: 62.5%;
}
.l-mousestalker {
  padding: 10rem 2rem;
  &_item {
    width: calc(100% / 3 - 3rem);
    @media #{$breakpoint}{
      width: 100%;
      margin-bottom: 4rem;
    }
    &_wrapper {
      display: flex;
      justify-content: space-around;
      @media #{$breakpoint}{
        display: block;
      }
    }
    &_img {
      width: 100%;
      height: 25rem;
      background: #afafaf;
    }
    &_ttl {
      font-size: 2.4rem;
    }
    &_txt {
      line-height: 2;
      font-size: 1.6rem;
    }
    &_btn {
      display: block;
      height: 6rem;
      border: 1px solid #000;
      margin: 0 auto;
      line-height: 5.8rem;
      text-align: center;
      color: #000;
      font-size: 2rem;
      text-decoration: none;
    }
  }
  &_cursor {
    position: fixed;
    display: block;
    border-radius: 0;
    transform-origin: center center;
    top: 0;
    left: 0;
    z-index: 9999;
    pointer-events: none;
  }
}

var size;
var ds;
var linkBtn = document.querySelectorAll('.js-link_btn');
var easing = 0.05;
function setup() {
  var cnv = createCanvas(windowWidth, windowHeight);
  cnv.class('l-mousestalker_cursor');
  size = 30;
  ds = 30;
  noFill();
}
function draw() {
  for (var i = 0; i < linkBtn.length; i++) {
    linkBtn[i].addEventListener('mouseenter', function() {
      ds = 120;
    })
    linkBtn[i].addEventListener('mouseleave', function() {
      ds = 30;
    });
  };
  var ts = ds - size;
  size += ts * easing;
  clear();
  ellipse(mouseX, mouseY, size, size);
}

p5.jsを使って作ってみて

実際に作ってる途中で気づいたんですけど、あんまり変わらないしむしろめんどくさくなってる。。というのもeasingは自作するか追加でTweenMax読み込ませるかしないといけないですし、p5.jsのdraw関数は常に走っているので結構重くなります。
そもそもp5.jsってProcessingをjsで使うために作られたものなんだからこういうことには向かないですよね。

今回p5.jsでマウスストーカーを作ってみて、大した量書いてないように見えますが実は結構苦戦してました。
p5.jsにmouseOverというホバーした時に実行される関数があるんですがそれだとうまくいかなかったりmouseenterとmouseleaveのイベントを始めはsetup関数の方に入れていたんですがうまくいかなかったりしてました。
ただ苦戦した甲斐あってだいぶp5.jsの扱いには慣れたような気がします。
経験大事。

2019/10/09 kumekawa, others

社員旅行2019

だいぶと外の空気が秋めいてきましたね。
今年もKNAPメンバーで社員旅行に行ってまいりました。

今年の行き先は埼玉県の長瀞でぶらり電車の旅となります。
寒いかと思いきや暑いくらいの気温で旅日和のお天気でした。

最近ipadでのお絵かきにはまっているので旅のハイライトシーンをすごろくにしてみました。

秩父鉄道に初めて乗ったんですがレトロな雰囲気でまだSuicaに対応していなく駅員さんに切符を渡す、風情のある鉄道でした。

上長瀞に集合して、まずはお蕎麦屋さんでくるみそばを食べ腹ごしらえ。
手打ち感溢れるそばでおいしかったです。

次のラフティングの時間まで少し間があったので、近くのかき氷屋さんでかき氷を食べました。雰囲気のあるかき氷屋さんでかき氷の山具合に思わず写真を撮りたくなるかき氷でした。

そしてメインのラフティングへ、暑くてよかった！
社長のタックルにより何度も落とされる社員。
飛び込みでバク宙を決めたりアクティブっぷりを発揮する社員。
ラフティングのお兄さんに社長が一番やんちゃだと言われたりと
皆の性格が出ていて楽しかったです。2時間ぐらいの長丁場で筋肉痛。

その後宿につき晩御飯。ちょうどお誕生日が近かったので社長と女性社員の誕生日会をしました。
入社4ヶ月の新人君がつっこみだということがわかり、これまでボケが放置状態だったKNAP内のボケを次々ひろい回収して行きます。新しいキャラ登場です。
部屋に戻って、スマブラ、人狼ゲームして就寝。
翌朝の部屋からの眺めが荒川一望で素晴らしかったです！

2日目は電車とバスで農園に行き、釣り堀でマス釣。
なかなか釣れず、魚たちの餌やり状態となってましたが、苦労して釣った魚はおいしかったです。

子どもづれが多く平和な農園でした。ヤギに会いにまた行こう。
そしてぶどう狩りしている間に、最終のバスがすぐ来る時間になり最後はバタバタ走って終わりましたが楽しい旅となりました！

来年はどこかしら。

2019/01/07 kumekawa, others