p5.js でなく Canvas も使ってみたい。 Canvas は JavaScript 自体の理解にもつながるので、是非マスターしたいと思ってます。 しかし、実際に始める段階で環境づくりでつまずいてしまいました。 静止画を表示するまではすぐにできたのですが、JavaScript の知識が乏しくアニメーションさせることができずに、一度はあきらめました。 とりあえず動かせるようになったので、ざっくりまとめます。 「グラフィックスプログラミング入門」 私は Canvas を主に「ゲーム＆モダン JavaScript 文法で 2 倍楽しい グラフィックスプログラミング入門」という本で勉強しています。 私の Canvas の勉強は、この本と公式ページの 2 つのみです。 ネット上の記事にはピンポイントでしか情報がないので、私のような JavaScript 初心者にはちょっと分かりづらいことが多いです。 Canvas APIの公式ページ 即時関数 Canvas のコードは以下の即時関数で囲んでます。 私にはどういう効果があるのかわからないのですが、本によると「変数がグローバルスコープにならないように」とのことです。 理解できないのですが、コードが長くなったり JS ファイルが増えた時に変数がぐちゃぐちゃになってしまわないようにしているのだと思います。 (() => { // コードはここ })(); loadでページを読み込む 次に、addEventListener でページを読み込ませます。 window.addEventListener( 'load', () => { initialize(); render(); }, false ); addEventListener の中に、initialize と render を入れます。 ...