p5.js

プログラミング

【p5.js】迷路の最短経路を出力する

スタートからゴールまでの距離を2次元配列で表現して、最短経路の通路を「 」(半角スペース)から「*」に置き換えて出力する。let maze1;function setup() { maze1 = new Maze(15, 15); maze...
プログラミング

【p5.js】迷路のスタートとゴールを設定する

迷路のスタートとゴールを座標によって設定し、スタートを「S」、ゴールを「G」として出力する。let maze1;function setup() { maze1 = new Maze(15, 15); maze1.set_maze_bout...
プログラミング

【p5.js】棒倒し法で迷路を生成する

迷路の幅と高さをそれぞれ width, height として設定し、その数値にしたがって棒倒し法で迷路を生成する。※迷路の幅と高さは5以上の奇数とする。let maze1;function setup() { maze1 = new Maz...
プログラミング

【p5.js】スケッチを画像としてダウンロードする

canvas要素をtoDataURL()メソッドで画像データに変換し、aタグのリンク先のURLに指定することで画像ファイルとしてダウンロードできるようにする。そして、bodyタグの最後の行に以下の1行を追加する。<script src="s...
プログラミング

【p5.js】スケッチをWebページの背景に設定する

style()メソッドでcanvas要素の z-index を -1 に設定する。index.html<!DOCTYPE html><html lang="ja"> <head> <meta charset="utf-8"> <title>...
プログラミング

【p5.js】p5.jsをCDNから読み込む

headタグの中に以下の2行を追加する。<script src=""></script><script src="sketch.js"></script>index.html<!DOCTYPE html><html lang="ja"> <...