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の扱いには慣れたような気がします。
経験大事。

Scroll to top