Modifying contours with ContourAdjuster

[abe]

A small demo of the contour adjuster. I accidentally found this shape and I found it interesting

imports

import org.openrndr.application
import org.openrndr.color.ColorRGBa
import org.openrndr.extra.shapes.adjust.adjustContour
import org.openrndr.shape.Circle
import org.openrndr.shape.Rectangle

fun main() {
    application {
        program {
            extend {
                val cir = adjustContour(Circle(drawer.bounds.center, 200.0).contour) {
                    vertices.forEach {
                        it.rotate(75.0)
                    }
                }
                val rect = adjustContour(Rectangle.fromCenter(drawer.bounds.center, 200.0).contour) {
                    vertices.forEach {
                        it.rotate(75.0)
                    }
                }
                drawer.clear(ColorRGBa.WHITE)
                drawer.stroke = ColorRGBa.BLACK.opacify(0.7)
                drawer.fill = ColorRGBa.PINK
                drawer.contour(cir)
                drawer.fill = ColorRGBa.PINK.shade(1.1)
                drawer.contour(rect)
            }
        }
    }
}

This program uses two adjustContour operations to alter all vertices in a circle and in a rectangle. The larger shape used to be a circle, which is internally constructed out of 4 bezier curves. The smaller shape was a square with 4 straight segments.

The program iterates over all (4) vertices of each shape, and uses the rotate operation to rotate the control points on each side of each vertex, producing what you see in the image. It’s a bit like sculpting 2D shapes.

I will continue exploring the ContourAdjuster and maybe share other interesting results.

[abe]

Another adjuster example:

Imports

import org.openrndr.application
import org.openrndr.color.ColorRGBa
import org.openrndr.extra.shapes.adjust.adjustContour
import org.openrndr.shape.Circle
import org.openrndr.shape.ShapeContour

fun main() {
    application {
        program {
            val cir = adjustContour(Circle(drawer.bounds.center, 200.0).contour.resample(12)) {
                selectVertices { i, _ -> i % 2 == 0 }
                vertices.forEach {
                    it.moveBy(it.normal * 20.0, true)
                }
            }
            extend {
                drawer.clear(ColorRGBa.WHITE)
                drawer.stroke = ColorRGBa.BLACK.opacify(0.7)
                drawer.fill = ColorRGBa.PINK
                drawer.contour(cir)
            }
        }
    }
}

For this to work I wrote a resample() function which you can find below.
What the code does is this: select all the even vertices and displace them following the curve normal at that point by 20 pixels. The true argument is the default which makes it update the control points next to each vertex.

By default a Circle only has 4 segments. I wanted to have a circle with more segments so I wrote the following:

/**
 * Returns a modified ShapeContour in which segments have been split into [subdivisions] parts.
 * The new contour should be visually identical to the original.
 */
fun ShapeContour.resample(subdivisions: Int): ShapeContour {
    require(subdivisions >= 2) { "subdivisions must be >= 2 but is actually $subdivisions" }
    return ShapeContour(
        segments.map { seg ->
            List(subdivisions) {
                val t = it / subdivisions.toDouble()
                seg.sub(t, t + 1.0 / subdivisions)
            }
        }.flatten(), closed
    )
}

Now we can play a bit. If you toggle the true argument (updateTangents) in moveBy to false the vertices are displaced but the control points are stuck. It looks like this:

Same, but using -20.0 instead of 20.0:

Or shifting 2 out of every 8 vertices inwards:

            val cir = adjustContour(Circle(drawer.bounds.center, 200.0).contour.resample(10)) {
                selectVertices { i, _ -> i % 8 < 2 }
                vertices.forEach {
                    it.moveBy(it.normal * -50.0, true)
                }
            }

Or just go a bit crazy

[abe]

Adjusting edges

In the examples above we altered the vertices of contours, but it is also possible to alter the edges.

In the following example we rotate all the edges of a contour by a varying amount:

imports

import org.openrndr.application
import org.openrndr.color.ColorRGBa
import org.openrndr.extensions.Screenshots
import org.openrndr.extra.shapes.adjust.adjustContour
import org.openrndr.extra.shapes.hobbycurve.hobbyCurve
import org.openrndr.shape.Circle

