p5.jsシェイプ調整前のアウトラインを表示する

Question

p5.jsを使用して画面上のスライダーから派生した値を使用してオブジェクトの形状を調整するだけです。

私が抱えている問題は、後で描かれた図形の輪郭が残っており、後で効果があることです。

私はnoStroke()修飾子を試しましたが、単に形状を描画しません。同様に、noFill()は、より奇妙ではあるが、依然として不正確な挙動を与える。

コード例：https://codepen.io/galleywest/pen/oejxyY

var slider 

function setup() { 
    createCanvas(600, 600) 
    slider = createSlider(0, 50, 0) 
} 

function draw() { 
    rect(10, 10, 80, 80, slider.value()) 
} 

どのように私はこの振る舞いを軽減することができますか？

Answer 1

古いフレームを消去するには、background()関数を呼び出す必要があります。

var slider 

function setup() { 
    createCanvas(600, 600) 
    slider = createSlider(0, 50, 0) 
} 

function draw() { 
    background(255, 0, 0); //draws a red background 
    rect(10, 10, 80, 80, slider.value()) 
} 

さらに詳しい情報はthe referenceです。