Issue

This Content is from Stack Overflow. Question asked by Jerome

I’m trying to write a program in p5.js and my results are almost there however the last rectangles I get are too big. The image is what it should look like.

function setup() {
  createCanvas(400, 400);
  background(255);
}

function draw() {
noLoop()
 stroke(0)
 strokeWeight(0.5)
  let x = 50
  let y = 300
 let w = 20
 let h = 20
 blueRange = 255
 greenRange = 127
  for(let i = 0;i <= 10;i++) {
    fill(64,greenRange,blueRange)
    rect(x,y,w,h)
  x = x + w +(w/4)
  y = y - h
  h = h + h
  greenRange = greenRange + 10
 }

}

Solution

You had your h multiplied by 2 every time. instead, calculate it based on i

function setup() {
    createCanvas(400, 400);
    background(255);
}

function draw() {
    noLoop()
    stroke(0)
    strokeWeight(0.5)
    let x = 50
    let y = 300
    let w = 20
    let h = 20
    blueRange = 255
    greenRange = 127
    for (let i = 0; i <= 10; i++) {
        fill(64, greenRange, blueRange)
        rect(x, y, w, h * (i + 1))
        x = x + w + (w / 4)
        y = y - h
        greenRange = greenRange + 10
    }

}

This Question was asked in StackOverflow by Jerome and Answered by IT goldman It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.