How to make dynamic (moving) trail art

trailart
petrichor

#1

Have you ever wanted to make those cool projects where the draw a trail block is used to make animated art, but didn’t know how?
image


If you want to learn how to do this, continue reading this topic.
image

I hope you will learn how this is done. Of you don’t understand something, just ask me.
image



Let’s draw an eye which looks from side to side.




This is the code for preparation for drawing.
The first when block is only necessary when you are using an object which is visible. So anything besides a blank text Object. (A text Object you don’t give a text.) It checks to make sure self is invisible, and if it isn’t, it becomes invisible.
The second when creates clones really fast. While for this project we only need three clones (four total objects, since the original counts for total clones) you will usually be using a lot more, making this cloning method make more sense.
The way it works is every frame, every clone of the object creates a clone of itself. This means that the clones will be created really fast. So how many frames for it to create four clones?
The first frame there’s only one object doing it.
The second frame there’s the original object, and the one it created doing it.
Two times two equals four. We have all our clones in two frames.
While there is no noticeable difference if you use a repeat four create a clone block inside of when game starts, this method works much better if you need, for example, 100 clones. Which some of the more complex trail arts do need.

What do you mean when you say frame?

A frame is the amount of time it takes a single block in Hopscotch to run. For example, if we had a rule with twelve flip blocks, that rule would be over in twelve frames.



This is the second custom rule. Really, this screenshot is just to show you that you should have the same custom ability in both a when game starts rule and a when Object is cloned rule. This means that all our objects, whether we have four or four hundred, use this custom ability.



This is that custom ability. That check once if block will be explained later, right now let’s focus on what comes after it.
The same custom ability that we are working on. This means that it will run the code above it, then repeat it. It will continue to do this forever.
Now let’s move on to the check once if.



This is very important. It is what draws the background. First, the condition checks if it is the original object. Then, it draws a trail in whatever color you want the background to be with a width of 3000.
The block inside is the default go to center block.
Since this is repeating forever, it will constantly draw over the other trails.

How do you control which trails draw over each other?

Since we are using clones of an object, the code we have means that the order of the clones are also the order of the layers, from bottom to top. This means that the original object is the bottom layer, and the last clone is the top.



This is the check once if in the else field of the first one. You can actually see a bit of the code from the last screenshot at the very top of this one.
The condition checks if this object is the first clone to be made. If it is, it draws a white circle with a width of five hundred in the center of the screen.
This will become the white of the eye.

How does clone index work?

Clone index and total clones include the original object and all of its clones. For clone index specifically, this means that the original object has a clone index of one. The first clone has a clone index of two. And this continues for however many clones you have.



This is the check once if in the else of the second check if else. Once again, the previous screenshot’s code is peeking into this one.
The condition checks if it is the second clone to be made. If it is, it draws a green circle with a width of three hundred. But where?
Since we want the eye to look around, we need the x axis to change. But since this same code will run every single time, we can’t do that here.
To figure out where it should go, let’s ask a few questions.

  1. Where is the eyeball on the screen?
    The eyeball is on the center.

  2. How will we get it to move?
    We should make a variable to change the x. Let’s call it eye x offset.

Knowing that, let’s copy the block in the go to center. This is because of the answer to question 1.
Now, let’s edit the code to add our variable to the x.


This is what the code inside the iris draw a trail should be.



(I just realized I typed “do center.” I meant “go to center.”)
This is the check once if block inside of the else area of the third check once if. It checks if the object is the third clone created. If it is, it draws a black circle with a width of 125.
The location is the same as in the last screenshot. I should have put it inside of a custom ability, but I did not.


Now let’s get into the animation part.



The first rule sets the eye x offset to -80 when the game starts. Why? That will be explained in the next screenshot.



This code says that if I am the original object, I will do these two repeat blocks over and over again forever.
Now do you see why we set it to negative 80? If we repeat eighty times increasing it by two, what will it be?
It will be 80. It will have gone, in eighty frames, from the center - 80 to the center + 80. Then it will go back. Then it will start all over again.



That’s about it. Let me know if there’s anything you didn’t understand, and I’ll help you.



image


#2

holy heck this post is as long as a novel

i’ll read it later


#3

This is another great tutorial!
I’m going to try that out for Aariv’s contest!


#4

Great tutorial! You seem to made an entire essay, so I’ll reward you!


#5

Reward is below!

The man’s reward!

image 10eb6b9a1725f00a98d0e36f1889764108ce525e_1_666x500 image

image image image image

You are a blessing to all the tutorial gods!


#6

Petrichor :clap: :clap:
What a nice tutorial!


#7

This is a really good tutorial and topic! I consider myself pretty good at trail art, but I had no idea how to make dynamic trail art, so I will try to do that using this topic.


#8

what even was that first one


#9

A dancing stick figure woman…


#10

It came from hopscotch… I flipping swear…


#11

really

and that’s a reward


#12

Nice tutorial Zane.
I’ll try that out


#13

Update:
The Hopscotch team seems to be testing a new block, which can create a lot of clones in a single frame. I have used that in this project:


It seems like it still works.
It is the current create a clone block, but with a parameter.

tagging people who may be interested

@decodeco
@SarcasticTvHead
@William04GamerA
@CreationsOfaNoob


#14

It seems cool, but I’m not actually not that interested… it looks SUPER COOL, but I’m not sure if this is for me…


#15

That clone block sounds interesting! My brother will love that.
Also, I’ll join the “people who may be interested” tag list, if that’s possible.


#16

I might sneak that into one of my projects with some JSON
That’s pretty cool


#17

There’s also a (buggy) Delete clone block.

If you can figure out the HSBlockType WaitTilTimestamo (ID thingy is 19) let me know. It seems interesting and is relatively new.


#18

I can see this being really helpful, thx for tagging me


#19

Is it the same block but with a parameter or a whole new block class?


#20

That would be either global timestamp or since the project was started. The first would be very useful; you could make actual clocks, deadlines, date Easter eggs and much more.

I take it that “ID thingy” is the “type” parameter of a block in the json?


I noticed that your project using the delete clone block has a lot of eventParameters, is it an old project? This used to be because of a bug THT fixed over a year ago.


After experimenting with the block a bit, nothing happened. It’s a blank block with a parameter that gets skipped when the code runs. But if you the in a timestamp like this: 20180203073000, the code doesn’t execute past that block. Did you find any evidence of a “timestamp” attribute for the iPad?