HRD-gl Experimental Audioreactive Custom Shader Three.js powered Drawing App.

Hi.
Not sure how to introduce this one but I really do hope you’ll have as much fun while playing with it as I do.

This experiment that started out very innocently and grew monstrously fast, so some of these options may seem absurd or mental.
I’ve also had problems with showing my toys and work in the past and I try to change this so that’s why I’m sharing it quite fresh and raw.

Basic keymap is under [H]
The scene contains a clear, transparent texture applied to basic geometry in the center.
You can draw on it with brushes and choose colors with [Shift] or pick them with [Alt] + Click.
Remember to end/brake brush with [Z] from time to time while drawing because it’s important part of drawing function. Without end/brake brushes are continuously collecting points and it’s great and super fast sometimes but also not as great when you need a clean new stroke.

You can switch between Orbit/Draw modes with [Space] and turn geometry around.
You can change geometries ([Q]-[W]).
You can load textures(Backgrounds).
You can tweak and modify Shaders. ( I highly recommend hitting RANDOM few times)
You can always reset shader through presets.
You can build presets. You can save/load presets settings into json and load it back again.
You can upload music in mp3 or wav for reactive parts
You can choose witch shader parameters are responding to frequency.
There are things you can do with responsiveness with sliders and reactivity presets. (highly recommend balanced one.
Shaders are updated most of the times while things are changing…

Just play with it. It’s a toy and a tool. If something goes wrong… F5 :wink:

have fun with it,
I’m always open to constructive feedback or ideas. (shaders are soooo hard)

Iwill make code available on github eventually, but at the moment:
a) I’ve never done this part before and I want it to be clean and useful.
b) I need to clean up the ugly parts and some interconnected mechanics and outputs.
c) I want to have a few more export options in it (both shader and video gif image realted)
d) it’s stressing af for a designer.

This is a whole new level for me so I’m sorry if things look or work weird but I’m trying to understand what the hell half of them can do better and how it will work with sound or drawing half of the time myself :wink:

P.S.
HRD started as a toy I built based on mrdoob’s code a long time ago, and it’s probably older than three.js :smiley: So it was really cool to tie it all together after all these years only because I’ve sat down with claude for a few days…
Eternal love for Ricardo’s Harmony code.
old HRD still working and kicking. HRD

Peace and love.
Bartek

3 Likes

I added hiding all toolbars under G.
I realized, amusingly, that showing drawing software requires explaining that in order for something to be visible and work, you have to start drawing and only then manipulate it.
A beautiful monster, overall.

The difference in the current development of tools is that in the past, I would spend months building such a tool, and the explanation and storytelling layer would be properly built in the meantime. Today, I put it together in a few days, and with very limited onboarding, the presentation is flawed, to say the least. Lessons learned on the run.

1 Like

Just tested it out haven’t explored all options but it looks great and fun to use

1 Like