Random Positioned Boxes

Question

I'm having a little trouble with randomly positioning a bunch of random boxes throughout a page.

The goal is to have a randomly amount of boxes show up in random positions and the boxes are to be random colors on a page. The boxes should also be overlapping, making them truly in random positions.

Thus far all I have is one randomly colored box on the page, clearly not randomly positioned. I'm suck of where to go from here with the positioning and creating a bunch of random boxes...

Please note JQuery cannot be used.

HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Ramdom Boxes</title>
        <script src="A2Q1.js"></script>
    </head>

    <body>      
    </body>
</html>

Javascript:

window.onload = init;

function init() {
    //when page is loaded create a bunch of boxes randomly throughout the page
    //get the body element of the document
    var body = document.getElementsByTagName("body")[0];

    //create the canvas tag
    var canvas = document.createElement("canvas");
    canvas.height = 100;
    canvas.width = 100;
    var context = canvas.getContext("2d");

    //create the box and append onto the canvas 
    var colour = '#'+ Math.round(0xffffff * Math.random()).toString(16);
    context.fillStyle = colour;
    context.fillRect(25,25,50,50); 

    //append the canvas onto the body 
    body.appendChild(canvas);
}

`context.fillRect(25,25,50,50)` is drawing a 50x50 rectangle starting at position (25,25). See: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D#fillRect() — thgaskell, Oct 16 '13 at 03:13

score 2 · Accepted Answer · answered Oct 16 '13 at 05:37

It would be better to resize the canvas as much as window size. In order to draw a bunch of rectangles, use for loop to execute draw rectangle code repeatedly. Set each rectangle's position in window width and height (Math.random() * window.innerWidth, Math.random() * window.innerHeight).

Here is my sample code.

function init() {
    var body = document.getElementsByTagName("body")[0];
    var canvas = document.createElement("canvas");
    canvas.height = window.innerHeight;
    canvas.width = window.innerWidth;
    var context = canvas.getContext("2d");

    //  Opacity makes a good appearance when objects are overlapped 
    context.globalAlpha=0.7;

    //  Repeat to draw a rectangle 100 times
    for(var i=0;i<100;i++){
        var color = '#'+ Math.round(0xffffff * Math.random()).toString(16);
        context.fillStyle = color;

        //Each rectangle is at (0 ~ width of window, 0 ~ height of window)
        //Each rectangle's size is (20 ~ 100, 20 ~ 100)     
        context.fillRect(Math.random()*window.innerWidth, Math.random()*window.innerHeight, Math.random()*80+20, Math.random()*80+20);
    }

    body.appendChild(canvas);
}
window.onload = init;

score 1 · Answer 2 · edited May 23 '17 at 12:33

1

For generating the random color you can refer this post

In order to get the x and y random values with respect to the width and height of the entire screen try this.

var maxWidth  = 1000;
var maxHeight = 1000;

var randomX = Math.max(0, Math.min((maxWidth - boxWidth), Math.random() * maxWidth));
var randomY = Math.max(0, Math.min((maxHeight - boxHeight), Math.random() * maxHeight));

Set the position for the canvas like this.

box.style.position = "absolute";
box.style.left = randomX;
box.style.top  = randomX;

edited May 23 '17 at 12:33

Community

1
1

answered Oct 16 '13 at 03:14

Triode

11,309
2
38
48

It looks like you're returning [0, `maxWidth-BoxWidth`] instead of [0, `maxWidth-boxWidth`)? – thgaskell Oct 16 '13 at 03:38
No it will return minimum value of 0 and a max value of (maxWidth - boxWidth) this will make sure that all the given boxes will be in the visible area. – Triode Oct 16 '13 at 04:42
Right, but shouldn't it be `(maxWidth - boxWidth) - 1`? if you have a 1x1 canvas, and you draw at (1,1) it will be off the canvas. – thgaskell Oct 16 '13 at 05:43
You can add it if you want any padding for the box. This case all the canvas will be visible not even a single pixel will go out of the view are – Triode Oct 16 '13 at 05:46
I see. You're right. The only problem I have now is that the distribution isn't uniform :) – thgaskell Oct 16 '13 at 10:36
There's a higher chance for the position of the box to be towards the bottom/right side of the container. For example, if it were a 5x5 box in on a 10x10 canvas, there's a 50% chance the x and y positions will be `5` (when Math.random() returns 5,6,7,8,9). Values 0,1,2,3,4 each have a 10% of being chosen. – thgaskell Oct 16 '13 at 11:20

score -1 · Answer 3 · answered Oct 16 '13 at 03:09

-1

create a table in your page and put that random box randomly to a cell.

for example

<table>
<!--many cell-->
</table>

then you may put your box randomly to a table's cell.

answered Oct 16 '13 at 03:09

Manwal

23,450
12
63
93

I should have been more clear, the boxes should be over lapping and not have any structure. – user2619395 Oct 16 '13 at 03:13

Random Positioned Boxes

3 Answers3