Problem drawing with p5.js

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?

Answers

Sign In or Register to comment.