OPENRNDR 是一套由荷蘭團隊 RNDR 以 Kotlin 程式語言打造的互動程式創作框架，專門讓數位藝術家、互動設計師創作作品。其類似 Processing 的編寫風格、100% 原生 Kotlin DSL 語法加上直接採用 Gradle 做為編譯工具，對於已經熟悉 JVM 的開發者很好入手。在這場分享裡，將簡介 OPENRNDR 及互動視覺的概念，並以視覺化 Chatbot 訊息為主題，實驗另類文字動態牆呈現。

1. (Shengyou Fan)
#12
2020/12/26
Chatbot

2. !
Kotlin Open Source
JetBrains …
Chatbot

3. YouTube
"
…

4. —
• https://www.youtube.com/watch?v=wt9oT0PDeLo

5. —
• Computer art
• Visualization
• Computational art
• Interactive art

6. —

7. Processing
—

8. p5.js
—

9. openFrameworks
—

10. Kotlin
#
Kotlin Server-side

11. —

12. OPENRNDR
—
OPENRNDR is an open source framework for creative
coding, written in Kotlin for the Java VM that simplifies
writing real-time interactive software. It fully embraces
its existing infrastructure of (open source) libraries,
editors, debuggers and build tools. It is designed and
developed for prototyping as well as the development
of robust performant visual and interactive applications.
from OPENRNDR Website

13. —
• 2010 LUSTlab RNDR
• 2017 RNDR OPENRNDR
• 2018 6
• 2019 Dutch Design Award 2019

14. —
• 100% Kotlin
• IntelliJ IDEA
• Gradle

15. $

16. —
• Git
• IntelliJ IDEA
• JVM (JDK)

17. —
$ git clone https://github.com/openrndr/openrndr-template {dir}

18. —

19. OPENRNDR DSL
— fun main() = application {
configure {
//
}
program {
// ( )
extend {
// ( )
}
}
}
•
•
•

20. —
fun main() = application {
configure {
width = 1920
height = 1080
position = IntVector2(0, 0)
title = "Chatbot Visualizer”
unfocusBehaviour = UnfocusBehaviour.THROTTLE
windowResizable = true
fullscreen = Fullscreen.DISABLED
}
// ...
}
•
•
•
•
•
•

21. —
1 2 3 4 5
1
2
3
4
5
(5, 5)

22. Drawer
—
fun main() = application {
configure {
// ...
}
program {
// ...
extend {
drawer.circle(x, y, radius)
}
}
}
•

23. Drawer
—
fun main() = application {
configure {
}
program {
extend {
drawer.fill = ColorRGBa.WHITE // null
drawer.stroke = ColorRGBa.BLACK // null
drawer.strokeWeight = 1.0 //
}
}
}
•
•
•

24. Drawer
— fun main() = application {
// ...
program {
extend {
drawer.clear(color)
drawer.circle(width, height, radius)
drawer.rectangle(x, y, width, height)
drawer.lineSegment(x0, y0, x1, y1)
val points = listOf(
Vector2(x, y),
Vector2(x, y),
Vector2(x, y)
)
drawer.lineStrip(points)
}
}
}
•
•
•
•
•

25. —
fun main() = application {
// ...
program {
extend {
drawer.circle(width / 2.0, height / 2.0, 50.0)
drawer.circle(mouse.position, 50.0)
drawer.text(seconds, x, y)
}
}
}
•
•
•

26. —
fun main() = application {
// ...
program {
val font = loadFont("...", size)
extend {
drawer.fontMap = font
drawer.fill = ColorRGBa.WHITE
drawer.text("...", x, y)
}
}

27. —
fun main() = application {
// ...
program {
val image = loadImage("...")
extend {
drawer.image(image, x, y, width, height)
}
}
}

28. —
fun main() = application {
// ...
program {
val videoPlayer = VideoPlayerFFMPEG.fromFile("...")
videoPlayer.play()
extend {
videoPlayer.draw(drawer)
}
}
}

29. %

30. —
fun main() = application {
// ...
program {
val videoPlayer = VideoPlayerFFMPEG.fromFile("...")
val users = UserGenerator().generate(30)
val boxes = BoxGenerator().generate(users)
BoxPositioner().positionize(width, height, boxes)
videoPlayer.play()
extend {
videoPlayer.draw(drawer)
drawer.fill = ColorRGBa.BLACK
val rendered = boxes.filter {
it.coordinate.x > (it.width + 300) * -1
}
BoxRenderer().render(drawer, seconds, rendered)
}
}
}

31. —
fun main() = application {
configure {
// ...
}
program {
extend(Screenshots()) {
scale = 1.0
}
extend {
// ...
}
}
}

32. —
•

33. —
•
• &
•
• …

34. —
• Creative Coding
•
• OPENRNDR
• Chatbot

35. —
• https://github.com/shengyou/openrndr-for-message-visualizer

36. &One more thing!

37. Webinar
—

38. Kotlin
—
2:00
3/15 - 6/21
7/19 - 11/8

39. —

40. Kotlin
—
5
Android
Ktor Spring Boot

41. it
—
Kotlin
9 30

42. https://tw.kotlin.tips
Tips
—
https://tw.intellij.tips

43. —
Coding
Kraftsman

44. (Shengyou Fan)
shengyou.fan@jetbrains.com
Q&A
—
OEPNRNDR
Chatbot