Generative Design with p5.js を読んでいく-vertex()-

買っちった

*http://www.bnn.co.jp/books/9296/*より

*http://www.bnn.co.jp/support/generativedesign_p5js/*より

この本やべえよ。美術の教科書の、授業ではやらないけどなんかスゲーのが載ってるページを永遠に見ているような興奮がある。

Generative Designとは

ここでは主にプログラムを打ち込んでコンピュータに絵を描かせる試み

p5.jsとは

1. Processingという描画ソフトを
2. JavaScriptという言語を使って動かせるようにしたもの

〜以下覚え書き〜

vertex(x座標,y座標)

vertex
<意味> 頂点　最高点　頂上　

qiita.js

  beginShape();
  
  vertex(100,100);//1
  vertex(100,200);//2
  vertex(200,200);//3
  
  endShape();

draw() 関数内で上のように書くと

こうなる。　注)数字は描画されません

コードの意味

qiita.js

  beginShape();
  
  vertex(100,100);//1
  vertex(100,200);//2
  vertex(200,200);//3
  
  endShape();

• vertex()はellipse()やrect()などといった特定の形状にとらわれず、自由に図形を描きたいときに使う。

• vertex(x座標,y座標)はその名の通り頂点の座標を表し、それらが繋がれることで図形を成す。

• beginShape();〜endShape();までの間は自由描画モード¹ が発動しており、
  vertex()はその中でのみ使うことができる。

どう繋ごう

頂点の座標が定っても、それらの繋ぎ方は一通りではない。
繋ぎ方のルールはbeginShape(),endShape()の引数として渡すことができる。

簡単なまとめ↓


他にもbeginShape(QUADS,QUAD_SPRIT)などがあるが
三角形→四角形になっただけで概念は一緒。

作例

こんなのどうよ

https://www.openprocessing.org/sketch/897830

マウスのX座標：波の間隔
マウスのY座標：波の高さ
1~7のキーが押された時、それぞれに対応した繋ぎ方のルールに変更

参考文献

Generative Design with p5.js

p5.jsの公式リファレンス(日本語非対応² )
↓↓↓
https://p5js.org/

1. 名付けました。 ↩

2. イキりポイント ↩