1

p5js で可能な限り多くのブラウザー ウィンドウをカバーする正方形のグリッドのようなパターンを生成しようとしています。これを反応で使用し、Win10 でクロムを使用しているため、インスタンス モードで p5js を使用しています。これが私のコードです:-

var size = 15;
var height = window.innerHeight;
var width = window.innerWidth;

Sketch = (p) => {
        p.setup = () => {
            p.createCanvas(width,height)
            p.frameRate(60);
            p.noLoop();
        } 

        p.draw = () => {
            p.background(250);
            p.stroke(0);
            p.noFill();
            for(let i =0;i*size +size <width;i++) {
                for(let j=0;j*size +size<height;j++) {
                    p.rect(i*size,j*size,size,size);
                }
            }
        }

        p.mouseDragged = (e) => {
            p.stroke(0);
            let x = Math.floor(e.clientY/size);
            let y = Math.floor(e.clientX/size);
            p.fill(220);
            p.rect(y*size,x*size,size,size);
                
        }
}

p.noLoop() を呼び出すので、毎回更新されません。また、p.redraw() を呼び出してすべてをデフォルトに変更するボタンもあります。これが私が得るグリッドと動作です:

バッドボーダーズ

グリッドの境界はさまざまなサイズであり、最初に減少し、次に増加し、その後減少します。また、マウスをドラッグする領域にはさらに奇妙な境界線があります (これは別の場所をクリックすると解決されるので、これは GPU エイリアシング レンダリングの問題ですか?)。画面全体で同じ境界線を持つグリッドを作成するにはどうすればよいですか?

編集: 1 つのボックスでもレンダリングすると、問題が発生します。左と上の境界線は問題ありません。ただし、右と下の境界線には、問題と思われる灰色がかった境界線の余分なピクセルがあります。これを修正するにはどうすればよいですか?

シングルボックス

また、p5js で strokeWeight と rect はどのように機能しますか? strokeWeight(10) と rect(3,2,50,50) を実行すると、周囲に 10 ピクセルの境界線がある 50 x 50 の四角形が作成されますか、それとも境界線が四角形のサイズに含まれますか?

4

0 に答える 0