前提
p5.jsでいろいろな図形を描いて楽しんでいます。
座標変換をするscale
関数利用時に問題が発生しました。
実現したいこと
strokeWeight
を一定に保ったままscale
したい。
つまり、
p5.js
rect(0, 0, 100, 100);
と
p5.js
scale(4); rect(0, 0, 25, 25);
が、同じ図形を出力するようにしたいのです。
発生している問題・エラーメッセージ
scale
関数はstrokeWeight
にも影響を与えるので、上記のソースコードを実行すると当然後者はscale(4);
された分、線の幅(strokeWeight)も4倍太い図形が出力されてしまいます。
試したこと
strokeWeight
関数を使って相殺する
scale
関数の直後にstrokeWeight
関数を挿入することで、線の幅を一定に保つ方法です。
以下の例では、4倍に拡大したので線の幅は1/4にしています。
p5.js
scale(4); strokeWeight(1/4); rect(0, 0, 25, 25);
これでとりあえずrect(0, 0, 100, 100);
と同じ図形を出力するようになったのですが、この方法ではscale
が複数回出てくる場合に対応できません。
例えば、下のソースコードのような場合です。scale
は先程と同じように2×2で4ですが、strokeWeight
は上書きされるだけなので1/2
となり、線が太くなってしまいます。
p5.js
scale(2); strokeWeight(1/2); scale(2); strokeWeight(1/2); rect(0, 0, 25, 25);
質問
この問題を解決するスマートな方法は何かないでしょうか?
現在のstrokeWeight
の値が取得できれば以下のように書けて複数回のscale
でも問題ないと思うのですが、取得できませんよね?
p5.js
scale(4); strokeWeight(getStrokeWeight() / 4); rect(0, 0, 25, 25);
補足情報(FW/ツールのバージョンなど)
https://openprocessing.org/ 上でプログラミングしています。
0 コメント