feeles-ide/samples/matterjs/concave/README.md

The hackable and serializable IDE to make learning material

# 好きな形のオブジェクト


`Vertices.fromPath` と `Bodies.fromVertices` を使えば、  
好きな形のオブジェクトを作ることができるよ


大まかな原理は、 SVG を使うときと同じなんだ。  
ここでは SVG 形式の画像を使う代わりに、  
ベクトル（数字の集まり）を直接手で書く方法を使うよ

## 流れ

1. `Vertices.fromPath` で、ベクトルデータをつくる
2. `Bodies.fromVertices` で、オブジェクトをつくる
3. オブジェクトをまとめたスタックをつくる


## ![改造する](concave/main.js)


### Bodies.fromVertices(`x`, `y`, `vertices`, { render: `render` })
パラメータ | 意味 | 単位 | 最小 | 最大 
--- | --- | --- | --- | ---
x | オブジェクトの位置（横） | px | 0 | 800
y | オブジェクトの位置（縦） | px | 0 | 600 
vertices | ベクトルデータ |  | | 
render | | | |
fillStyle | 塗りつぶしの色 | 色 | | 
strokeStyle | 線の色 | 色 | | 
lineWidth | 線の太さ | px | 0 | Infinity


## ベクトルデータの書き方

`'40 0 40 20 ... 0 50'` という文字列の部分がベクトルデータだよ  
まずは、それぞれの数字を二つずつに区切ってみてみよう  
`40 0` `40 20` ... `0 50` みたいにね  
実は、このかたまり一つ一つが、点の位置を表しているんだ

一辺の長さが 100 の正方形をイメージしてみよう  
その正方形の中で `40 0` `40 20` ... `0 50` が  
それぞれどの位置に来るのかを考えてみよう

分かりにくいときは、とりあえず書いてみて、  
どうなるか試してみよう


[メニューに戻る](index.html)