見出し画像

フォロワーがいっぱい

DOMでわらわらっとしたリッチコンテンツ作ってみました。

発想も経済力も技術力も貧相な昭和生まれFlash育ちの老害が、求められてもいないのにリッチコンテンツを作り続ける「Rogaiプロジェクト」の記念しないべき三作目です。

作例はこちら

「フォロワーがいっぱい」の作例はこれです

作例の経緯

作例の背景説明はこちらです。

作ったのは

詳しい自己紹介はこちらですが、さくっとまとめると
「役に立つまともなWebサイトを作ることに嫌気がさしたので需要のないものを作りたくなった老害クリエイター」です。


FOLLOWの実装

今回もDOMです。
何かものをわらわらと動かす場合でも、
100匹程度ならDOMでもまぁ平気そうですね。
そして、今回の動きのコツはズバリ三角関数ですね。
といっても、簡単です。
老害太郎は低学歴なので、簡単なのしか使えないですし。

アークタンジェント

役に立つ系の案件で使うことあるのかは不明ですが、
Javascriptにある(だいたいの言語にあると思う)Math.atan2というのを使うと、ついてくる系演出は簡単に実装できます。
座標から角度教えてくれるやつです。
アークタンジェントでググるといいかもしれません。
ちなみに、atanというのもありますがこっちはそんなに使わないです。
そんなにというか、15年で一回も使ったことないです。

サインとコサイン

実際はMath.cosとMath.sinくらいしか使いません。
しかも、どっちも使い方はコピペも不要なくらいすぐ覚えられます。
成分分解とかでググれば出てくると思います。
書きたい気分になったらRogaiレッスンでやるかもしれませんが、
期待せずにお待ちください。

簡略化した方がよかった

実は初期バージョンはもっと複雑で、
各フォロワー(わらわらっとした人にアイコンのキモイやつ)
がそれぞれ誰をフォローするか多少重み付のあるランダムに決めることにして、樹形図的な複雑な動きをするようにしてみていました。
要は現実のフォロー・被フォローの関係に似せてみたのです。
そうしたら、苦労したわりにはパッとしない動きだったので、ボツにしました。(なんで、他人にアイデアをボツにされる時はあんなに抵抗するのに、自分でボツにするときはサクッとなんでしょうね?性格が悪いのでしょうか?)最終的には、唯一のリーダーに全員ついていくという今の形になりましたとさ。

ちなみに顔

ちなみに、Rogaiサイトの左上くらいにキモイ顔面のアイコンがいまして、
目がマウスの方を見てくると思いますが、それも同じ仕組みでございます。
仕組みというかatan2使っただけです。
atan2楽しいので、皆さんも色々使ってみるといいですよ。
おすすめです。

まだまだまだ続く

次回作は決めていないですが、全ネタが尽きるまで今のペースで2年分くらいかかりそうなので適当に選びます。
相変わらず、月1ペースで作例を作っていこうと思ってます。
少しでもビビッときたら応援よろしくお願いします。
今回もかまっていただいてありがとうございました。

この記事が気に入ったらサポートをしてみませんか?