p5.jsでのGoogle Fontsの使い方です。 Google Fontsを使おうとなったらいつも忘れているナンバー１です。 毎回調べていてイヤになります（汗）。 p5.jsのeditorの場合 GoogleFontsページ（https://fonts.google.com/）を開く Fontをダウンロード（Get Font）…

色を使うとき、HSBはすごくわかりやすい。 けど、RGBほどイメージはしづらい。 ぱっと目で見てわかるようにp5.jsで作ってみました。 HSBカラー コードはこちら↓ let cols = 19; let rows = 19; let size; function setup() { createCanvas(800, 800); colorM…

GenerativeDesignをしてみたいと思って始めたp5.jsです。 p5.jsでbeginShape()が便利に使えそうなので、改めて確認してみました。 beginShapeのTRIANGLE_FANを使ってみる 今回は、TRIANGLE_FANを使ってピザを切ったような柄を作りました。 ピザのつもりが和…

p5.jsを勉強していると偶然いい感じのものができたりします。 その時は「残したいな」と思います。 今回は、p5.jsで画像を書き出す方法です。 savePressedを使う まず、createCanvasを変数に入れます。 今回は変数を「c」にしています。 c = createCanvas(80…

Generative Art / Designをやってみたいと思ったとき、Processingは良いと思います。 私はProcessingでした。 Processingはアプリをダウンロードしてくれば、環境構築をしなくても動きます。 プログラミングを勉強しようとしてくじけてProcessingに流れ着い…

p5.jsでcircleを往復させるコードです。 個人的にですが、これがp5.jsで一番基本的なものかと思ってます。 ポイントは、dで方向を変更させることです。 コードはこちら↓ let x,d; function setup() { createCanvas(400, 400); colorMode(HSB,360,100,100,100…