bezier curves - canvas drawing take notice

Discuss problems and solutions.
Softcore
Regular
Posts: 1613
Joined: 04 Nov 2012 08:34

bezier curves - canvas drawing take notice

Post by Softcore »

Im pulling my hair out.....why isnt the fill working in the first canvas?
Attachments
LemurLogo2.jzml
(1.98 KiB) Downloaded 148 times
Last edited by Softcore on 19 Mar 2014 19:11, edited 2 times in total.
Phil999
Regular
Posts: 919
Joined: 11 Jan 2012 01:53

Re: berzier curves - another bug or?

Post by Phil999 »

just wanted to say this stroke Canvas object is genius. Simply beautiful.

About the canvas_fill(). Hmm, I don't know of course, my guess is that there needs to be some other code first. And it may be (talking as a complete ignorant here) that it's not even possible to fill this complex stroke/line/bezier curve. But I'm surely wrong, because I don't understand the Canvas object and coding in general. I will depend very much on your contributions and steal the parts I can manage.

Edit: it may be that the fill works only with canvas_lineTo(). canvas_bezierCurveTo() can be used with stroke thickness, and variables for changing the curve.
Formant+Eurorack, PPG wave 2.2, Korg MS-20, etc., EWI 4000s, QuNeo, etc., Mixbus32c, u-he, MadronaLabs, Samplemodeling, NI, etc., iPad2/4/Pro
Softcore
Regular
Posts: 1613
Joined: 04 Nov 2012 08:34

Re: berzier curves - another bug or?

Post by Softcore »

Im not a programmer either...Im just doing my general procedure of learning stuff....reeading and applying! lol

Stumbling across many of obstacles in the way though!
Phil999
Regular
Posts: 919
Joined: 11 Jan 2012 01:53

Re: berzier curves - another bug or?

Post by Phil999 »

scratching my beard myself. But from what I've gathered, from the examples, there's rectangles and circles that can be filled. A complex spline can be filled with size and thickness. Haven't tried it out myself, and I repeat, it's only a guess from an ignorant.

But I want to repeat, this Lemur logo is brilliant. Well done, to say the least.
Last edited by Phil999 on 18 Mar 2014 20:37, edited 1 time in total.
Formant+Eurorack, PPG wave 2.2, Korg MS-20, etc., EWI 4000s, QuNeo, etc., Mixbus32c, u-he, MadronaLabs, Samplemodeling, NI, etc., iPad2/4/Pro
Softcore
Regular
Posts: 1613
Joined: 04 Nov 2012 08:34

Re: berzier curves - another bug or?

Post by Softcore »

This might be the case, as you say...but then.....why do we want the curves after all????

pfffffffff.....

http://www.html5canvastutorials.com/tut ... hape-fill/
Phil999
Regular
Posts: 919
Joined: 11 Jan 2012 01:53

Re: berzier curves - another bug or?

Post by Phil999 »

I see. Haven't looked at or known html5 examples in my life.

Hmm, I think it's only rectangles and lines that can use canvas_fill(). Circles can be "filled" with the canvas_createRadialGradient() command. Lots of options though. We just need to learn the specific new Lemur commands which appear to be a bit different to html5.
Formant+Eurorack, PPG wave 2.2, Korg MS-20, etc., EWI 4000s, QuNeo, etc., Mixbus32c, u-he, MadronaLabs, Samplemodeling, NI, etc., iPad2/4/Pro
Macciza
Regular
Posts: 1315
Joined: 07 Dec 2011 04:57
Location: Sydney, Australia.

Re: berzier curves - another bug or?

Post by Macciza »

Hi
Yeah I did a logo a few days ago and hit the same issue . . .
Some standard canvas features are not fully implemented but are being worked on for next release.
Fill of curves is one of them , the only fill in certain ways currently ...
There are a few others and we simply have to deal with it until the updates come through

Most of the stuff seems to have pretty direct correlation to html5 code
I have converted a number of canvas tutorials to Lemur ...

Will have to compare our logos, but have net issues at home currently
MM
iMac 2.8G i7 12G 10.6.8/10.7.2, Legacy Dexter/Lemur, Liine Lemur/iPad2, KMI SoftStep, 12Step & QuNeo , B-Controls, Mackie C4 etc
MaxMSP, Live Suite, Native Instrument stuff, etc Modified Virtual Guitar System etc All Projects/Modules © CC-BY-NC-SA[*][/b]
Softcore
Regular
Posts: 1613
Joined: 04 Nov 2012 08:34

Re: berzier curves - canvas drawing take notice

Post by Softcore »

Ok an update on this....Im starting to grasp the whole logic of canvas drawing so I thought of posting here in case others dont get it at first.....

First of all...consider the basics..... lets draw a "square" by using these lines and coordinates
canvas_moveTo(c,100,100);
canvas_lineTo(c,200,100);
canvas_lineTo(c,200,200);
canvas_lineTo(c,100,200);

and lets say we instruct then our Canvas to fill the square.....BUT WAIT....no...its not a square...as far as canvas is concerned...its just a path......So fill what?

the square? ORRRRR the outside space of the square?

Yes, you human, immediately say, wll what are you blind...thats a square over there I see it! yes thank you, I do too.....but its a PATH....
So, canvas doesnt really know WHAT to fill, unless there is a reference on what is the "outside" and what is the "inside" of a close path.

So....
Without further comments

THIS is a square
canvas_moveTo(c,100,100);
canvas_lineTo(c,200,100);
canvas_lineTo(c,200,200);
canvas_lineTo(c,100,200);

and THIS is the same square, visually it is EXACTLY the same, and in the same position - the ONLY difference is that I chose to start the path from bottom-right corner, instead of top-left
canvas_moveTo(c,200,200);
canvas_lineTo(c,200,100);
canvas_lineTo(c,100,100);
canvas_lineTo(c,100,200);

The FIRST aquare CAN be filled...the second....NOT.

Here are the examples
square-clockwise.jzml
(1.04 KiB) Downloaded 137 times
square-ccw.jzml
(1.04 KiB) Downloaded 133 times
Softcore
Regular
Posts: 1613
Joined: 04 Nov 2012 08:34

Re: berzier curves - canvas drawing take notice

Post by Softcore »

Now it becomes clear, that the software, assumes whats "right" and "down" from our initial point of path as the future "internal" or "fillable" area....so if we draw from that point up and left....the "fillable" area is not the shape we've drawn anymore....but the outside of it, and it cant fill it.

SO, I thought the same applies to berzier curves....and when I started my shape with berzier curves I made sure I was doing it the "correct" way, i.e. start with its top-left corner and go clockwise.....though the resulting shape was STILL not filling.

After trial and error, it appears to me...that in the case of berzier curves (and arcs for that matter)...an ADDED logic is applied besides the "clockwise" logic which is still applied.... The "inward" area of the shape to be drawn is defined by the x1,y1, x2, y2 reference points. At first I thought these were just "handles" to provide an easy means to ANY curvature....Its not like so though when you plan to fill a shape. If you do, the "fillable" area will always be the one that the x1,y1,x2,y2 points define as a shape with convex NOT concave.
Notice that this means, that both these 2 points have to define one and only one "side" else the Fill will not occur - long story short, you CAN NOT make a "wave" shaped side of a path you plan to fill, and hope that it will be filled. You cvannot even make a "concave" shape and hope to fill the shape.

Here are the examples....NOtice on the third canvas....that even though Im moving clockwise...STILL the shape is not filled
berzier-examples.jzml
(2.5 KiB) Downloaded 125 times
Last edited by Softcore on 19 Mar 2014 18:39, edited 2 times in total.
Softcore
Regular
Posts: 1613
Joined: 04 Nov 2012 08:34

Re: berzier curves - canvas drawing take notice

Post by Softcore »

Finally I keep wondering...is this how the html canvas works too? If so, why the hell not ONE bloody document from the douzins I 've read so far do not explain the concept? I understand the Liine team cannot re-invent the wheel and re-post documentation for canvas since its already out there.....but.....I've spend 6 days, to understand stuff that can be easily described in two forum posts....I may have the will to learn and UNDERSTAND bu dont take this for granted for all users...

A reference of all these slight details that can make us pull our hair out should be the first thing to take care before releasing such, great nevertheless, updates.

;)
Post Reply