"Drawing - Paths" menu

Questions about GP commands and how to do things

Moderator: MSandro

Post Reply
bkgray
Posts: 12
Joined: Jul 31st, '17, 00:24

"Drawing - Paths" menu

Post by bkgray » Nov 2nd, '17, 16:59

In developer mode, there is a category of blocks named Drawing - Paths.

I haven't been able to figure out what these blocks do, and I can't find any documentation or examples that use these blocks. Where should I be looking?

JohnM
Posts: 379
Joined: Sep 11th, '15, 14:42

Re: "Drawing - Paths" menu

Post by JohnM » Nov 3rd, '17, 16:36

Those blocks support vector graphics, built on the idea of a path that can be stroked with a pen to create an outline, filled with a solid color, or both. The blocks are a bit tricky to figure out because you need to build a path, then run the stroke or fill commands (or both) before you see anything happen. However, you can make all sorts of interesting shapes and the vector graphics engine does a nice job of smoothing the edges to make the result look nice.

There is a tiny example in remix 3 of the "Make an Animation | Eyes" starter project that may help you get started.

If I get a chance, I'll make some more examples and post them here.

bkgray
Posts: 12
Joined: Jul 31st, '17, 00:24

Re: "Drawing - Paths" menu

Post by bkgray » Nov 3rd, '17, 18:49

Thanks for the info. The part I was missing is that the stroke and fill have to come after describing the path.

The example in Make an Animation | Eyes was enough to get me started. The curve path's control point will be confusing to many students. I found this interactive animation ( http://bl.ocks.org/BikeshC/9f5cea32f2e861feacf5 )that will help them understand how the control point influences the curve.

JohnM
Posts: 379
Joined: Sep 11th, '15, 14:42

Re: "Drawing - Paths" menu

Post by JohnM » Nov 5th, '17, 14:26

Thanks for the animated Bezier curve!

One of the things that makes these blocks harder to "discover" than most of GP's other blocks is that you need several blocks to draw a shape:

begin path
... commands to make a path ...
stroke, fill, or both

Note that the order of stroke and fill matters, because the border overlaps with the fill. Use fill followed by stroke if you want the stroke to be full width; the opposite order causes the fill to cut off part of the stroke so if you wanted a border width of 10 you might only get 5.

I agree, control points are confusing, and not easy to use even for people who understand them.

The GP path blocks have a couple of ways to add curvature without using control points directly:
Screen Shot 2017-11-05 at 9.25.28 AM.png
The first of these is easiest to understand -- the optional radius argument make the path turn by following a circular path with the given radius. For example, you can turn 90 degrees with a radius of 10 to make a rounded corner when drawing a rectangle.

The second command with non-zero curvature draws a line that "bulges" in the middle. Adding a bit of curvature when drawing a polygon creates more interesting shapes. This effect is probably more useful for art than for drawing compound curves because you typically don't get smooth transitions between curved line segments.

To make a smooth curve that changes direction multiple times, you need to create a "spline" using the block with control points. Writing the code for that requires some math (e.g. reflecting control points through the end points) but should be within the range of a motivated high school senior.

bkgray
Posts: 12
Joined: Jul 31st, '17, 00:24

Re: "Drawing - Paths" menu

Post by bkgray » Nov 5th, '17, 17:12

Thanks. Those details on the "turn path/radius" and "extend path/curvature" are helpful.

I had not noticed the different appearances when changing the order of stroke and fill. I'll include that in what I tell my students.

Post Reply