サイト制作の補遺#4 カーソルに応じてパーティクルを表示する方法について

しろーぬなずな に投稿

Canvasを用いたマウスストーカーの技術解説

本稿では、JavaScriptとHTML5のCanvas APIを用いて実装された、マウスカーソルの動きに追従する動的なパーティクルエフェクト(通称:マウスストーカー)のコードを解剖し、その構造と設計思想について詳細に解説する。

1. 全体像と処理の流れ

このプログラムは、画面全体を覆う透明な描画領域(Canvas)を動的に生成し、マウスの移動を検知して光る粒子(パーティクル)を発生させ、それらを物理演算風に動かしながら徐々に消滅させるという一連の処理をアニメーションループによって実現している。

大まかな処理の流れは以下の通りである。

タグ

疑問:予約投稿できないだろうか?・事前検証1

しろーぬなずな に投稿

しろーぬなずなは夜行性なのだが、投稿日時を未来にすることで可能になるのか、それとも一部ブログサイトのように投稿日時が必ずしも正しい必要のない形式か。という検証です。

検証結果

 

検証のため、プライベートで開いたが、右下の時間より投稿時刻が遅い表示である。ただ投稿時刻が変わるのみで予約投稿とはなっていないことがわかる。

 

Drupalの機能拡張で予約投稿ができるそうだが、導入に手こずっている。

 

次回→予約投稿の機能拡張を導入、あるいは他の方法で実装

 

プロフィールを掲載しました。備忘録として技術部分の説明つき。

しろーぬなずな に投稿

https://compass.x3rd.momousa.net/prof/profile.html

近いうちに、GUI的に飛べるようにしたいと思う。
プロフィールはこちら(画像クリック)的な。

関係ないが、グラフィックユーザーインターフェースの話してた女性の学術系Vがいた気がする。HCIがどうとかで。
 


備忘録:Drupal 11独立テーマ構築と静的HTMLの同居・UI最適化プロセス
1. アーキテクチャの根幹:完全独立テーマの生成
Drupal 11のデフォルトテーマのCSS干渉を遮断するため、親テーマを持たない完全独立型のカスタムテーマ(base theme: false)を構築した。

2. ビューポート連動型フルレスポンシブ設計(UI最適化)
PC大画面での左右の広大な無駄余白の解消、およびスマホ縦長画面でのヘッダー画像の見切れを制御。

タグ

AtCoder初心者に向けて:「ABCコンテストでC問題まで解けてもずっと灰色なのはなぜ?」

しろーぬなずな に投稿

AtCoderのコンテストに遅刻してはいけない理由

AtCoderをやりはじめた当初、21時〜22時40分に開催される「ABC(AtCoder Beginner Contest)」に参加するにあたって、私は普通に遅刻して参加していました。

当時の参加スタイルはこんな感じです。 だいたい20分から40分くらい遅刻して参加。そこから1時間くらいかけてC問題まで解いて、D問題を見て「うーん、難しそうだからやめとこ」と諦めるパターン。

それで、ずっとパフォーマンス(※1)が低空飛行でした。

「ああ、茶色(※2)になるにはD問題も解けないといけないのかなぁ」と思っていました。

というか、パフォーマンス399とか、あと1ポイントで茶色!みたいなスコアを出しつつ停滞していたんです。

※1 パフォーマンス:そのコンテストで自分がどれだけの成績を出したかを示す数値。これがレーティング(強さの指標)に直結します。 

※2 茶色:レーティング400〜799の層。初心者を脱して、基本的な処理が書けるレベルの証ともいわれます。

タグ

アルゴリズムの勉強・二分探索の自力実装とライブラリ活用編

しろーぬなずな に投稿

二分探索(バイナリサーチ)は、あらかじめ昇順または降順にソート(整列)されたリストの中から、特定の値を高速に探し出すためのアルゴリズムである。

日常的な例でいうと、辞書で「こんぱす」という単語を調べるとき、最初のページから1ページずつめくる(線形探索)のではなく、まず真ん中あたりを開き、そこが「さ行」なら「もっと前だな」、「た行」なら「もっと後ろだな」と判断して探す範囲を狭めていく。この直感的な探し方こそが「二分探索」の正体である。

1. 二分探索の仕組み(例示)

例えば、次のように昇順にソートされた9個の要素を持つリストから、ターゲットとなる数値 23 を探すケースを考える。

リスト: [3, 8, 12, 17, 23, 29, 35, 42, 50] (要素数 $N = 9$)

サイト制作の補遺#3 UIの動的リサイズ編※取り組み中(5月27日進展あり)

しろーぬなずな に投稿

サイトバナー的なものを制作済だったのだが、せっかく動的リサイズに対応すべく横長かつ、中央に文字を配置したにもかかわらず、なんとサイト全体のサイズが静的である。

ということでサイト全体を動的リサイズできるようにCSSを変えていきたいところである。


追記
CSSの「背景画像(background-image)」として処理している限り、フルレスポンシブは無理なようだ。

ということで、CSSによる背景配置を全面的に廃止し、JavaScriptを使ってHTML内に画像タグを動的にインジェクションするアーキテクチャへと切り替える予定である。

 

サイト制作の補遺#2

しろーぬなずな に投稿

元々、私はHTMLやCSSを書くこともあったし、絵も描くしロゴも作るので、オリジナルデザインにしようと決めた。
ひとまず過去に作成したCSSに文字を入れて表示した。
(ロゴ制作済なので、pngとして置き換え予定。)
 

マウスを追尾するパーティクルを表示でき、喜んでいると……

ブログの更新の仕方がわからない。

助けてくれ。
 

今後の更新予定について

しろーぬなずな に投稿

・プログラミング学習のおすすめなどを掲載
・開発したものを公開

・開発の補遺など

 

・3Dモデリングに関連した話題
・VRChatなどのメタバースで使用できるアバターを公開予定。興味のある方はブックマークに入れてお待ちください。

を購読