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.


  • Tech Staff


    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)

  • Tech Staff


    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,


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

  • Beta Platinum


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


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