More than 3 years have passed since last update.

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

Posted at 2020-05-16

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

###Generative Designとは

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

###p5.jsとは

Processingという描画ソフトを

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のキーが押された時、それぞれに対応した繋ぎ方のルールに変更

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