p5.js
画像のように楕円上に円を配置してください。
任意の二点を作成し、その距離間に連続して図形を描画してください。 画像においては0と9が任意の点として作成されています。
画像のような螺旋を描画してください。
画像のように指定された色の内からランダムに取得して、図形を配置してください。 色や図形の形、数は問いません。
次のような線形グラデーションを描いてください。 色や変化の間隔などは問いません。
次のような星形の図形を描いてください。 大きさ、角の数、色などは自由。
次のような星形を描いてください。 大きさや色は自由とします。
次のような正多角形を描いてください。 角の数や色、向きなどは自由とする。
次のような正三角形を作ってください。 向きや色は自由とします。 ↓解答例
現在の画面解像度(windowWidth,widndowHeight)のうち、小さい方に合わせてキャンバスを正方形に作成してください。 ↓解答例を見る
円を描画するときに基本的なコマンドとしてcircle()がある。 しかしあくまで描画を目的としているコマンドなので応用が利きづらい側面がある。 例えば角の数を定めたカクカクの円を描きたいとか、描画ではなく位置の取得が目的な場合には使えない。 そこで三…
配列を使うことによって事前に用意した色の中から選択することができる。 //配列に色を格納 const colorPallet = ['#38b48b','#9d5b8b','#ffea00']; function setup(){ createCanvas(400,400); background(240); //色を取得 let colorPick = Math.round(rand…
画像のような単純な花模様を描く。 花びら部分の曲線はbeginShapeのcurveVertexが使いやすい。 クラスの勉強を兼ねて放り込んでみる。 let theta=0; let split; let num=[3,5,8,13,21]; let hana1; function setup() { createCanvas(400, 400); background(2…
考え方自体はどの言語でも使えるものなのでp5.jsと題しているのはあまり意味ないです。 正三角形を描画するときには ・1辺を基準にする場合 ・中心点を基準にする場合 の二つがあります。 三角関数を理解しているのは前提としてそれぞれの考え方を書いておき…
自分がp5.jsを通してジェネレーティブアートをはじめたきっかけの一つにはすぐに利益を得られる環境を見つけたからだ。 あまりこういう話は好まない人もいるだろうけど、別の誰かにとっては価値のある情報かもしれないので書いておこうと思う。 ユニークなプ…
これまでのプログラミング経験 経験によっても感想が変わってくると思うので、まず自分のプログラミング経験をなぞってみようと思う。 高校の授業でC#を扱っていた。 ワードプレスでCSSを一週間くらいいじった。 Pythonを勉強しようとして環境構築まではした…
p5.jsの便利な図形描画の方法にbeginShapeがある。 多角形や計算では算出できない複雑な図形を書く時には覚えておきたい関数だ。 ただvertexで各点を指定する必要があるのでコードが長くなりやすい。複製をするならなおのことだ。 beginShape(); vertex(10,2…
上のような模様の複製パターンの基本的なコードの書き方を考える function setup() { createCanvas(400, 400); background(220); noStroke(); noLoop(); } function draw() { let posx=0,posy=0; const dia=100; const num=5; //Y列用のループ for(let i=0;i