四角形を分割したいとき、分割の方法もいくつかある。 分割に方法によって印象も変わってくるので基本的な分割の状態を理解しておきたい。今回は垂線と平行線のみで行う。 分割が直角に限る場合、四分割まではなんらかの形で線が横断することになる。 二分割…

画像のように楕円上に円を配置してください。

任意の二点を作成し、その距離間に連続して図形を描画してください。 画像においては0と9が任意の点として作成されています。

画像のような螺旋を描画してください。

画像のように指定された色の内からランダムに取得して、図形を配置してください。 色や図形の形、数は問いません。

次のような線形グラデーションを描いてください。 色や変化の間隔などは問いません。

次のような星形の図形を描いてください。 大きさ、角の数、色などは自由。

次のような星形を描いてください。 大きさや色は自由とします。

次のような正多角形を描いてください。 角の数や色、向きなどは自由とする。

次のような正三角形を作ってください。 向きや色は自由とします。 ↓解答例

現在の画面解像度(windowWidth,widndowHeight)のうち、小さい方に合わせてキャンバスを正方形に作成してください。 ↓解答例を見る

円を描画するときに基本的なコマンドとしてcircle()がある。 しかしあくまで描画を目的としているコマンドなので応用が利きづらい側面がある。 例えば角の数を定めたカクカクの円を描きたいとか、描画ではなく位置の取得が目的な場合には使えない。 そこで三…

配列を使うことによって事前に用意した色の中から選択することができる。 //配列に色を格納 const colorPallet = ['#38b48b','#9d5b8b','#ffea00']; function setup(){ createCanvas(400,400); background(240); //色を取得 let colorPick = Math.round(rand…

p5.jsでアニメーションを描画したい場合、for文を使うのは都合が悪いときがある。 for(let i = 0 ; i <= 10 ; i++){ } draw関数はwhile文と同じなのでwhile文をfor文に変換することを考えて次のように考えればいい。 let i = 0; function draw(){ i++; if(i …

日本語でthree.jsの入門と検索すると上位に出てくる記事の通りに進めると、言語仕様の変更に引っかかった。 具体的にはローダーを使用したときに上手くいかなかった。 1.jsコードは分割しない 一つ目はjsファイルを分割して読み込む形式にするとインポートが…

日本語サイト リファレンスの日本語翻訳 P5.js 日本語リファレンス - Qiita 関数別の説明が細かく載っていてとてもありがたいです。アーティストのレオナさんのサイト だらっと学習帳 日々のコーディングからtipsを載せてくださっています。Katsumi Shibata…

プログラミングをはじめて二か月ほどで感じたこと。 どうにもならないという表現は不適切かもしれないが、入門向けのコンテンツによく挙げられるいくつかの文を覚えた段階ではハイハイをはじめた程度だと思った。 不器用な二足歩行なら基本文を駆使してもで…

画像のような単純な花模様を描く。 花びら部分の曲線は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