Ultra Smooth Drawing in Hopscotch


#1

Today, while experimenting, I developed a method which allows you to draw super smooth lines :smiley:. This is basically an improved version of a project by @CreationsOfaNoob from several months ago.

This technique is free to use :smiley:

You can find the drawing pad here:


…and the original project here:

…and the original colored version here:

In the project, you will see that any drawn lines are extremely smooth, with no visible cuts or anything. Lines also change size depending on how fast you are moving your finger, and this is also smooth.

In order to accomplish this, I am actually drawing several trails every frame, which form a curve (more specifically, a Bézier curve). I’ve done this in such a way that the curves combine seamlessly into one long trail.

A more technical breakdown:

First of all, I have a touch tracker. This object keeps track of when the user is pressing the screen, as well as figuring how how fast the user is moving their finger.

Then, there are the 4 “Touch followers”. The first touch follows the current touch, but a bit of smoothing is applied, for a smoother curve. The second touch follower follows the first one such that it is where the first touch follower was, exactly one frame before. The 3rd touch follower follows the second in the same way, and the same is true with the 4th.

Then, there are the control points. They serve as the control points for the drawing object, which draws the Bézier curve. They are positioned in such a way that the curve is smooth, and has no sudden turns.

Finally, we have the drawing object. It creates several clones (the amount can be changed), and each one draws a section of each Bézier curve. They draw a new curve every frame, using some neat tricks.

If you want to see the code behind this, feel free to look at the project.


#2

That’s actually really cool! And, I’m also a big fan of you


#3

Oh cool!


#4

Also if anyone is wondering, this could be implemented into a drawing pad (assuming you can get it working).


#5

This is awesome!


#6

I really like this type of stuff on HS, People that are founding new things and taking the code to another level!!!


#7

Very cool m8


#8

It’s soooooo smmooooootttthhhh


#9

woah thank you!

(Just so you know you have always been my all time favourite coder!)

edit: @Valgo JUST LIKED MY POST AHHHHHHH

(sorry)


#10

It’s amazingly smooth… I wonder if it would be possible to do it with one object. Do you think it would @Valgo?


#11

Safari’s being slow right now, but I’ll just assume that it’s one of those typical times where Valgo finally posts something, and it changes the way we code.


#12

yes for sure!


#13

it’s so smooth, woah

yes this changes everything


#14

You’re back! Yay!


#15

I’m pretty sure this wouldn’t be possible with one object, or at least it would be difficult to pull off. The touch trackers all rely on accessing each other’s positions to work, and that isn’t easy to do with clones


#16

NEW colored version


#17

I’m bookmarking these!


#18

@Valgo The transition from small light green to large dark green is extremely noticeable.


#19

Super cool!

I’m glad you are back (hopefully for a while)


#20

This will happen if you stop moving your finger. The color change is based on speed, not distance :slight_smile: