Troubleshooting

bezier curves - canvas drawing take notice

Started by Softcore on .

Sign in or create an account to join the conversation.

18 posts

Subject: Re: berzier curves - another bug or?
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.
Subject: Re: berzier curves - another bug or?
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.
Subject: Re: berzier curves - another bug or?
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.
Subject: Re: berzier curves - another bug or?
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
Subject: Re: berzier curves - canvas drawing take notice
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

square-ccw.jzml
Subject: Re: berzier curves - canvas drawing take notice
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
Subject: Re: berzier curves - canvas drawing take notice
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.

;)
Subject: Re: berzier curves - another bug or?
Macciza wrote: 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
I think we just have to wait a while as Macciza says. No need to pull out our hair. :)
Softcore wrote:Im pulling my hair out.....why isnt the fill working in the first canvas?
Hi guys,

I'm sorry about the hair pulling. Filling concave shapes is one of the very few things missing at this point. It should hopefully be in by version 5.1. I didn't expect people to notice so fast. Good job. ;-)

Best regards,
Nick
"Im pulling my hair out.....why isnt the fill working in the first canvas?"

Ok, I'm only on my 2nd full day of trying to suss this, but if I had any more hair it'd probably be in clumps on the floor.

But seriously, the autodidact's curse.... not knowing if your the problem, or your tools. I put your 'fill/no fill' examples in the PC Editor.... nothing, for either template.... Works on the mac editor though, (thank you, is a HUGE help) but even so... I've a strong suspicion a couple of silly little problems which I can't for the life of me fix are not due to my 'crapness'. I'll investigate a bit further though.

Tis a shame because the HTML Canvas stuff looks brilliant. Mental potential. Before now, I thought it just offered something like handheld/device web viewing compatibilty or something. :roll: Been getting into algorithmic art recently after rediscovering fractals. Stumbled on this stuff here yesterday http://rectangleworld.com/blog/archives/category/uncategorized/page/2 whilst looking for ways to use my Lemur app. Coming across all this new stuff like boids, and multiple dimensions (never really thought of colour spaces like this before, but if it can be scaled....) is giving me huge insight. The imperfect circle related stuff (or any other form of adding pseudo randomness to one or more parameters), really should be a doddle. At least when I can draw a square I might be able to do it.

Today I was trying to have a circle draw itself round my finger (on cursor down) over 1/2 bar, by having it draw like pi/24 radians or something each loop. Tried using an invisible MultiBall to get the position. Managed to get a circle at one point, but an instantly drawn one. I don't even know whether this was triggered from a hit point or MultiBall.x[0]. Couldn't get it to work afterwards. Definitely a case of trying to run before I can crawl, but still could have been much further ahead without difficulties

Still, when the teething problems are sorted, this'll provide unlimited goodness......

Thanks again!
Just revisted the Canvas Tutorials. Somehow earlier missed the 'extras' folder (and the Hit region / Sub Path file which has also cleared up a lot of things). An fractal/iteration example to study!!! Yay! The odd template messes up the editor window when loading, but is fine on the Pad, and this stuff clearly demonstrates that a lot of my problems are indeed a result of my Lemur/Canvas inadequecy.

Could really do with a working PC editor though. :( MacBook screen is pathetically small.