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