JavaScriptでお絵かき - 拡散律速凝集 (Diffusion-Limited Aggregation)

ここまでの試行錯誤と、ドットインストールの「はじめてのJavaScript」の 知識で、簡易なDLAシミュレーションを行ってみます。 ドットインストール「はじめてのJavaScript」 https://dotinstall.com/lessons/basic_javascript_v4 拡散律速凝集 (Diffusion-Li…

JavaScriptでお絵かき - Canvasでドット単位の操作 その4

今回は、下の図の内側にある円周上のランダムな1点からスタートして、 ランダムウォークを続けて、外側の円周上に到達したら終わり、 というのをやってみます。 ランダムウォークの軌跡を赤色で示しています。 https://yamamoto-works.jp/canvas/test05.html …

JavaScriptでお絵かき - Canvasでドット単位の操作 その3

引き続き、Canvasで絵を描いてみます。 今回は円周上にランダムに点を打っていきます。 円を描くなら別の方法がありますが、 ここでのやり方は、ランダムに点をうって、 結果的に円になっています。 単に座標を計算して点をうつだけなので、 あまり説明する…

JavaScriptでお絵かき - Canvasでドット単位の操作 その2

昨日のプログラムで、putImageDataを呼び出した後で 絵を書き換えるとどうなるのか試してみました。 canvasを塗りつぶしてputImageDataを呼び出した後、 白い対角線を描いてみました。そのまま 2回目のputImageData呼び出しがなければ、 その対角線は表示さ…

JavaScriptでお絵かき - Canvasでドット単位の操作

JavaScriptでお絵かきの続きです。 ドット単位で操作したいので、その方法を探しました。 createImageDataでRGBAの配列を取得できます。 それに描画して、putImageDataで書き戻せばできあがりです。 作ってみたプログラムはこちら。 https://yamamoto-works.…

JavaScriptでお絵かき

JavaScriptで描画プログラムを作ってみます。 Canvasを使うと簡単に作れそうです。 とりあえず、ドットインストールの入門編の出だしの情報をもとに、 思いつきで作ってみました。 URLはこちら。 https://yamamoto-works.jp/canvas/test01.html 実行イメージ…