Animation

[TheBoyWhoTried]

Okay I've been struggling for the past two weeks to learn how to animate. I haven't found anything to help me. I've asked so many different things so many times and have gotten answers that kinda beat around the bush. i'm kinda losing my patience here because i just really need help. So here it is, I have no idea whatsoever how to animate and I need help. I need to be taught how to animate in general and not that messy 'making the image the same colour as background" stuff to make it seem like it's being animated. Someone please teach me how to animate. Start from the most basic stuff. Give me a crash course. Please, I so desperately need help. Teach me how to animate in Turing.

[TokenHerbz]

Your questions are always generic.

To animate is essentially displaying one frame at a time of what you want to visually see. It could be anything where the pictures on the screen change. Again your updating this, one frame at a time.

You were given multiple sources of information to accomplish this, any maybe if you posted some code or something to show us which parts or issues you are having then we could assist further.

We don't know many things, are you using pictures? sprites? are you using just basic gui shapes.

Are you having problems updating the frames? what is your goal of the animation your trying to accomplish?

The steps are:
1) create your frame (the point of which you want displayed)
2) update to display it

I made this example, with comments, is this what your looking for? The same concept applies for most things.

code:

View.Set ("offscreenonly") %%we should use this for graphical because                                 %%it prevents the RUN Window from being UPDATE                                 %% until the View.Update is called. var ballvx : int := 2 %%ball x velocity                                var ballx : int := 50 %%ball x location var ballsize : int := 20                                 loop     cls %%i like to clear the screen before creating a frame to show         %%lets build a frame         %%I'll start with some background that changes colors depending on     %%where the ball is, which will be moved automatically back and fourth         if ballx + ballsize >= round(maxx/2) then         Draw.FillBox(0,0,round(maxx / 2), maxy, yellow)         Draw.FillBox(round(maxx / 2), 0, maxx, maxy, blue)     else         Draw.FillBox(0,0,round(maxx / 2), maxy, blue)         Draw.FillBox(round(maxx / 2), 0, maxx, maxy, yellow)     end if     %%move the ball     ballx += ballvx         %%rough boundries to handle ball     if ballx + ballsize >= maxx or ballx <= 0 then         ballvx *= -1     end if         %%Here we draw a ball, to show "animate" - we draw this after the background because we layer, background to forground     Draw.FillOval(ballx,round(maxy/2),ballsize,ballsize,red)         %%Now that we have our "frame" we want to display, we update to show it     View.Update()  %%AFTER FRAME WE WANT TO SHOW IS READY, UPDATE     Time.Delay(5)  %%or delay() works end loop

[TheBoyWhoTried]

Alright, okay, I'm sorry for being such an a**

I have a load of questions though.


1) You add a comment to two vars:

var ballvx : int := 2 %%ball x velocity
var ballx : int := 50 %%ball x location

a) What exactly do you mean by "x velocity and x location", you mean the horizontal axis velocity of the ball and the horizontal axis location of the ball?

b) How come y doesn't matter here (why don't we need to consider y location and y velocity)


2) In this bit here:

if ballx + ballsize >= round(maxx/2) then
Draw.FillBox(0,0,round(maxx / 2), maxy, yellow)
Draw.FillBox(round(maxx / 2), 0, maxx, maxy, blue)
else
Draw.FillBox(0,0,round(maxx / 2), maxy, blue)
Draw.FillBox(round(maxx / 2), 0, maxx, maxy, yellow)
end if

a) Why do we need to add ballx and ballsize together?

b) Also why do we need to consider ballsize here?

c) what does round do?

d) Also to me reading over this segment it sounds like the yellow should appear on the left side first and blue on right and then when the ball passes halfway it switches. Let me explain my thinking and correct me where I'm wrong. So I don't know what round does so I'm going to ignore it but basically what I think this segment says is: if the balls location and something about it's size (I don't exactly understand why we need to add ballx to ballsize and what ballsize does) is greater or equal to whatever the max x value is divided by 2 (the half point of the screen) then because 0,0 is the bottom left corner of the screen and maxx/2 is halfway through from right to left (to me i don't understand why maxy is there because logically it sounds like it should be maxy/2 so I'll ignore it for now) the yellow should appear on the left side of the screen first. (please explain to me what actually happens).


3) how does:

ballx += ballvx

a) get the ball to move?

b)Where and how is it already determined that the ball starts on the leftside of the screen? is it because ballvx is a positive integer?

c)Also what does "+=" do?


