A new method for trail art: Trail Art Pad


#1

Hi Hops. Creating detailed, professional looking trail art is hard, right? Well, no more.

Here’s an example I made using a new method to create trail art. It’s trail art. It’s an art pad. It’s both.

The art pad is hidden when you’re done coding your art by setting the ‘Hide Editor’ variable to 1.

The ‘Jolly Roger’ was made in an earlier version of the Trail Art Pad (that only drew one line color), but this shows how it works:

The red line is not drawn, but is a dynamic line that allows you to visualize where the next line should go. The values shown at the bottom correspond to the data that would draw the curve in that position. It’s adjusted using the transparent control points.

Add the parameters to the code. And repeat. It’s that easy.


Here’s the published Trail Art Pad that includes the title as an example, has support for colors, and has full instructions:

Full Instructions

——————
Welcome to Trail Art Pad

  • This project allows you to precisely place & reposition curves until they’re just right

  • Add the curve parameters to the project

  • Repeat until your masterpiece is complete

——————
Saved Data

  • X/Y position of 3 control points
  • width
  • color

Data is saved under 5 Custom Rules in 4 different objects

  • P1 - Saved Positions
  • P2 - Saved Positions
  • P3 - Saved Positions
  • Pen - Saved Widths
  • Pen - Saved Colors

For each curve you want to be drawn, just add one set of Set Position, Set %Width, & Set Trail Color blocks to the above Custom Rules.

——————
Set Trail Color

Each Set Trail Color block must be followed by a Wait 0 block. Custom Abilities for all of the primary Hopscotch colors have been created for this purpose.

Add Set Trail Color blocks with HSB or RGB colors as desired, just don’t forget to pair each with a Wait 0 block

——————
Same Width/Color

If the desired width or color of a curve hasn’t changed from the previous curve, instead of adding the same Set %Width or Set Trail Color blocks more than once you can add the Custom Ability ‘Same Width/Color’

——————
Control Point Adjustment

After you have coded a dataset, play the project. All coded curves will be quickly drawn and the last will be highlighted by a red curve with control points (transparent dots). Drag the control points to reposition the red ‘virtual’ curve. This curve allows you visualize the next curve. And the displayed values show the data corresponding to the current position.

——————
Midpoint

The control point with the slightly blue tint is the midpoint. This controls the amount of curvature.

——————
Width Adjustment

Tap the displayed width value to change it. It will turn green to indicate it is unlocked and can be changed.

  • Tap above or below the displayed value to increase or decrease it by 1.
  • Swipe up or down to change it by 10.

Tap the value a second time to re-lock it, and it will turn black again.

——————
Tangency Controls

To create continuous, tangent curves play the project to draw the saved curves. Tap both the Lock Tangency & Next icons. They will turn green.

Press and drag the endpoint where you want the next curve to be tangent. The midpoint will be locked so it only moves in a straight line that maintains curve tangency. Tap Lock Tangency again to unlock the constraint, if desired.

——————
Background color

The background color can be set in the object Main.

——————
Hiding the Editor

While using the Editor, tap Hide Editor to hide everything except your trail art. Restart project to show the editor.


When you’re ready to publish your work of art, go into the object Main and Set ‘Hide Editor’ = 1. When set to 1 the editor will not display when played


——————
Enjoy & let me see the awesome trail art you can create!

I’d really appreciate it if you’d read the instructions (shown above & in the project), try to use the pad, and let me know if the instructions are complete and make sense.

Please let me know if you have any suggestions to make the instructions or the pad better!

Happy coding :smiley:


Nominations for Featured 2!
How do you make good trailart?
#2

Here’s a few questions:
(I’ll add more as/if I think of them)

Is this something you would use?

  • Yes
  • No

0 voters

Is it too hard to use?

  • Yes
  • No

0 voters


#3

This is awesome!


#4

Thank you.

Of course, the mute button that’s needlessly displayed in the Webplayer (but not in the Editor) obstructs the Instructions icon so it can not be used.

:rage::rage::rage:

As seen in the Editor

As seen in the Webplayer


#5

Maybe you could re-republish it with the instruction button off to the side somewhere else?
Maybe the bottom left/right hand corner would work


#6

Yes, I’ve done just that. But I should not have to. If THT wants a successful, profitable product they need to fix the bugs in their app. @Ana


The hardest (and least enjoyable) part of creating this project was the hours spent getting the instructions to work right. So I found it especially frustrating to have the button covered up…


#7

That is true.
They should fix that. Maybe in the next update?


#8

I think that this is awesome! I was curious about how you made that Trail Art mentioned above, and now I know! I will look into this method.


#9

Glad you like it. The curves are drawn using a quadratic Bézier curve w/ 100 pen clones to draw each curve in 1 frame.

The drawing pad concept could also use cubic or 4th order curves (demonstrated in this old project - changes settings to get them)


so you’d get more control of the curvature of each curve. But that would also mean more x/y positions to enter.

I figured just using quadratic curves was a good place to start.


#10

Hey! I get it. We are a tiny team, and things might not get solved as quickly, but believe me, we’re taking into account everything you say :slight_smile: