Trying to make a row of bricks with random widths proportional to the width of the canvas

I'm trying to draw a row of bricks

  • the bricks should have random lengths
  • the bricks should not extend out of the canvas.
  • the canvas length is 400 and I want there to be padding between the row and the canvas on each side of 10 px
  • there should be 10 pixels of padding between each brick (or better since a user could put in a large number like 35 you could make the padding smaller like 2 px [optional])

In this bad code you see that I attempted to create 7 bricks drawRow(7). They have random sizes but they are not proportional to the width of the canvas minus the canvas padding. and they don't have 10 px padding between the bricks. This is kind of a math problem I cant figure out the proportions maybe. Any help would be appreciates.

$(function(){
	var canvas = $("canvas")[0],
		context = canvas.getContext("2d"),
		cWidth = canvas.width,
		brickHeight = 20,
		canvasPadding = 10,
		lengthOfRow = cWidth - 20 *2,
		width = 0,
		x = canvasPadding,
		brickPadding = 10;

	function drawBrick(x,y,w,h){
		context.beginPath();
		context.rect(x,y, w, h)
		context.fillStyle = "red";
		context.fill()
		context.strokeStyle = "black"
		context.stroke()
		context.closePath()
	}

	function drawRow(num){
		
			
			// width = 50;
			for(var i = 0; i < num; i ++){
				if(x + width < lengthOfRow + width){
					// x= x + width + brickPadding;
					var numOfBlocks = lengthOfRow / num;
					width = Math.floor(Math.random() * ((numOfBlocks + 10 - (numOfBlocks)  + 1) +  (numOfBlocks -10) )) 
					x = i * (width  + width /brickPadding)
					
					drawBrick(x +canvasPadding ,0,width * 2,brickHeight)
					// width += width;
				// x += x
				console.log(x, " ", width, " numblock ", numOfBlocks)
				}

			}
	}

	drawRow(7)

})
background: #ece;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<canvas id="canvas" width="400" height="400"></canvas>

Answers


Your drawRow() function is using a single loop to compute the random brick widths and to draw the bricks. But there is no way to compute an individual brick width until you know the ratio of the individual brick width to the sum of the all the brick widths. I would suggest using two loops. In the first loop, compute a random number for each brick and sum these random numbers. You can now compute the ratio of an individual brick width to the sum of the brick widths (e.g. brick's random number divided by sum of random numbers). In the second loop, compute the brick widths and draw the bricks. An individual's brick width equals the sum of all brick widths times the brick's ratio to the sum. The sum of all brick widths is the canvas width minus sum of canvas padding minus sum of brick padding. For example, the code might look something like...

$(function() {

    var canvas = $("canvas")[0],
        context = canvas.getContext("2d"),
        canvasWidth = canvas.width,
        canvasPadding = 10,
        brickPadding = 10,
        brickY = 0,
        brickHeight = 20;

    function drawBrick(x, y, w, h) {
        context.rect(x, y, w, h)
        context.fillStyle = "red";
        context.fill()
        context.strokeStyle = "black"
        context.stroke()
    }

    function drawRow(num){
        var brickX = canvasPadding;
        var brickRandom = [];
        var sumBrickRandom = 0;
        var sumBrickWidths = canvasWidth - 2 * canvasPadding - (num - 1) * brickPadding;
        for (var i = 0; i < num; i++) {
            var randomNumber = 1 + 3 * Math.random();
            brickRandom[i] = randomNumber;
            sumBrickRandom += randomNumber;
        }
        for(var i = 0; i < num; i++) {
            var brickWidth = sumBrickWidths * brickRandom[i] / sumBrickRandom;
            drawBrick(brickX, brickY, brickWidth, brickHeight);
            brickX += brickWidth + brickPadding;
        }
    }

    drawRow(7);

});

Note that I generated random numbers between 1 and 4. This ensures that the largest width is no more that 4 times the smallest width. This avoids cases where the smallest width could be near zero.


Need Your Help

Exception: ActiveRecord::ConnectionNotEstablished on using pubnub

ruby ruby-on-rails-4 activerecord mysql2 pubnub

I am using pubnub in my project and it is subscribed to a channel and in my subscriber I update my DB.

How do I best reuse html code for menus

javascript html jsp nav code-reuse

I'm making a larger website using HTML, css, JSP and Java-servlet.