How can i create something like this in QML using javascript?

Actually I know how to create rectangles in QML but want to do something like this. QML canvas can be of any size but whenever QML section is loaded multiple squares are generated with random sizes and colors without overlapping. When I'm trying to do this rectangles are generated in a list form. I'm a web developer(ruby on rails oriented) but new to such javascript stuff. Any help will be appreciated.

How can i create something like this in QML using javascript?

Actually I know how to create rectangles in QML but want to do something like this. QML canvas can be of any size but whenever QML section is loaded multiple squares are generated with random sizes and colors without overlapping. When I'm trying to do this rectangles are generated in a list form. I'm a web developer(ruby on rails oriented) but new to such javascript stuff. Any help will be appreciated.

• javascript
• qt
• qml

• stackoverflow./questions/16002310/… you will only have to take care of the overlapping – dtech Commented Feb 3, 2016 at 18:52
• @ddriver actually that is my main problem. :) – Amarjeet Singh Commented Feb 3, 2016 at 19:34

2 Answers 2

As @ddriver already noticed, the simpliest decision is to loop through all children to find a room to a new rectangle.

Rectangle {
        id: container
        anchors.fill: parent
        property var items: [];
        Component {
            id: rect
            Rectangle {
                color: Qt.rgba(Math.random(),Math.random(),Math.random(),1);
                border.width: 1
                border.color: "#999"
                width: 50
                height: 50
            }
        }

        Component.onCompleted: {
            var cnt = 50;
            for(var i = 0;i < cnt;i ++) {
                for(var t = 0;t < 10;t ++) {
                    var _x = Math.round(Math.random() * (mainWindow.width - 200));
                    var _y = Math.round(Math.random() * (mainWindow.height - 200));
                    var _width = Math.round(50 + Math.random() * 150);
                    var _height = Math.round(50 + Math.random() * 150);

                    if(checkCoord(_x,_y,_width,_height)) {
                        var item = rect.createObject(container,{ x: _x, y: _y, width: _width, height: _height });
                        container.items.push(item);
                        break;
                    }
                }
            }
        }

        function checkCoord(_x,_y,_width,_height) {
            if(container.items.length === 0)
                return true;
            for(var j = 0;j < container.items.length;j ++) {
                var item = container.children[j];
                if(!(_x > (item.x+item.width) || (_x+_width) < item.x || _y > (item.y+item.height) || (_y+_height) < item.y))
                    return false;
            }
            return true;
        }
    }

Yes, this is not so wise solution but it still can be improved.

If you want efficiency, it will e at the cost of plexity - you will have to use some space partition algorithm. Otherwise, you could just generate random values until you get enough that are not overlapping.

Checking whether two rectangles overlap is simple - if none of the corners of rectangle B is inside rectangle A, then they don't overlap. A corner/point is inside a rectangle if its x and y values are in the range of the rectangle's x and width and y and height respectively.

In JS Math.random() will give you a number between 0 and 1, so if you want to make a random value for example between 50 and 200, you can do that via Math.random() * 150 + 50.

Have an array, add the initial rectangle value to it, then generate new rectangle values, check if they overlap with those already in the array, if not - add them to the array as well. Once you get enough rectangle values, go ahead and create the actual rectangles. Since all your rectangles are squares, you can only go away with 3 values per square - x, y and size.