fun main() {
    application {
        program {
            val cirs = List(10) { n ->
                val c = Circle(drawer.bounds.center, 150.0 + 5.0 * n).contour
                adjustContour(c) {
                    edges.forEach {
                        it.rotate(2.0 * n - 10.0)
                    }
                }
            }
            extend(Screenshots())
            extend {
                drawer.clear(ColorRGBa.WHITE)
                drawer.stroke = ColorRGBa.BLACK
                drawer.fill = null
                drawer.contours(cirs)
            }
        }
    }
}

We could also only alter every other edge:

val cirs = List(10) { n ->
    val c = Circle(drawer.bounds.center, 150.0 + 5.0 * n).contour
    adjustContour(c) {
        selectEdges { i, e -> i % 2 == 0 }
        edges.forEach {
            it.rotate(2.0 * n - 10.0)
        }
    }
}

Lets resample the circle to have 60 segments instead of 4:

val cirs = List(10) { n ->
    val c = Circle(drawer.bounds.center, 150.0 + 5.0 * n).contour.sampleEquidistant(60).hobbyCurve()
    adjustContour(c) {
        selectEdges { i, e -> i % 2 == 0 }
        edges.forEach {
            it.rotate(2.0 * n - 10.0)
        }
    }
}

Lets make it more obvious what adjusting the edges do. We will create a square centered on the screen, then resample it to have 48 vertices (12 per side) and finally shift one from every four segments outwards:

val c = Rectangle.fromCenter(drawer.bounds.center, 200.0).contour.sampleEquidistant(48)
val c2 = adjustContour(c) {
    selectEdges { i, e -> i % 4 == 1 }
    edges.forEach {
        it.moveBy(it.normal(0.5) * 20.0)
    }
}
extend(Screenshots())
extend {
    drawer.clear(ColorRGBa.WHITE)
    drawer.stroke = ColorRGBa.BLACK
    drawer.fill = null
    drawer.contour(c2)
}

By scaling the edges up we can avoid the diagonal lines:

val c = Rectangle.fromCenter(drawer.bounds.center, 200.0).contour.sampleEquidistant(48)
val c2 = adjustContour(c) {
    selectEdges { i, e -> i % 4 == 2 }
    edges.forEach {
        it.moveBy(it.normal(0.5) * 20.0)
        it.scale(3.0)
    }
}

And let’s round it a bit so no one gets hurt with those sharp corners:

val c = Rectangle.fromCenter(drawer.bounds.center, 200.0).contour.sampleEquidistant(48)
val c2 = adjustContour(c) {
    selectEdges { i, e -> i % 4 == 2 }
    edges.forEach {
        it.moveBy(it.normal(0.5) * 20.0)
        it.scale(3.0)
    }
}.roundCorners(8.0)

That’s it for now

[abe]

Here a design making use of edge shifting and scaling, and creating shapes with pairs of contours. Note that when constructing a shape, the even elements should be reversed to act as holes of the previous ones.

imports

import org.openrndr.application
import org.openrndr.color.ColorRGBa
import org.openrndr.extensions.Screenshots
import org.openrndr.extra.color.presets.ROSY_BROWN
import org.openrndr.extra.noise.Random
import org.openrndr.extra.shapes.adjust.adjustContour
import org.openrndr.extra.shapes.operators.roundCorners
import org.openrndr.shape.Shape

fun main() {
    application {
        configure {
            width = 800
            height = 800
        }
        program {
            val cs = List(8) {
                val c = drawer.bounds.offsetEdges(-30.0 * (it + 4))
                    .contour.sampleEquidistant(4 * Random.int(10, 30))
                val which = Random.int0(4)
                adjustContour(c) {
                    selectEdges { i, _ -> i % 4 == which && Random.bool() }
                    edges.forEach { edge ->
                        edge.moveBy(edge.normal(0.5) * 20.0)
                        edge.scale(3.0)
                    }
                }.roundCorners(5.0)
            }
            val shapes = cs.chunked(2) {
                Shape(listOf(it[0], it[1].reversed))
            }
            extend {
                drawer.clear(ColorRGBa.WHITE)
                drawer.stroke = null
                drawer.fill = ColorRGBa.ROSY_BROWN
                drawer.shapes(shapes)
            }
        }
    }
}