kaze/orx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[orx-shadestyles] n-point gradient shadeStyle and demos (#138)

Browse Source
This commit is contained in:
Abe Pazos
2020-07-18 17:15:54 +02:00
committed by GitHub
parent 1683154676
commit 508e5d3a37
4 changed files with 120 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
orx-shade-styles/src/demo/kotlin/DemoAllGradients01.kt
View File

@@ -1,14 +1,18 @@
import org.openrndr.application
import org.openrndr.color.ColorRGBa
import org.openrndr.color.ColorXSVa
import org.openrndr.draw.isolated
import org.openrndr.extensions.SingleScreenshot
import org.openrndr.extra.shadestyles.*
import org.openrndr.math.Polar
import org.openrndr.shape.Rectangle
import kotlin.random.Random
fun main() {
application {
configure {
width = 1000
height = 500
}
program {
if (System.getProperty("takeScreenshot") == "true") {
@@ -19,33 +23,40 @@ fun main() {
// Create gradients with initial colors
val gradients = listOf(
radialGradient(ColorRGBa.PINK, ColorRGBa.WHITE),
angularGradient(ColorRGBa.PINK, ColorRGBa.WHITE),
linearGradient(ColorRGBa.PINK, ColorRGBa.WHITE),
halfAngularGradient(ColorRGBa.PINK, ColorRGBa.WHITE)
RadialGradient(ColorRGBa.PINK, ColorRGBa.WHITE),
AngularGradient(ColorRGBa.PINK, ColorRGBa.WHITE),
NPointGradient(4, Array(4) {
ColorRGBa.PINK.shade(it / 3.0)
}),
LinearGradient(ColorRGBa.PINK, ColorRGBa.WHITE),
HalfAngularGradient(ColorRGBa.PINK, ColorRGBa.WHITE)
)
extend {
gradients.forEachIndexed { i, gradient ->
gradients.forEachIndexed { gradientId, gradient ->
for (column in 0 until 10) {
val color1 = ColorRGBa.PINK.toHSVa().shiftHue(column * 12.0)
.scaleValue(0.5).toRGBa()
val w = width.toDouble() / 10.0
val h = height.toDouble() / gradients.size
val rect = Rectangle(column * w, gradientId * h, w, h)
val offset = Polar((seconds + column) * 15.0, 0.3).cartesian
drawer.isolated {
when (gradient) {
is RadialGradient -> {
gradient.color1 = color1
gradient.exponent = column / 3.0 + 0.3
gradient.length = 0.6
gradient.offset = Polar(
(seconds + column) * 15.0, 0.3).cartesian
gradient.offset = offset
}
is AngularGradient -> {
gradient.color1 = color1
gradient.exponent = column / 3.0 + 0.3
gradient.rotation = (seconds - column) * 10.0
gradient.offset = Polar(
(seconds + column) * 30.0, 0.3).cartesian
gradient.offset = offset
}
is LinearGradient -> {
gradient.color1 = color1
@@ -56,13 +67,20 @@ fun main() {
gradient.color1 = color1
gradient.exponent = column / 3.0 + 0.3
gradient.rotation = (column - seconds) * 10.0
gradient.offset = Polar(
(seconds + column) * 8.0, 0.3).cartesian
gradient.offset = offset
}
is NPointGradient -> {
// Animate points.
// We could also animate colors.
gradient.points = Array(gradient.numPoints) {
rect.center + Polar(it * 90.0 +
column * 36 - seconds * 10,
40.0).cartesian
}
}
}
shadeStyle = gradient
rectangle(column * width / 10.0, i * height / 4.0,
width / 10.0, height / 4.0)
rectangle(rect)
}
}
}

53
orx-shade-styles/src/demo/kotlin/DemoNPointGradient01.kt Normal file
View File

@@ -0,0 +1,53 @@
import org.openrndr.application
import org.openrndr.color.ColorRGBa
import org.openrndr.color.ColorXSVa
import org.openrndr.extensions.SingleScreenshot
import org.openrndr.extra.shadestyles.NPointGradient
import org.openrndr.math.Polar
import org.openrndr.shape.ShapeContour
import kotlin.math.PI
import kotlin.math.cos
/**
* Demonstrate using an n-point gradient.
* The gradient has 8 points in screen coordinates and 8 colors.
* The colors are fixed, the points of the gradient move.
* A contour is drawn using the same points from the gradient,
* but note that this is not necessary: you can animate the gradient
* on a static shape (a circle for example) or you can animate a shape
* with a static gradient.
*/
fun main() {
application {
program {
if (System.getProperty("takeScreenshot") == "true") {
extend(SingleScreenshot()) {
this.outputFile = System.getProperty("screenshotPath")
}
}
val numPoints = 8
val gradient = NPointGradient(numPoints, Array(numPoints) {
ColorXSVa(it * 360.0 / numPoints, 1.0, 1.0).toRGBa()
})
extend {
drawer.run {
clear(ColorRGBa.WHITE.shade(0.9))
val t = PI * 2 * (frameCount % 300) / 300.0
val points = Array(numPoints) {
val lfo = cos(it * PI / 2 - t)
val theta = it * 360.0 / numPoints - 22.5 * lfo
val radius = 200 + 170 * lfo
bounds.center + Polar(theta, radius).cartesian
}
gradient.points = points
shadeStyle = gradient
stroke = ColorRGBa.WHITE
strokeWeight = 4.0
contour(ShapeContour.fromPoints(points.asList(), true))
}
}
}
}
}

2
orx-shade-styles/src/main/kotlin/LinearGradient.kt
View File

@@ -11,7 +11,7 @@ import org.openrndr.math.Vector2
class LinearGradient(
color0: ColorRGBa,
color1: ColorRGBa,
offset: Vector2,
offset: Vector2 = Vector2.ZERO,
rotation: Double = 0.0,
exponent: Double = 1.0) : ShadeStyle() {

35
orx-shade-styles/src/main/kotlin/NPointGradient.kt Normal file
View File

@@ -0,0 +1,35 @@
package org.openrndr.extra.shadestyles
import org.openrndr.color.ColorRGBa
import org.openrndr.draw.ShadeStyle
import org.openrndr.extra.parameters.Description
import org.openrndr.math.Vector2
import org.openrndr.math.Vector3
@Description("N-Point gradient")
class NPointGradient(
numPoints: Int,
colors: Array<ColorRGBa>,
points: Array<Vector2> = arrayOf(Vector2.ZERO)) : ShadeStyle() {
var numPoints: Int by Parameter()
var colors: Array<ColorRGBa> by Parameter()
var points: Array<Vector2> by Parameter()
init {
this.numPoints = numPoints
this.colors = colors
this.points = points
fragmentTransform = """
float sum = 0;
vec4 rgba = vec4(0.0);
for(int i=0; i<p_numPoints; i++) {
float dist = 1.0 / (1.0 + distance(p_points[i], c_screenPosition));
sum += dist;
rgba += p_colors[i] * dist;
}
x_fill = rgba/sum;
"""
}
}