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

If you are working on an openrndr-template based project, orx-image-fit should be ready to use because it is part of the basic orx bundle, as described in ORX.

Contain mode

import org.openrndr.application
import org.openrndr.color.ColorRGBa
import org.openrndr.draw.loadImage
import org.openrndr.extra.imageFit.FitMethod
import org.openrndr.extra.imageFit.imageFit
import kotlin.math.cos
import kotlin.math.sin

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

import org.openrndr.application
import org.openrndr.color.ColorRGBa
import org.openrndr.draw.loadImage
import org.openrndr.extra.imageFit.FitMethod
import org.openrndr.extra.imageFit.imageFit
import kotlin.math.cos
import kotlin.math.sin

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

import org.openrndr.application
import org.openrndr.color.ColorRGBa
import org.openrndr.draw.loadImage
import org.openrndr.extra.imageFit.FitMethod
import org.openrndr.extra.imageFit.imageFit
import kotlin.math.cos
import kotlin.math.sin

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

import org.openrndr.application
import org.openrndr.color.ColorRGBa
import org.openrndr.draw.loadImage
import org.openrndr.extra.imageFit.FitMethod
import org.openrndr.extra.imageFit.imageFit
import kotlin.math.cos
import kotlin.math.sin

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