前提
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 コメント