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.
-
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)
-
@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)
-
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,
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 -
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
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.