4) With this segment here:

if ballx + ballsize >= maxx or ballx <= 0 then
ballvx *= -1
end if

a) How come we don't need to add ballsize to ballx in the second part of this segment (after "or") I do have a question about the -1 part but I feel like answering the third question will help me understand really how it works so I won't ask it for now since I don't even know how to formulate that question.

b) What does "*=" do?

5) With this segment:

%%Here we draw a ball, to show "animate" - we draw this after the background because we layer, background to forground
Draw.FillOval(ballx,round(maxy/2),ballsize,ballsize,red)

a) your comment here, you mean we draw it after so it'll just show up in front right? Isn't there some way to also do that using a procedure?

b) Why do we use ballsize here? Is it just because you thought that a value you already declared was a nice fit?

c) So as a reminder for me, the first x any in a circle are the middle points and the second set are essentially the edges of a circle right?

6) With this bit:

View.Update()

a) Why do you have an empty set of brackets here?

**For my project the three things I'm trying to animate essentially is to have a character move around the screen without user imput. Also (I'm pretty sure character moving =/= applies to what I'm about to say here) but the other animated thing was essentially to have a cloud come down diagonally from the top right to the left (but not all the way to the left corner, but to about 1/4 of the screen down and to the left) and then have it move (essentially turn around) and zoom down and right but stopping at 1/2 the screen and well where it's actual location doesn't matter cause I could probably do that on my own by figuring out how to actually animate and just customizing it's coordinates. The main issue here is just how to get it to turn around and as well as get it to move diagonally. The third bit is having snow fall. Originally I just had turing plot random circles on the screen, about 500, and have them cls (everything was in a loop, colour of ovals were white) to replicate snow falling. I realize there's a better way to animate snow and actually make it look like snow so being taught that would be nice too.

**Every time i've seen an animation that shares the same premise of you know, something, anything, moving the way people do it are always different (or so it seems to me) it seems like there are so many different ways to make something move. I don't know the point of my statement here really but what do I need to know to be able to animate? Could you please run through some basic animation commands and concepts through me? What resources did you use to learn how to animate? Do you have any resources for me? There aren't really many tutorials here. I downloaded what seems to be a Turing textbook pdf but it doesn't seem to actually teach you how to get things to move it seems to only show you different conceptual things to do wit ha picture, so that's no help to me (the pdf is apparently from here, compsci: http://compsci.ca/holtsoft/IPT.pdf . Thank you for your patience and help.

**I'm sorry my questions were geenric, it's just that I literally no nothing about the animating section in GENERAL so, yea.

[TokenHerbz]

1) a) yes
b) didnt need it for my example

2) a) to get the right side of the ball
b) see 2)a)
c) round converts real numbers to int
d) its just a quick non accurate way to make the change, for accuracy you would want the left side of the ball which i left out. and factor in speed of the object to.

3) a) ballx is the location of it right, so when we "add speed" to that location it moves...
b) correct, think of a grid
c) its a short form for var = var + value

4) a) you should but i didnt
b) see 3)c)

5) a) sure you could
b) habbits i guess?
c) correct

6) because it is a procedure

-------------------------------------------------
sounds like your programs doable, stay away from sprites, just use some pictures.

I think you need to grasp the concept better, its the logic you write to make things happen. if you want a picture to move down and right from its original spot, give that picture some values so your program can change those values to get you the requirements you need.

You really should do this. Get a peice of paper and draw a graph, with the x,y lines that turing uses in its window. Now draw two circles and by looking at the graph, somewhat guess their x,y values. Now think to your self, if this was TWO frames you wanted, the first moving into the second, what variables would have to change, and if you wanted to keep going, how would you. ponder about it, play around with my example, and i think you'll grasp the idea better.

I'm really not sure how to specificly explain things, thats my downfall as an individual and the reason i would never be a teacher lmao. But as for resources : http://compsci.ca/holtsoft/doc/ is a very good source.

[TheBoyWhoTried]

okay...

well since your program is a loop or repeated movement, how could I control the movement? how would I get something to stop moving? And aren't there other methods of animating?

[TokenHerbz]

sure, and depends. you can set borders, etc if you dont want use inputs. if you can make something move, you can make something stop to.

[TheBoyWhoTried]

You essentially replied "yes" to a question that poses "how". Thanks.

[TokenHerbz]

"you can set borders, etc if you dont want use inputs."

if you want a ball to stop at the edge of the map for example, do a logic check, and then do what you want it to do.

