スキップしてメイン コンテンツに移動

Canvas を動かす準備

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 を使う準備完了です。

↓コードはこちら

(() => {
let canvas = null;
let ctx = null;
let x = 100;
let v = -1;
window.addEventListener(
'load',
() => {
initialize();
render();
},
false
);
function initialize() {
canvas = document.getElementById('canvas');
screenWidth = canvas.width;
screenHeight = canvas.height;
if (canvas || canvas.getContext) {
ctx = canvas.getContext('2d');
}
}
function render() {
ctx.fillStyle = '#6495ed';
ctx.fillRect(0, 0, screenWidth, screenHeight);
drawArc(x, screenHeight / 2, 30);
if (x < 0 || x > screenWidth) {
v = v * -1;
}
x = x + 3 * v;
requestAnimationFrame(render);
}
function drawArc(a, b, w) {
ctx.fillStyle = '#191970';
ctx.beginPath();
ctx.arc(a, b, w, 0, Math.PI * 2, true);
ctx.fill();
}
})();

最近、「Designing Math. 数学とデザインをむすぶプログラミング入門」という本でもCanvasを勉強するようになりました。

このブログの人気の投稿

TouchDesigerでmp4を書き出す(映像+音)

TouchDesignerの醍醐味は音と図形を連動できることだと思ってます。 私がTouchDesignerに惹かれたのは、この部分です。 ということで、音と図形の連動をやってみました。 こんな動画をつくりました。 ▼ 動画作成手順 まず、TouchDesignerで動画を作成します。 以下の手順で作成します。 ▼ ムービー ・[Circle TOP]で円をつくる ・[Transform CHOP]をつなげる ▼ サウンド ・[Audio File In]で音を取り込む(デフォルトの音を選んでます) ・[Audio Filter CHOP]の[Filter]で[Band Pass]を選択 ・[Math CHOP]の[Combine Channels]の[Maxinum]を選択 ・[Math CHOP]の[Range]の[To Range]を 0 ~ 100 にする ・[Null CHOP]をつなげる ▼ サウンドをスケールに反映する ・サウンドの[Null CHOP]をムービーの[Transform TOP]の Scale へつなげる ▼ 大きさを調整する ・背景用に[Constant CHOP]をつくる ・[Over TOP]をつくる ・[Over TOP]に[Transform TOP]と[Constant CHOP]をつなげる ・[Over TOP]の[Fixed Layer]を[Constant CHOP]に合わせる(この場合は Input2) 完成です。 ▼ mp4書き出し手順 これを書き出します。 ・[File]メニューから[Export Movie]を選択 ・サウンドの[Null CHOP]を[CHOP Audio]へドラッグ・アンド・ドロップ ・ムービーの[Null TOP]を[TOP Video]へドラッグ・アンド・ドロップ ・[Codec]の[MPEG4]を選択 ・[Filename]で保存先を選択 ・Render Movieの[Start]をクリック こんな感じです↓ これでMpeg4のファイルができていると思います。

BlenderデータをTouchDesignerに取り込みたい

Blenderで作ったものをTouchDesignerで扱いたいと思いました。 しかし、いろいろ調べたのですが、方法が見つからなくて苦労しました。 基本的すぎて誰も記事や動画にしないのかもしれません。。 参考にした動画 TDSW Youtube Academyを参考にしました。 無事に完了して、以下の画像のようになりました。 手順 Blenderで作ったものをTouchDesignerで扱うための方法は以下の手順です。 1.Blenderで作ったものを「obj」形式でエクスポート 2.objファイルをTouchDesignerにドラッグ・アンド・ドロップする 3.配置したSOPの右側を右クリックしてGeometoryCOMPを置く 4.CameraCOMPを置く 5.LightCOMPを置く 6.renderTOPを置く。自動的にGeometoryCOMP、CamaraCOMP、LightCOMPとつながる。 これでBlenderで作ったものをTouchDesignerで扱えるようになります。 ちなみに 3Dを扱うときの画面分割方法は、 ・左にいつもの作業画面 ・右上にGeometory Viewer ・右下にTop Viewer を置くといいようです。 右下は、Top Viewerを選択した後、OutTOPのDisplayをオンにすると表示されます。

TouchDesignerで画像と文字を書き出したい

TouchDesignerを勉強しています。 基本的なことはざっくりとやってみました。 今回は画像と文字を書き出したいと思います。 動画を書き出す TouchDesignerは動画がメインだと思うのですが、単純に画像を書き出すことってどうするんだろう?と思ったので、やってみました。 [Movie File in]で画像を読み込む [Level]で少し調整 画像と背景の[Constant]を[Over]で合わせる [Text]で文字を入れる [Over]でテキストと画像を合わせる [Null]で右クリックしてsave imageする Nullで画像を保存するとtiff形式になりました。 他にも書き出し方がありそうですがわからなかったので、今回はGIMPでpngにしました。 TouchDesignerって便利ですね。 動画も画像も音声もなんでもかんでもTouchDesignerでまとめることができそうです。