assurance-tunnel
assurance-tunnel
assurance-tunnel
assurance-tunnel

# Drawing circles, curves and waves

• 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.

• @arnauddw

I suggest that you check out this forum post:

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)

• @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)

• @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

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

• 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.

• Hi,

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);

}

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

• @GertjanB

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

• 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

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.