• Isadora
  • Get it
  • Forum
  • Help
  • ADD-ONS
  • Newsletter
  • Impressum
  • Dsgvo
  • Impressum
Forum

Navigation

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Popular
    • Tags

    Drawing circles, curves and waves

    How To... ?
    5
    9
    2541
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • A
      arnauddw last edited by

      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 1 Reply Last reply Reply Quote 0
      • Woland
        Woland Tech Staff @arnauddw last edited by 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)

        TroikaTronix Technical Support
        New Support Ticket Link: https://support.troikatronix.com/support/tickets/new
        TroikaTronix Support Policy: https://support.troikatronix.com/support/solutions/articles/13000064762
        TroikaTronix Add-Ons Page: https://troikatronix.com/add-ons/

        | Isadora 2.6.1 + 3 | Mac Pro (Late 2013), macOS 10.14.6, 3.5GHz 6-core, 1TB SSD, 64GB RAM, Dual AMD FirePro D700s | Macbook Pro (Retina, 15", Mid 2015), macOS 10.11.4, 2.8GHz Intel Core i7, 16GB RAM, Intel Iris Pro 1536 MB |

        1 Reply Last reply Reply Quote 0
        • A
          arnauddw last edited by

          @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 1 Reply Last reply Reply Quote 0
          • Woland
            Woland Tech Staff @arnauddw last edited by

            @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

            TroikaTronix Technical Support
            New Support Ticket Link: https://support.troikatronix.com/support/tickets/new
            TroikaTronix Support Policy: https://support.troikatronix.com/support/solutions/articles/13000064762
            TroikaTronix Add-Ons Page: https://troikatronix.com/add-ons/

            | Isadora 2.6.1 + 3 | Mac Pro (Late 2013), macOS 10.14.6, 3.5GHz 6-core, 1TB SSD, 64GB RAM, Dual AMD FirePro D700s | Macbook Pro (Retina, 15", Mid 2015), macOS 10.11.4, 2.8GHz Intel Core i7, 16GB RAM, Intel Iris Pro 1536 MB |

            1 Reply Last reply Reply Quote 0
            • LPmode
              LPmode Beta Silver last edited by

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

              M1 Max 32GB + ThinkPad P72 64GB Quadro P5200 W10. liviu.stoptime.live

              1 Reply Last reply Reply Quote 0
              • A
                arnauddw last edited by

                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.

                1 Reply Last reply Reply Quote 0
                • GertjanB
                  GertjanB Beta Platinum last edited by 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

                  www.gertjanbiasino.be

                  A jhoepffner 2 Replies Last reply Reply Quote 2
                  • A
                    arnauddw @GertjanB last edited by

                    @GertjanB

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

                    1 Reply Last reply Reply Quote 0
                    • jhoepffner
                      jhoepffner @GertjanB last edited by

                      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.

                      Jacques Hoepffner http://hoepffner.info
                      GigaByte 550b / Ryzen 7 3800X / Ram 64 Go / RTX 3090 24 Go / SSD 2 To / raid0 32 To
                      MBP 13' i5 2.6 Ghz 16 Go / Intel Iris / macOs 10.11.6 / izzy 2.6.1 + 3.0.3b2
                      MBP 15' i7 2.6 Ghz 16 Go / GTX 650M 1Go/ MacOs10.13.3 / Izzy 2.6.1
                      MSI GS65 i7 3.6 Ghz 32 Go / GTX 1070 8 Go / Windows 10 / Izzy 3.0.3b2

                      1 Reply Last reply Reply Quote 4
                      • First post
                        Last post