# Tutorials

**URL:** https://openrndr.discourse.group/c/openrndr/tutorials/14.md

[Latest](https://openrndr.discourse.group/latest.md) · [Categories](https://openrndr.discourse.group/categories.md)

---

## [About the Tutorials category](https://openrndr.discourse.group/t/about-the-tutorials-category/68)

<div class="topic-metadata">

**Author:** [@edwin](https://openrndr.discourse.group/u/edwin)\
**Replies:** 0

</div>

---

## [Ascii art in the console](https://openrndr.discourse.group/t/ascii-art-in-the-console/784)

<div class="topic-metadata">

**Author:** [@abe](https://openrndr.discourse.group/u/abe)\
**Replies:** 0\
**Last updated:** [August 25, 2026, 4:53pm UTC](https://openrndr.discourse.group/t/ascii-art-in-the-console/784 "2026-08-25T16:53:38Z")

</div>

Sometimes I log a number to the console with a simple println() and it may get lost among other texts. So today I did this: fun asciiText(text: String, font: String = "doh") = Runtime.getRuntime().exec("pyfiglet -f …

---

## [Faster builds with Gradle Caching](https://openrndr.discourse.group/t/faster-builds-with-gradle-caching/779)

<div class="topic-metadata">

**Author:** [@abe](https://openrndr.discourse.group/u/abe)\
**Replies:** 1\
**Last updated:** [August 7, 2026, 3:30pm UTC](https://openrndr.discourse.group/t/faster-builds-with-gradle-caching/779 "2026-08-07T15:30:06Z")

</div>

A short one: if you’re using the next-version branch of the openrndr-template, try opening gradle.properties and uncomment these two lines: org.gradle.configuration-cache=true org.gradle.configuration-cache.parallel=tr…

---

## [On Tarbell's Circle Inversion](https://openrndr.discourse.group/t/on-tarbells-circle-inversion/778)

<div class="topic-metadata">

**Author:** [@Alessandro](https://openrndr.discourse.group/u/Alessandro)\
**Replies:** 0\
**Last updated:** [July 21, 2026, 11:44am UTC](https://openrndr.discourse.group/t/on-tarbells-circle-inversion/778 "2026-07-21T11:44:29Z")

</div>

Jared Tarbell is a generative artist that always fascinated me since I first saw his piece Substrate many years ago. I really like this period of generative art of the early 2000s, which was less based on human interact…

---

## [AtomicCounterBuffer (compute shaders, advanced)](https://openrndr.discourse.group/t/atomiccounterbuffer-compute-shaders-advanced/776)

<div class="topic-metadata">

**Author:** [@abe](https://openrndr.discourse.group/u/abe)\
**Replies:** 5\
**Last updated:** [July 17, 2026, 12:54pm UTC](https://openrndr.discourse.group/t/atomiccounterbuffer-compute-shaders-advanced/776 "2026-07-17T12:54:02Z")

</div>

I’ve been figuring out how to use atomic counters in compute shaders. You can read about them at https://wikis.khronos.org/opengl/Atomic\_Counter. In compute shaders, hundreds or thousands of GPU threads execute simultan…

---

## [OPENRNDR & p5.js](https://openrndr.discourse.group/t/openrndr-p5-js/775)

<div class="topic-metadata">

**Author:** [@abe](https://openrndr.discourse.group/u/abe)\
**Replies:** 1\
**Last updated:** [June 9, 2026, 3:49pm UTC](https://openrndr.discourse.group/t/openrndr-p5-js/775 "2026-06-09T15:49:28Z")

</div>

In the past I wrote some posts here showing OPENRNDR and Processing programs side by side. I suddenly felt like doing the same with p5.js :slight\_smile: 1. Constrain p5.js example I’ll start with this example that intro…

---

## [Colorizing strokes along its length and width](https://openrndr.discourse.group/t/colorizing-strokes-along-its-length-and-width/764)

<div class="topic-metadata">

**Author:** [@abe](https://openrndr.discourse.group/u/abe)\
**Replies:** 0\
**Last updated:** [January 9, 2026, 7:33am UTC](https://openrndr.discourse.group/t/colorizing-strokes-along-its-length-and-width/764 "2026-01-09T07:33:50Z")

</div>

Happy new year :slight\_smile: This week there was a question asked in Slack about applying colors in thick strokes. I learned something new, which I wanted to share here. I already knew how to create a stroke that star…

---

## [Debugging memory leaks](https://openrndr.discourse.group/t/debugging-memory-leaks/762)

<div class="topic-metadata">

**Author:** [@abe](https://openrndr.discourse.group/u/abe)\
**Replies:** 1\
**Last updated:** [December 2, 2025, 4:14pm UTC](https://openrndr.discourse.group/t/debugging-memory-leaks/762 "2025-12-02T16:14:44Z")

</div>

Probably the most frequent reason for a memory leak is creating endless ColorBuffer instances without calling .destroy() on them. But it’s not the only one. I wrote a short function that could help diagnose which resour…

---

## [Resources for learning Kotlin](https://openrndr.discourse.group/t/resources-for-learning-kotlin/753)

<div class="topic-metadata">

**Author:** [@abe](https://openrndr.discourse.group/u/abe)\
**Replies:** 0\
**Last updated:** [August 24, 2025, 11:22am UTC](https://openrndr.discourse.group/t/resources-for-learning-kotlin/753 "2025-08-24T11:22:40Z")

</div>

Hi! I just discovered https://typealias.com/ and find the posts and tutorials really good for learning Kotlin :slight\_smile: Such a good speaker! An example about coroutines: (Alternative link) Scroll to…

---

## [Camera2D on a renderTarget (mixing items affected and not affected by a camera on the same program)](https://openrndr.discourse.group/t/camera2d-on-a-rendertarget-mixing-items-affected-and-not-affected-by-a-camera-on-the-same-program/603)

<div class="topic-metadata">

**Author:** [@abe](https://openrndr.discourse.group/u/abe)\
**Replies:** 3\
**Last updated:** [August 3, 2025, 9:25pm UTC](https://openrndr.discourse.group/t/camera2d-on-a-rendertarget-mixing-items-affected-and-not-affected-by-a-camera-on-the-same-program/603 "2025-08-03T21:25:13Z")

</div>

The camera examples found at orx/orx-camera at master · openrndr/orx · GitHub use extend(camera) which applies the camera to the whole window. But what if you want to apply the camera transformation to a renderTarget? M…

---

## [In Conversations - live coding and chatting about OPENRNDR \[📺 video\]](https://openrndr.discourse.group/t/in-conversations-live-coding-and-chatting-about-openrndr-video/505)

<div class="topic-metadata">

**Author:** [@abe](https://openrndr.discourse.group/u/abe)\
**Replies:** 23\
**Last updated:** [July 8, 2025, 8:05pm UTC](https://openrndr.discourse.group/t/in-conversations-live-coding-and-chatting-about-openrndr-video/505 "2025-07-08T20:05:29Z")

</div>

Hi hi :slight\_smile: Last Sunday @Alessandro and I (@abe) got together for the first time to record a few videos. We plan to continue in following weekends and see where this goes. I’ll update this post when there are n…

---

## [New computeStyle builder](https://openrndr.discourse.group/t/new-computestyle-builder/739)

<div class="topic-metadata">

**Author:** [@abe](https://openrndr.discourse.group/u/abe)\
**Replies:** 1\
**Last updated:** [January 31, 2025, 6:01pm UTC](https://openrndr.discourse.group/t/new-computestyle-builder/739 "2025-01-31T18:01:57Z")

</div>

There is a new way to create compute shaders: the computeStyle builder. It follows a pattern similar to that of shadeStyle. A few fixes landed in this code last week, so I can now share a small example of how it can sim…

---

## [Using kotlinx.serialization instead of gson](https://openrndr.discourse.group/t/using-kotlinx-serialization-instead-of-gson/725)

<div class="topic-metadata">

**Author:** [@abe](https://openrndr.discourse.group/u/abe)\
**Replies:** 0\
**Last updated:** [December 30, 2024, 11:26am UTC](https://openrndr.discourse.group/t/using-kotlinx-serialization-instead-of-gson/725 "2024-12-30T11:26:41Z")

</div>

In the latest branch of openrndr-template we have switched from gson to kotlinx-serialization. What both of these libraries do is making it easy to save and load program state. Gson comes from Google and kotlinx-seriali…

---

## [Mouse picking 3D objects](https://openrndr.discourse.group/t/mouse-picking-3d-objects/724)

<div class="topic-metadata">

**Author:** [@abe](https://openrndr.discourse.group/u/abe)\
**Replies:** 0\
**Last updated:** [December 26, 2024, 12:21pm UTC](https://openrndr.discourse.group/t/mouse-picking-3d-objects/724 "2024-12-26T12:21:08Z")

</div>

Inspired by this post, find here a program to detect which 3D object is under the mouse cursor. The idea is to do two render passes. One of them is what the user sees. The other render pass is used internally. It contai…

---

## [Multiple programs in one openrndr-js-template](https://openrndr.discourse.group/t/multiple-programs-in-one-openrndr-js-template/718)

<div class="topic-metadata">

**Author:** [@abe](https://openrndr.discourse.group/u/abe)\
**Replies:** 8\
**Last updated:** [December 14, 2024, 3:26pm UTC](https://openrndr.discourse.group/t/multiple-programs-in-one-openrndr-js-template/718 "2024-12-14T15:26:12Z")

</div>

In openrndr-template it’s very easy to have multiple programs in one project: we clone that repo, then have multiple Kotlin programs under under src/main/kotlin/. Each main method shows a green clickable triangle in Int…

---

## [OPENRNDR & Processing - Bouncy Bubbles (JS)](https://openrndr.discourse.group/t/openrndr-processing-bouncy-bubbles-js/717)

<div class="topic-metadata">

**Author:** [@abe](https://openrndr.discourse.group/u/abe)\
**Replies:** 0\
**Last updated:** [December 9, 2024, 11:44am UTC](https://openrndr.discourse.group/t/openrndr-processing-bouncy-bubbles-js/717 "2024-12-09T11:44:44Z")

</div>

It’s been a while since I’ve written these Java / Kotlin comparisons and today I felt like doing this, so here I am :slight\_smile: Processing / Java The original Bouncy Bubbles was written by Keith Peters / bit101. It…

---

## [How to use an "eraser" on a colorBuffer](https://openrndr.discourse.group/t/how-to-use-an-eraser-on-a-colorbuffer/700)

<div class="topic-metadata">

**Author:** [@abe](https://openrndr.discourse.group/u/abe)\
**Replies:** 1\
**Last updated:** [November 16, 2024, 7:04pm UTC](https://openrndr.discourse.group/t/how-to-use-an-eraser-on-a-colorbuffer/700 "2024-11-16T19:04:53Z")

</div>

I find interesting that adding elements to a canvas is easier than removing them, be it on a piece of paper, with oil paint on a canvas, or with a colorBuffer. Now that I think about it, we do have a drawer in OPENRNDR,…

---

## [Applying transformation matrices to vectors](https://openrndr.discourse.group/t/applying-transformation-matrices-to-vectors/701)

<div class="topic-metadata">

**Author:** [@abe](https://openrndr.discourse.group/u/abe)\
**Replies:** 0\
**Last updated:** [November 10, 2024, 4:14pm UTC](https://openrndr.discourse.group/t/applying-transformation-matrices-to-vectors/701 "2024-11-10T16:14:56Z")

</div>

An issue I fell into recently: I was creating transformation matrices and when applying them to vectors, I was getting Vector4(0.0, 0.0, 0.0, 0.0) no matter how I constructed those matrices. It turns out I was using Vec…

---

## [Extruding a shape into a 3D mesh](https://openrndr.discourse.group/t/extruding-a-shape-into-a-3d-mesh/444)

<div class="topic-metadata">

**Author:** [@abe](https://openrndr.discourse.group/u/abe)\
**Replies:** 1\
**Last updated:** [October 31, 2024, 4:56pm UTC](https://openrndr.discourse.group/t/extruding-a-shape-into-a-3d-mesh/444 "2024-10-31T16:56:07Z")

</div>

A program inspired by a question in Slack. The goal was to create an extruded 3D shape and apply a texture to the front while giving a flat color to the sides. Normally one could assign uv texture coordinates to all …

---

## [OPENRNDR & Processing - Drawing gradients](https://openrndr.discourse.group/t/openrndr-processing-drawing-gradients/75)

<div class="topic-metadata">

**Author:** [@abe](https://openrndr.discourse.group/u/abe)\
**Replies:** 3\
**Last updated:** [October 19, 2024, 9:03pm UTC](https://openrndr.discourse.group/t/openrndr-processing-drawing-gradients/75 "2024-10-19T21:03:47Z")

</div>

Gradients This example is taken directly from the Processing examples. It doesn’t show many syntax differences between Kotlin and Java. Instead the main takeaway is that OPENRNDR has high level features that simplify som…

---

## [Playing a simple MP3 file](https://openrndr.discourse.group/t/playing-a-simple-mp3-file/690)

<div class="topic-metadata">

**Author:** [@dedos](https://openrndr.discourse.group/u/dedos)\
**Replies:** 9\
**Last updated:** [October 7, 2024, 7:12am UTC](https://openrndr.discourse.group/t/playing-a-simple-mp3-file/690 "2024-10-07T07:12:43Z")

</div>

I’m working on a project that has to load a MP3 file and play it along with loaded images and videos. I stumped on the fact that OPENRNDR doesn’t handle MP3 files and came up with a workaround. I don’t think this is the …

---

## [Using Live Templates to type less](https://openrndr.discourse.group/t/using-live-templates-to-type-less/348)

<div class="topic-metadata">

**Author:** [@abe](https://openrndr.discourse.group/u/abe)\
**Replies:** 1\
**Last updated:** [April 30, 2023, 7:06am UTC](https://openrndr.discourse.group/t/using-live-templates-to-type-less/348 "2023-04-30T07:06:43Z")

</div>

Hi :slight\_smile: Live Templates is an IntelliJ Idea feature that expands short acronyms into full blocks of code. This repository includes a collection of them fine tuned for OPENRNDR. Install instructions here. Exa…

---

## [Modifying contours with ContourAdjuster](https://openrndr.discourse.group/t/modifying-contours-with-contouradjuster/645)

<div class="topic-metadata">

**Author:** [@abe](https://openrndr.discourse.group/u/abe)\
**Replies:** 3\
**Last updated:** [June 4, 2024, 2:53pm UTC](https://openrndr.discourse.group/t/modifying-contours-with-contouradjuster/645 "2024-06-04T14:53:26Z")

</div>

A small demo of the contour adjuster. I accidentally found this shape and I found it interesting :slight\_smile: importsimport org.openrndr.application import org.openrndr.color.ColorRGBa import org.openrndr.extra.sha…

---

## [OPENRNDR pen plotting tricks (Axidraw etc.)](https://openrndr.discourse.group/t/openrndr-pen-plotting-tricks-axidraw-etc/208)

<div class="topic-metadata">

**Author:** [@abe](https://openrndr.discourse.group/u/abe)\
**Replies:** 14\
**Last updated:** [March 1, 2024, 10:58pm UTC](https://openrndr.discourse.group/t/openrndr-pen-plotting-tricks-axidraw-etc/208 "2024-03-01T22:58:44Z")

</div>

Thread for useful tricks when working with plotters and OPENRNDR. 1. Boolean operations (clipMode) A useful operation when generating designs to plot is using boolean operations. Here some examples: ClipMode.REVERSE\_D…

---

## [Populating a vertexBuffer with a compute shader](https://openrndr.discourse.group/t/populating-a-vertexbuffer-with-a-compute-shader/628)

<div class="topic-metadata">

**Author:** [@abe](https://openrndr.discourse.group/u/abe)\
**Replies:** 0\
**Last updated:** [February 22, 2024, 5:45pm UTC](https://openrndr.discourse.group/t/populating-a-vertexbuffer-with-a-compute-shader/628 "2024-02-22T17:45:28Z")

</div>

Until I add more demos related to compute shaders and vertex buffers, I’ll leave this short example. The program creates a vertex buffer for 1000 vertices. Then, on every animation frame, we call a compute shader mul…

---

## [Planar reflections and stencil buffers](https://openrndr.discourse.group/t/planar-reflections-and-stencil-buffers/611)

<div class="topic-metadata">

**Author:** [@Alessandro](https://openrndr.discourse.group/u/Alessandro)\
**Replies:** 0\
**Last updated:** [November 14, 2023, 5:50pm UTC](https://openrndr.discourse.group/t/planar-reflections-and-stencil-buffers/611 "2023-11-14T17:50:01Z")

</div>

I have been recently interested in stencil buffers (here and here), which are quite useful when creating reflections, shadows, portals, etc. Here’s a little implementation of reflections from a planar mirror of any shap…

---

## [Example of an audio player with FFT](https://openrndr.discourse.group/t/example-of-an-audio-player-with-fft/600)

<div class="topic-metadata">

**Author:** [@abe](https://openrndr.discourse.group/u/abe)\
**Replies:** 1\
**Last updated:** [October 12, 2023, 8:54am UTC](https://openrndr.discourse.group/t/example-of-an-audio-player-with-fft/600 "2023-10-12T08:54:19Z")

</div>

Sharing here a post by @edwin: If anyone is interested in an OGG player with: pretty good support for seeking and play position queries frequency spectrum analysis through fft Code: extend(AudioPlayer()) { } Add th…

---

## [Converting font characters to contours](https://openrndr.discourse.group/t/converting-font-characters-to-contours/576)

<div class="topic-metadata">

**Author:** [@abe](https://openrndr.discourse.group/u/abe)\
**Replies:** 4\
**Last updated:** [June 19, 2023, 5:41pm UTC](https://openrndr.discourse.group/t/converting-font-characters-to-contours/576 "2023-06-19T17:41:05Z")

</div>

It is possible to convert font characters to shapes and contours. I believe it’s not yet documented, but here a quick example: importsimport org.openrndr.application import org.openrndr.color.ColorRGBa import org.open…

---

## [Test if a point is inside a Shape](https://openrndr.discourse.group/t/test-if-a-point-is-inside-a-shape/339)

<div class="topic-metadata">

**Author:** [@abe](https://openrndr.discourse.group/u/abe)\
**Replies:** 2\
**Last updated:** [June 18, 2023, 5:11pm UTC](https://openrndr.discourse.group/t/test-if-a-point-is-inside-a-shape/339 "2023-06-18T17:11:00Z")

</div>

This post is about testing if 2D points are located inside a 2D shape or not. It is actually very simple to test : if(myShape.contains(myPoint) { ... } // or if(myPoint in myShape) { ... } But what if the shape has a h…

---

## [Simplify the project view by using scopes](https://openrndr.discourse.group/t/simplify-the-project-view-by-using-scopes/554)

<div class="topic-metadata">

**Author:** [@abe](https://openrndr.discourse.group/u/abe)\
**Replies:** 0\
**Last updated:** [April 28, 2023, 9:17am UTC](https://openrndr.discourse.group/t/simplify-the-project-view-by-using-scopes/554 "2023-04-28T09:17:10Z")

</div>

There’s a new feature in the openrndr-template to simplify the project view, which can otherwise look cluttered with all those files and folders, specially for new users. The feature comes in the shape of a Gradle task …

[Next page](https://openrndr.discourse.group/c/openrndr/tutorials/14.md?page=1)