[TokenHerbz]

Here i just mimiced your program,

notice the guy stop's on the tree after hitting it a second time while the clouds still keep going.

thats a boundry logic check, i said, hey program, when this guy hits this tree again, make him stop.

[TheBoyWhoTried]

what exactly do you mean by logic check? Also...i know this is going to be a bit of a piss off... but i still really have no idea how you got anything to move there. I think I'm judt trying to learn like half of turing in such a short time i just get so lost. If you could direct me to specific part of the Turing Walkthrough that is essential to learn how to animate. Please....I'm losing my sanity here....I broke my goddamn monitor...

[TokenHerbz]

Dude, honestly, i used one loop and "IF STATEMENTS" (logic checks) and some Draw shapes.

i don't think you understand the fundamental concept of motion.

walkSTEP = 5
postion = 10
position += walkSTEP
position = 15

going from 10 to 15 is a movement.

1) clear screen
2) create your movements
3) update screen

There is no tutorial for this, its Math.

and since i feel bad for you, source to learn from, not to steal.

code:

View.Set ("offscreenonly;title:tokenHerbz") var c : int := 37 var r : int := 20 var x, y, vx, vy: int var d: boolean := true var mx, my, ms : int var t: int := 3 mx := maxx - 20 my := 40 ms := 2 x := 0 vx := 2 y := maxy - 50 vy := -2 loop cls x +=  vx if x > maxx then x := 0 end if if d then y += vy if y <= 200 then d := false end if else y -= vy if y >= maxy - 50 then d := true end if end if mx -= ms if mx <= 200 or mx+20 >= maxx then t -= 1 if t = 0 then ms := 0 end if ms *= -1 end if Draw.FillBox(0,maxy,maxx,maxy-250,blue) Draw.FillBox(200,40,190,210,brown) Draw.FillOval(200,190,20,20,green) Draw.FillOval(180,220,25,25,green) Draw.FillOval(220,220,25,25,green)Draw.FillOval(50,maxy-50,50,50,yellow) Draw.FillBox(mx,my, mx+20, my+40,7) if ms > 0 then Draw.FillBox(mx,my+40, mx-5, my+80,7) else Draw.FillBox(mx,my+40, mx+5+20, my+80,7)end if Draw.FillBox(mx,my+40, mx+20, my+80,grey) Draw.FillOval(x, y, r, r, c) Draw.FillOval(x+20, y+20, r+5, r+5, c) Draw.FillOval(x+40, y-10, r+10, r+10, c) Draw.FillBox(0,0,maxx,40,green) View.Update() delay(10) end loop

[TheBoyWhoTried]

I never intended on stealing because that wouldn't help me learn and I want to understand how to do this. You're right in that I don't understand the motion aspect and how to apply the math to it. It just looks like to me that the if statements don't exactky interact even with the drawings. You say that there are no tutorials for animation because it's essentially math, in this case I want to bring this to my teacher and get her to help me understand this better and explain it to me (she doesn't know animation per say but if it is just math...). she is a teacher so maybe i'll be able to learn better. Thanks for the help...i appreciate it.

[TokenHerbz]

i would need to draw a picture on paper and show you in person because i struggle with how to intellectually express my thoughts.

But i'll try.

if you have one picture, shape, etc. and you start it off at 0,0 for x,y.

you then apply a motion of adding to those x,y's, say by 5 at a time (frame), then thats making it:

x = x + 5
y = y + 5

and that makes that picture, or object go in an upward right direction respectfully.

if you apply this same process 5 times, that x,y will be located at 25,25 x,y.

its the process of manipulating the objects x,y slightly each frame that gives you that "movement" motion.

you can enforce rules, and structure to those objects, boundrys, you are the boss of what that object can and cant do, or if it can or cant go off the screen or pass some other object.

those rules are logic/math. nothing more that ifs ands ors etc.

before you try to program your application, you want to think "Whats" first.

1) what do i want my object to beable to do, and not do. implement those rules.
and whichever else implys to this

ex: well if i want to keep my x,y object but for it to stop in the middle horizontal area and come back.

answer: Well where is the middle, maybe maxx/2? so lets make an if statement to handle that.

if x >= maxx/2 then %%its passed the halfway mark, we need to reverse it
reverse implemented
end if

I hope that makes it a little bit more clear?

[TokenHerbz]

and if its something like this - https://www.youtube.com/watch?v=7oZu3-PU6KA

its a whole new aspect