Color Strips

Finding a good color palette for your project can be difficult. I’d love to learn the mysterious formulas behind harmonic color patterns, but so far coming up with suitable combinations has been mostly a matter of trial and error: the examples below are no different. If you don’t want to go through the hassle of inventing the schemes yourself, Adobe’s Kuler website is filled with ready-made palettes.

Randomly colored wall of horizontal strips

Show code »

ColorColumn.qml:

import QtQuick 1.0

Column {
    width: 800; height: 400
    property real pixelsPerRelativeHeight
    function rectangleColor() {
        var value = Math.random()
        var red = value < 0.4 ? 0.8+0.2*Math.random() : 0.1+0.4*Math.random()
        var green = value > 0.4 && value < 0.8 ? 0.7+0.3*Math.random() : 0.4+0.3*Math.random()
        var blue = value > 0.8 ? 0.6+0.2*Math.random() : 0.2*Math.random()
        return Qt.rgba(red, green, blue)
    }
    Component.onCompleted: {
        var totalRelativeHeight = 0
        for (var index = 0; index < children.length; index++) {
            if (children[index] !== repeater)
                totalRelativeHeight += children[index].relativeHeight
        }
        pixelsPerRelativeHeight = height/totalRelativeHeight
    }
    Repeater {
        id: repeater
        model: 40
        Rectangle {
            width: parent.width
            color: rectangleColor()
            height: Math.ceil(relativeHeight*pixelsPerRelativeHeight)
            property real value: Math.random()
            property real relativeHeight: Math.pow(Math.random(),3)
        }
    }
}


Randomly colored wall of vertical strips

Show code »

ColorRow.qml:

import QtQuick 1.0

Row {
    width: 800; height: 400
    property real pixelsPerRelativeWidth
    function rectangleColor() {
        var isRed = Math.random() < 0.1
        var grayness = 0.2+0.6*Math.random()
        var red = isRed ? grayness+0.6*Math.random()*(1-grayness) : grayness
        var green = isRed ? 0.5*grayness+0.5*Math.random()*grayness : 1.3*grayness
        var blue = isRed ? 0.8*grayness+0.4*Math.random()*grayness : 1.3*grayness
        return Qt.rgba(red, green, blue)
    }
    Component.onCompleted: {
        var totalRelativeWidth = 0
        for (var index = 0; index < children.length; index++) {
            if (children[index] !== repeater)
                totalRelativeWidth += children[index].relativeWidth
        }
        pixelsPerRelativeWidth = width/totalRelativeWidth
    }
    Repeater {
        id: repeater
        model: 80
        Rectangle {
            height: parent.height
            color: rectangleColor()
            width: Math.ceil(relativeWidth*pixelsPerRelativeWidth)
            property real relativeWidth: Math.pow(Math.random(),3)
        }
    }
}


Vertical segments of horizontal strips

Show code »

colorstrips_rowofcolumns.qml:

import QtQuick 1.0

Row {
    width: 800; height: 400
    property real pixelPerRelativeWidth
    Component.onCompleted: {
        var totalRelativeWidth = 0
        for (var index = 0; index < children.length; index++) {
            if (children[index] !== repeater)
                totalRelativeWidth += children[index].relativeWidth
        }
        pixelPerRelativeWidth = width/totalRelativeWidth
    }
    Repeater {
        id: repeater
        model: 50
        ColorColumn {
            height: parent.height
            width: Math.ceil(relativeWidth*pixelPerRelativeWidth)
            property real relativeWidth: Math.pow(Math.random(),3)
            function rectangleColor() {
                var value = Math.random()
                var blue = value < 0.4 ? 0.8+0.2*Math.random() : 0.1+0.4*Math.random()
                var red = value > 0.4 && value < 0.8 ? 0.7+0.3*Math.random() : 0.4+0.3*Math.random()
                var green = value > 0.8 ? 0.2+0.2*Math.random() : 0.2*Math.random()
                return Qt.rgba(red, green, blue)
            }
        }
    }
}


Horizontal segments of vertical strips

Show code »

colorstrips_columnofrows.qml:

import QtQuick 1.0

Column {
    width: 800; height: 400
    property real pixelsPerRelativeHeight
    Component.onCompleted: {
        var totalRelativeHeight = 0
        for (var index = 0; index < children.length; index++) {
            if (children[index] !== repeater)
                totalRelativeHeight += children[index].relativeHeight
        }
        pixelsPerRelativeHeight = height/totalRelativeHeight
    }
    Repeater {
        id: repeater
        model: 40
        ColorRow {
            width: parent.width
            height: Math.ceil(relativeHeight*pixelsPerRelativeHeight)
            property real relativeHeight: Math.pow(Math.random(),3)
            function rectangleColor() {
                var isBlue = Math.random() < 0.2
                var grayness = 0.2+0.6*Math.random()
                var red = isBlue ? 0.5*grayness+0.5*Math.random()*grayness : grayness
                var green = isBlue ? grayness+0.6*Math.random()*(1-grayness) : 1.3*grayness
                var blue = isBlue ? 0.7*grayness+0.3*Math.random()*grayness : 1.3*grayness
                return Qt.rgba(red, green, blue)
            }
        }
    }
}

Leave a Reply

Your email address will not be published.