p5.jsでscaleしてもstrokeWeightを一定に保つ方法

前提

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