QuickStack
関数名の干渉を防ぐため、このライブラリで追加される関数名にはプレフィックス"qs_"が付けられます。
サイズや距離などを指定する場合、特に注意書きが無い限り単位にはpxが使用されます。
グリッド系関数は、グリッド状に図形等を配置したい場合の座標計算を支援します。
いずれの関数も返り値は配列です。qs_gridRadialを除き、グリッド配置は左上から順に行われ、各座標は左から右、上から下の順に格納されます。
以下は、QuickStackが生成する座標配列の形式の例です。
[
{
x: 400,
y: 300,
},
{
x: 350,
y: 386,
},
],
以下は、qs_gridFixed()を使用した際の座標を取り出す例です。
const points = qs_gridFixed(x, y, gapHor, gapVert);
for(let i=0;i>points.length;i++){
// i番目の点のx座標を取得
x = points[i].x;
//i番目の点のy座標を取得
y = points[i].y;
}
点の間隔が等しいグリッド配置を行う際の、各点の座標を返します。
qs_gridFixed(x, y, gapHor, gapVert, cols, rows)
- x
- グリッド配置を開始する点のx座標
- y
- グリッド配置を開始する点のy座標
- gapHor
- 点同士の横方向の間隔
- gapVert
- 点同士の縦方向の間隔
- cols
- 横方向の要素数
- rows
- 縦方向の要素数
幅、高さ、横方向の分割数、縦方向の分割数を指定してグリッド配置を行う際の、各点の座標を返します。
qs_gridFixed(x, y, width, height, cols, rows)
- x
- グリッド配置を開始する点のx座標
- y
- グリッド配置を開始する点のy座標
- width
- グリッドの横幅
- height
- グリッドの高さ
- cols
- 横方向の要素数
- rows
- 縦方向の要素数
横方向の分割数、縦方向の分割数、周囲の空白を指定してキャンバス全体にグリッド配置を行う際の、各点の座標を返します。
周囲の空白は、指定した値ぶんの空白が両方の側に作られることに注意してください。
例えばpaddingHorに10を指定した場合、キャンバスの左右の端から10pxずつ空白を開けた範囲でグリッド配置が行われます。
qs_gridCanvas(paddingHor, paddingVert, cols, rows)
- paddingHor
- 横方向に空ける空白(片側のみ)
- paddingVert
- 縦方向に空ける空白
- cols
- 横方向の点の数
- rows
- 縦方向の点の数
半径、要素数を指定して円形配置を行う際の、各点の座標を返します。
qs_gridCanvas(x, y, radius, elements)
- x
- グリッド配置を開始する点のx座標
- y
- グリッド配置を開始する点のy座標
- radius
- 配置に使用する円の半径
- elements
- 配置する要素の数
カラーパレット系関数は、カラーパレットの管理を支援します。
カラーパレットに関するデータは、実際に複数の色が格納された配列と、そのパレットを複数格納する配列で構成されています。
以下は、QuickStackが生成するカラーパレット配列の形式の例です。
それぞれの色は、p5.jsのcolorオブジェクトとして保存されています。
[
[ //palette No.0
{color object}, {color object}, {color object}, {color object}, {color object},
],
[ //palette No.1
{color object}, {color object}, {color object}, {color object}, {color object},
],
]
以下は、qs_pickColor()を使用して色を取り出し、塗りつぶし色に指定する例です。
fill(qs_pickColor(0, 1));
また、パレットを管理している配列に直接アクセスしたい場合は、配列qsClrがそれに該当します。
現在管理されているカラーパレットの一覧を返します。
qs_showPalettes()
パレットを格納する配列の末尾に、新たなカラーパレットを追加します。
引数にはそのパレットに属する色をまとめた配列を使用し、色の指定にはRGB(A)に対応する配列形式や文字列形式でのHEXカラー指定等、p5.jsのcolor()パーサが解釈可能な形式を使用してください。
HEXカラーとは16進数による色指定で、#4cba99等がその例です。
qs_addPalette([[color], [color], [color]])
- palette
- 追加するカラーパレット
- color
- カラーパレットに属する色(ex: [120, 200, 255]や"#4cba99")
indexで指定したパレットを削除します。indexはパレットを格納している配列内でのそのパレットの位置です。
qs_deletePalette(index)
- index
- 削除するパレットの位置
指定したパレットに色を追加します。色は該当パレットの末尾に追加されます。
色の指定にはRGB(A)に対応する配列形式や文字列形式でのHEXカラー指定等、p5.jsのcolor()パーサが解釈可能な形式を使用してください。
HEXカラーとは16進数による色指定で、#4cba99等がその例です。
qs_addColor(index, color)
- index
- 追加するパレットの位置
- color
- 追加する色
paletteIndexで指定されたパレット内のcolorIndexで指定した色を削除します。indexはパレット内でのその色の位置です。
パレットを格納する配列に発生した空きは、自動で詰められます。
qs_deletePalette(paletteIndex, colorIndex)
- index
- 削除する色の位置
indexで指定したパレットを返します。
qs_pickPalette(index)
- index
- 取得するパレットの位置
ランダムなパレットを返します。
qs_rndPalette()
paletteIndexで指定したパレットの、colorIndexで指定した色を返します。
返り値はp5.jsのcolorオブジェクトです。
qs_pickColor(paletteIndex, colorIndex)
- paletteIndex
- 取得する色が格納されたパレットの位置
- colorIndex
- 取得する色のパレット内での位置
indexで指定したパレットから、ランダムな色を返します。
返り値はp5.jsのcolorオブジェクトです。
qs_rndPaletteColor(index)
- index
- ランダムな色を取得するパレットの位置
パレット関係なく、現在追加されている全ての色の中からランダムな色を返します。
返り値はp5.jsのcolorオブジェクトです。
qs_rndColor()