turnage / valora

painting by functions
https://paytonturnage.gitbook.io/valora/
MIT License
702 stars 30 forks source link

Stroke join(?) changes based on angle, maybe? #50

Closed mrd0ll4r closed 4 years ago

mrd0ll4r commented 4 years ago

Hey, super cool project! I'm coming from Processing and wanted to try this out since I've mostly switched to Rust for everyday stuff.

I wrote a tiny program that draws a few bezier curves and displaces the control points. I noticed that the stroke join at the tip of the resulting triangle changes between MITER and BEVEL (that's what processing calls them, sorry, only way I know to describe it).

This is the code I'm using, I'll also try to attach a few images to show what I mean:

            canvas.set_color(LinSrgb::new(1., 1., 1.));
            canvas.paint(Filled(ctx.world));

            let fbm = Fbm::new().set_seed(world.seed as u32);

            let left_bottom = P2::new(150., 200.);
            let right_bottom = P2::new(350., 200.);
            let usual_top_point = P2::new(world.width / 2., world.height * 3. / 4.);
            let displaced_top_point = usual_top_point.clone().translate(V2::new(
                fbm.noise(P2::new(1., ctx.time.as_secs_f32() * 0.1)) * 200.,
                fbm.noise(P2::new(2., ctx.time.as_secs_f32() * 0.1)) * 200.,
            ));
            let left_middle_point = left_bottom.lerp(usual_top_point,0.2).translate(V2::new(20.,0.));
            let left_c0 = left_bottom.clone().translate(V2::new(0.,10.));
            let right_middle_point = right_bottom.lerp(usual_top_point,0.2).translate(V2::new(-20.,0.));
            let right_c0 = right_bottom.clone().translate(V2::new(0.,10.));

            canvas.move_to(left_bottom);
            canvas.cubic_to(left_c0, left_middle_point, displaced_top_point);
            canvas.cubic_to(right_middle_point,right_c0,right_bottom );
            canvas.set_stroke_width(5.);
            canvas.set_color(LinSrgb::new(0.8, 0., 0.));
            canvas.stroke();

EDIT: I'm running this on Windows with an NVIDIA GPU, if that helps. Happy to provide more info or try out stuff!

mrd0ll4r commented 4 years ago

Figured it out, here are two adjacent frames:

0_127 0_128

turnage commented 4 years ago

LineJoin is always Miter. What you're seeing an artifact of the line thickness. This is an animation of your frame 0 increasing in thickness.

lyon chose to do this for compatibility with SVG.

I've changed the line join to MiterClip, but it still reverts to bevel. I filed a lyon issue. We'll see if the issue is there, here, or some unique attribute of this path.

turnage commented 4 years ago

The MiterClip change is in the new version on crates.io and lyon has published a fix as well. Thank you for reporting the issue!

mrd0ll4r commented 4 years ago

Thanks! :)