Unit 3: animation

CS Discoveries
1

Can you animate text or just sprites? I have a student that wants to make text move across the screen. We are unsure on how to do that.

1 Like
2

Create a variable for the x position of the text such as:

var textStart = -200 (off the screen)

Then, when you place the text, place it inside the draw loop using the variable you created as the x position and then increment the variable… the code below would cause it to scroll left to right across the screen.

textSize(20);
text(“Once there was a fisherman …”, textStart, 375);
textStart=textStart+3;

6 Likes
3

Here’s a working program … this one starts on the right side and scrolls left for better readability…

7 Likes
4

thanks! Much appreciated. :slight_smile:

5

Thankyou for this code… one more question , how can we stop and start this scrolling line using space bar?

1 Like
6

Thank you for the scrolling code. Is it possible to make text move up the x with an if statement?

Something like:
var text = 500
if (keyDown(“up”)) {
fill(“white”);
textSize(20);
text(“Hello”, text, 375);
text=text-2
}

I know something is seriously wrong with this. LOL But in my mind, it should work. :rofl:
Melodi

7

@melodi_kunn, Yes, to get it to move up, you just move the variable to the y position instead of the x position because for it to move vertically, the y position changes while the x position stays the same.

Mike

8

@rich.bhasin,

Sorry … didn’t see this in the summer … I would suggest creating a variable at the beginning and set it equal to -1 (such as var moving = -1). Then, you would have a conditional statement in the code that says “if moving == 1 … start the scrolling.” Then, have another conditional statement that says “if spacebar pressed, moving = moving * -1”

So, the game starts with moving equal to -1, so nothing happens. As soon as the spacebar is pressed, moving changes to 1 (-1*-1) and it starts moving. The next time the spacebar is pressed, moving becomes -1 and it doesn’t move again.

I haven’t tried this, but that’s my thought on how you could create a toggle switch to start and stop the motion.

Mike

9

:woman_facepalming: That was a tired typo. Sorry!
I actually got it to move once I changed the word text to textmove. It seemed confused by text.
Thank you for always answering!! I really appreciate it.
Melodi

var textmove = 500;

function draw() {
// Draw Background
background(“navy”);
if (keyDown(“left”)) {
fill(“white”);
textSize(20);
text(“Hello”, 150, textmove);
textmove=textmove-2;
}

1 Like
10

Yes, text is a reserved word as it is used for a function to create text.

Mike