Problem drawing with p5.js

AjejeBrazorf

Hi, I state that I'm new to p5.js, i'm having an issue drawing things. I got this code that draw a Golden Ratio Rectangle:

var y,x;
var sliderx,slidery;
const GoldenRatio = (1 + Math.sqrt(5)) / 2;


function setup() {
  createCanvas(1920/3*2,1080/3*2);
  background(255, 204, 0);
  sliderx = createSlider(0,1500,1200,1);
  console.log(x);
  console.log(y);
}

function draw() {
  x = sliderx.value();
  y = x / GoldenRatio;
  noFill();
  rect(1,0,x-2,y);
  GoldenRatioDraw(x,y);
}

function GoldenRatioDraw(x,y){
  if(x>0 && y>0){
  push();
  translate(y,y);
  line(0,0,0,-y);
  arc(0,-y,y * 2,y * 2,PI/2,PI);
  rotate(3* PI /2);
  translate(x-y);
  GoldenRatioDraw(y,x-y);
  pop();
  }
}

When I change the x value with the slider, I want it to change the dimension of the rectangle not to draw a new one and overlay the old one.(sorry for bad english :) )

Can you help me?

GoToLoop

https://p5js.org/reference/#/p5/background

https://Forum.Processing.org/two/discussion/24033/how-to-check-if-dom-slider-is-currently-in-use

AjejeBrazorf

Thanks, but this didn't helped.

blindfish

Add a call to background(255) at the beginning of draw.... By default draw() doesn't clear the canvas on each frame: you have to do it yourself ;)

AjejeBrazorf

Thanks you so much, that was the problem.