Making an array of rectangles

FrostedCookies

Hi all, sorry I looked through the documentations as best as I could. I'm trying to make an array of rectangles inside a rectangle object (so I can manipulate them later). But I keep getting a syntax error.

import QtQuick 2.0
import org.kde.plasma.core 2.0 as PlasmaCore

Rectangle {
    id: page;
    width: 1920; height: 1080;    
    color: "gray"
    
    property var myArray: [
        Rectangle {
            id: rect1;
            width: parent.width * 0.07; height: parent.height * 0.4;
            color: "black";
        }
    ];   
}

I've tried just var myArray = [ Rectangle{}] but this gives a "javascript outside of script object" error as well as wrapping the Rectangle in the array inside {} e.g. myArray: [ { Rectangle {}} ] but it still complains "Expected token :' & Expected token ,'
"
Any idea what I'm doing wrong?

Thanks!

Gojir4

@FrostedCookies Hi,

What do you mean by "manipulate them later" ? What is your goal ?

You may try this, but I'm not sure it's a good solution, you may want to set visible to false for rect1, rect2 and rect3:

Rectangle {
    id: page;
    width: 1920; height: 1080;    
    color: "gray"
    Rectangle{id: rect1; width: 10; height: 10}
    Rectangle{id: rect2; width: 10; height: 10}
    Rectangle{id: rect3; width: 10; height: 10}

    property var myArray: []
    Component.onCompleted: {
        myArray.push(rect1);
        myArray.push(rect2);
        myArray.push(rect3);
    }
}

Another solution could be to create Rectangle items dynamically when needed. But again that depends of what you want to achieve.

Component{
    id: rectComponent
    Rectangle{
        width: 10; height: 10
    }
}
//Then when a Rectangle is necessary 
var component = Qt.createComponent(rectComponent);
myArray.push(component)

GrecKo

you can do

property list<Rectangle> myArray: [
    Rectangle {
        id: rect1;
        width: parent.width * 0.07; height: parent.height * 0.4;
        color: "black";
    },
    Rectangle {}
]

I am not sure how you want to use it thought.
I believe there is a better solution to what you want to do, can you explain us what is your goal?

FrostedCookies

@Gojir4 and @GrecKo Thank you so much for your reply. I was just playing around trying to make a dynamic background for my KDE desktop (and to share if it ends up looking good!) and it seems to use QML.

The first rectangle is the screen (Hence the 1920x1080). The next set of rectangles (which will be of different size) I want to make randomly appear and disappear. I'd like to have a lot of rectangles at some point and move them from one array where they're "hidden" to another array where they're visible and randomly select rectangles from the hidden array to become visible and vice-versa (visible to hidden) on a timer. That's the goal anyway. But I was having trouble just making an array of rectangles to start with :)

Gojir4

@FrostedCookies Hi,

You may achieve this with a Repeater

Grid{
    anchors.centerIn: parent
    columns: 5

    Repeater{
        id: rep
        model: 25
        Rectangle{
            width: rect.width * 0.2
            height: rect.height * 0.2
            color: Qt.hsla(index / rep.count, 1, 0.5, 1)
        }
    }
}

If you want to make something smooth, with some animations (I guess you're making something like a live wallpaper) I would suggest to use the QML Particles for that.

Gojir4

@FrostedCookies About the hidden/visible animation

You may achieve what you want with QML Animation
Here some simple example

Rectangle{
        id: rect
        anchors.centerIn: parent
        width: 200
        height: 200
        color: "black"
        Grid{
            anchors.centerIn: parent
            columns: 5

            Repeater{
                id: rep
                model: 25
                Rectangle{
                    width: rect.width * 0.2
                    height: rect.height * 0.2                    

                    SequentialAnimation{
                        running: true
                        loops: Animation.Infinite
                        NumberAnimation{
                            target: parent
                            property: "opacity"
                            duration: Math.random(3000) + 100 * index
                            from: 0.0
                            to: 1.0
                            easing.type: Easing.InOutQuad
                        }
                        NumberAnimation{
                            target: parent
                            property: "opacity"
                            duration: Math.random(3000) + 100 * index
                            from: 1.0
                            to: 0.0
                            easing.type: Easing.InOutQuad
                        }
                    }
                    color: Qt.hsla(index / rep.count, 1, 0.5, 1)
                }
            }
        }
    }

Tom_H

@FrostedCookies
What you are describing sounds like a particle system. I agree with @Gojir4 , check out the Qt Quick Particle System.

FrostedCookies

@Gojir4 Thank you for this reply. I've been making good progress. However, I'm hitting an error where I've added about 2500 rectangles and when I pass a certain number, the qmlscene segfaults. Is there a limit to the number of objects or is there a parameter I haven't set correctly?

Thanks!

Gojir4

@FrostedCookies Are you talking about Particles ? Repeater ? Can you please be more specific