Image fit

orx-image-fit provides functionality to making the drawing and placement of images somewhat easier. orx-image Fits images in frames with two options, contain and cover, similar to CSS object-fit.

Prerequisites

Assuming you are working on an openrndr-template based project, all you have to do is enable orx-image-fit in the orxFeatures set in build.gradle.kts and reimport the gradle project.

Contain mode

fun main() = application {
    program {
        val image = loadImage("data/images/cheeta.jpg")
        extend {
            val margin = cos(seconds) * 50.0 + 50.0
            drawer.imageFit(image, 20.0, 20.0 + margin / 2, width - 40.0, height - 40.0 - margin, fitMethod = FitMethod.Contain)
            // -- illustrate the placement rectangle
            drawer.fill = null
            drawer.stroke = ColorRGBa.WHITE
            drawer.rectangle(20.0, 20.0 + margin / 2.0, width - 40.0, height - 40.0 - margin)
        }
    }
}

Link to the full example

Additionally the placement of the image in the rectangle can be adjusted

fun main() = application {
    program {
        val image = loadImage("data/images/cheeta.jpg")
        extend {
            val margin = 100.0
            drawer.imageFit(image, 20.0, 20.0 + margin / 2, width - 40.0, height - 40.0 - margin, horizontalPosition = cos(seconds) * 1.0, fitMethod = FitMethod.Contain)
            // -- illustrate the placement rectangle
            drawer.fill = null
            drawer.stroke = ColorRGBa.WHITE
            drawer.rectangle(20.0, 20.0 + margin / 2.0, width - 40.0, height - 40.0 - margin)
        }
    }
}

Link to the full example

Cover mode

fun main() = application {
    program {
        val image = loadImage("data/images/cheeta.jpg")
        extend {
            // -- calculate dynamic margins
            val xm = cos(seconds) * 50.0 + 50.0
            val ym = sin(seconds) * 50.0 + 50.0
            
            drawer.imageFit(image, 20.0 + xm / 2.0, 20.0 + ym / 2, width - 40.0 - xm, height - 40.0 - ym)
            
            // -- illustrate the placement rectangle
            drawer.fill = null
            drawer.stroke = ColorRGBa.WHITE
            drawer.rectangle(20.0 + xm / 2.0, 20.0 + ym / 2.0, width - 40.0 - xm, height - 40.0 - ym)
        }
    }
}

Link to the full example

Additionally the placement of the image in the rectangle can be adjusted

fun main() = application {
    program {
        val image = loadImage("data/images/cheeta.jpg")
        extend {
            val margin = 100.0
            drawer.imageFit(image, 20.0, 20.0 + margin / 2, width - 40.0, height - 40.0 - margin, verticalPosition = cos(seconds) * 1.0)
            
            // -- illustrate the placement rectangle
            drawer.fill = null
            drawer.stroke = ColorRGBa.WHITE
            drawer.rectangle(20.0, 20.0 + margin / 2.0, width - 40.0, height - 40.0 - margin)
        }
    }
}

Link to the full example

edit on GitHub