Drawing circles, curves and waves

arnauddw

Dear all,

I'm new to Isadora, but quickly finding my way thanks to the great tutorials.

For an upcoming project I want to do something that's mathematically very straightforward but seems to be difficult to realize in Isadora: drawing circles, curves and waves (like the example in the attached gif). I would like to draw it directly in Isadora because I need to control the frequency, amplitude, etc.

I found a post by Ryan Webber showing (off) his JavaScript live drawn clock component and collision detection tests.(http://dusxproductions.com/blo...) but I couldn't find how the actually drawing in Isadora is done. I tried the new Live Drawing actor but the drawback is it takes time to draw... Can somebody help me out?

Thank you.

Arnaud.

Woland

@arnauddw

I suggest that you check out this forum post:

https://community.troikatronix...

You might also want to try searching the forum for the keywords "circle" and the like.

Best wishes and welcome to the community :)

Woland (Lucas Wilson-Spiro)

arnauddw

@Woland I saw that post too and understand how it works, but I want to do something more complex.

(for some reason I'm unable to upload the gif as file or image)

Woland

@arnauddw

Maybe try uploading the gif to Google Drive or Dropbox and getting a sharable link? I'm curious to see what you'd like to do. It's always fun to see what people are tackling with Isadora.

Best wishes,

Woland

LPmode

The shapes actor is straight forward, but try looking at particle generator as well.

arnauddw

Here's my example: http://www.arnauddewolf.com/files/isa1.gif It's a starting point, if I'm able to draw this, I can make it more complex. The fact the shape (and/or movement) is mathematically easy to define, made me think JS is the easiest.

But what's the best way it draw it? As I said I was able to use Live Drawing, but I want to draw the shape as fast as possible, in once. Does anyone has an example?

Is there another non-JS way to draw a similar shape?

Thank you.

GertjanB

Hi,

Maybe GLSL shaders would be your best option.

Somehting like this but with your math function

This is the basic code:

void mainImage( out vec4 fragColor, in vec2 fragCoord )

{

vec2 uv = (2. * fragCoord.xy - iResolution.xy) / iResolution.y,

center = vec2(0);

float radius = 0.75 + 0.04 * sin(10.0),

thickness = 0.09 + 0.05 * cos(10.0),

dist = distance(uv, center);

fragColor = vec4(smoothstep(thickness/2., 0., abs(dist-radius)));

}

The interesting thing is that you can add inputs and change the shape live. What I like to use to let one GLSL shader do multiple things is have an input for example "Mode".

And than a lot of IF() statements.
If (mode =>0 &&mode < 1){ do shape one}
else if (mode =>1 && mode <2){do shape two}.....

Groeten
Gertjan

arnauddw

@GertjanB

Thank you! This looks very promising.... I have to learn GLSL :)

jhoepffner

Hi, I completely agree with Gertjan and I recommend the reading of "Book of shaders" (http://www.bookofshaders.com)

You are a very good explanation for how it works. Here is the page for circle

https://thebookofshaders.com/07/

You just have to replace u_resolution with resolution, u_mouse with mouse and u_time with time and it works in Isadora.

I am preparing a patch with all the book sample in Isadora, I will post it when ready.