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

Question

前提

p5.jsでいろいろな図形を描いて楽しんでいます。
座標変換をするscale関数利用時に問題が発生しました。

実現したいこと

strokeWeightを一定に保ったままscaleしたい。

つまり、

rect(0, 0, 100, 100);

と

scale(4);
rect(0, 0, 25, 25);

が、同じ図形を出力するようにしたいのです。

発生している問題・エラーメッセージ

scale関数はstrokeWeightにも影響を与えるので、上記のソースコードを実行すると当然後者はscale(4);された分、線の幅(strokeWeight)も4倍太い図形が出力されてしまいます。

試したこと

strokeWeight関数を使って相殺する

scale関数の直後にstrokeWeight関数を挿入することで、線の幅を一定に保つ方法です。
以下の例では、4倍に拡大したので線の幅は1/4にしています。

scale(4);
strokeWeight(1/4);
rect(0, 0, 25, 25);

これでとりあえずrect(0, 0, 100, 100);と同じ図形を出力するようになったのですが、この方法ではscaleが複数回出てくる場合に対応できません。

例えば、下のソースコードのような場合です。scaleは先程と同じように2×2で4ですが、strokeWeightは上書きされるだけなので1/2となり、線が太くなってしまいます。

scale(2);
strokeWeight(1/2);
scale(2);
strokeWeight(1/2);
rect(0, 0, 25, 25);

質問

この問題を解決するスマートな方法は何かないでしょうか？

現在のstrokeWeightの値が取得できれば以下のように書けて複数回のscaleでも問題ないと思うのですが、取得できませんよね？

scale(4);
strokeWeight(getStrokeWeight() / 4);
rect(0, 0, 25, 25);

補足情報（FW/ツールのバージョンなど）

https://openprocessing.org/ 上でプログラミングしています。

Answer 1

現在のstrokeWeightの値が取得できれば

drawingContext.lineWidthがそれっぽいです。

reference | drawingContext
CanvasRenderingContext2D.lineWidth - Web APIs | MDN

function setup() {
  createCanvas(500, 500);
}

function draw() {
  background(220);

  // strokeWeightは永続なので、push・popで囲うか１にリセットが必要！
  //push();
  strokeWeight(1);
  rect(100, 100, 100, 100);

  myScale(2);
  rect(100, 100, 50, 50);

  myScale(2);
  rect(75, 75, 25, 25);
  //pop();
}

function myScale(s) {
  scale(s);
  strokeWeight(drawingContext.lineWidth / s);
}

strokeWeightは永続で、scaleはdrawごとにリセットされるのが地味に扱いにくいですね^^;（今のスケールを取れるほうが話が早いのですが...

Comments

[kekke59]

ありがとうございます!
やりたいことができました。