Learn to Code via Tutorials on Repl.it!

← Back to all posts
🐍🎞️🎬 Python Animation! 🐍🎞️🎬
JBloves27
HAHAHAAH, the emoji md works! >:)

Make your own animation - Tutorial!

🐍 A step by step tutorial on making a python animation 🐍

Made by @JBYT27

NOTE: If you haven't already, try visiting here for more info on Python

Contents:

  • About the tutorial
  • The basics
    • import's
    • The easy way or the hard way
      • Filing OR
        • ASCII ART
      • print's
        • ASCII ART
  • Starting the animation
    • Small details
      • Clearing the console
      • Colors
      • time.sleep()
  • Middle of animation
    • File opening
    • Printing
  • End animation
    • Code
  • Closing
    • A small note

1) About:

This tutorial is all about making your first or your non-first animation. Basically, this tutorial is about animating in python. [pogchamp] This was a sudden idea, so some details might be left out. [thonk]


2) The Basics:

The basics of an animation that you should remember are the following:

  • Remember to add time.sleep()'s every so often.
  • Clear the console everytime the file/print goes on.
  • If you make the animation using print's, remember to add double \'s to allow it to actually show (This will be talked about later on into the tutorial)

Remember the following, and you'll be just fine (or will you...)


2.1) The Basics/imports

The only modules you need for animation making are the following:

  • time
  • os

So far, you will have the following code:

TIP: If you press the button on the top right corner, it will automatically copy it for you!

Both code has correct syntax. However, the thing with python (and many other langs) is that you can import certain librarys from a module. Like this:

In this case, it would import the library sleep, from the module time. So any three of those would work. Let's move on now!


2.2) The Basics/The Easy way or the Hard way

There are multiple ways to actually code animations. But in this tutorial, we'll talk about 2 ways:

  • File animations
  • Print animations

So let me start with the file animation.


2.21) The Basics/The Easy way or the Hard way/Filing

So the way filing animation works is that it uses files. Say you wanted to name a file poggers. Then just click the file button:

However, to store it evenly and organized, click the folder button:

So far, you should have a folder and a file (which it is in the folder) The folder and file should also be named; I would suggest:

  • frames (for the folder)
  • frame1 (file)

NOTE: You'll always have one folder, unless your animation has a series of animations looped together(we're not talking about that this tutorial)

Decide on what kind of animation you're going to make. I suggest making something easy, as it takes pretty long to code the ASCII ART. (This animation you're making in the file is ASCII ART. Click here) Some common examples you might want to try are:

  • Snow (using *)
  • Rain (using |)
  • Bullets (Using -)
  • etc.

I'll choose an example from there and lets say I choose 'Snow'. So then, I would make a test file.

NOTE: So far you should have 2 files and one folder

So there are 2 ways you can make the file, since you made the folder.

  1. Click the file button and then name it Test or anything. Then drag the file onto the folder.
  2. Click the folder button and then click the file button. Name it Test or whatever.

Either way works!


So far, we've kinda done the basics, making the file and folder. Now, we do the ASCII code. I can't really explain much about it because this is about your creativity. However, I'll try to explain my best.


2.211) The Basics/The Easy way or the Hard way/Filing/ASCII ART

I can't explain much about this part of the tutorial. This is really up to your thinking and creativity. I did say I would try my best though, so lets get right into it. [poggers]

So think about your animation plan for a sec. What kind of ASCII character are you going to use?* What will be the scene? Will there be characters? ...

*Keyboard buttons

Think about those questions and answer them (in your mind, not to me ;)). If you can, your animation is probably possible! If not, try again to think a new idea. This was, however not really talking about ASCII art. So I'll show you a few examples and go on ot the next subject.


NOTE: Remember, these were made in a regular file, not a .py file.

Snow:

NOTE: I have not included ALL the files, only some of them. You will have to create the other files.

Rain:

Note: Some of these animations you can also do in python. However, I will talk about this in the next subject.

And that's it! (kinda) Let's move on to the next one!


2.22) The Basics/The Easy way or the Hard way/print's

So. That is a lot. lol. Anyway, if any of you guys are stuck, please notify me in the comments!

This time, we're gonna focus on making an animation in main.py (in python). Like in the header above, the whole animation is gonna be printing ON AND ON. Which will be annoying. But who cares?!? [haha.]

Let me talk about the basics of printing animations. You know every one of those files that you usually make in the files? Everytime you print something, it's one file. It sounds ok, and you're laying back relaxing in the sun, drinking beer, right? Well, its not. It's literally torture Ok, sry for the strike-through's, but I had to add some humor. I think. [thonk]

I'll talk about the torture for a sec. Do you remember when I said that when you dont do 2 \'s, it creates some kind of blob? Yeah, that's the torture. If you don't do it, the indentation becomes a mess and becomes hard to deal with. Really.

I know i'm blabing on and on, but I have a point (kinda). I'm telling you guys to use the Filing animation. The indentation, symbols, everything is easier to deal with. However, as I made this tutorial, I'll tell you guys how to do it.


2.221) The Basics/The Easy way or the Hard way/print's/ASCII ART

NOTE: If you haven't already looked at the header '2.211) The Basics/The Easy way or the Hard way/Filing/ASCII ART', you might as well do so.

The ASCII art for the print will be relatively similar to the Filing ASCII art. The only big difference is that in print*'s, there are some indentation rules to follow.

*I know i'm saying this over and over, but what else can I say?
  • When you put \, put 2 of them. Like this for ex.

Output:

This is the problem. If you don't add the extra \'s, you'll end up with a problem. I'm just reminding you to add the double \. [yep]

Just follow that rule and you'll be ok!

^Yep, I said rules before, but its rule now. [yep]

3) Starting the Animation

To start the animation, first create your files/print's and finish the animation. By means, create all your files/print's in order to make the animation. When you're done with that, you'll be up to here. If not, keep working until you're done. Just remember, practice makes perfect!

Once you finished the part above, go to the main.py (otherwise another python file). If you look at the code, it will have this so far:

You might have something similar to this, that's ok. As long as it's following these guidelines, you'll be fine.

Now we need to make the real part, the animating. As I said before though, we need screen clearing and time sleeping. To do that, we need small details and functions... [wha?]


3.1) Starting the Animation/Small Details

What are these small details? Well, this could mean;

  • Colors
  • Functions
  • Sleeping
  • etc.

This pretty much covers all what we need. As we've listed it, lets get coding!


3.11) Starting the Animation/Small Details/Clearing the Console

NOTE:We use the os module to cover this section.

So one of the most common things I do and most other python coders do is import the os module. We(py coders) usually use it for clearing the console. The syntax is: os.system('clear'). However, because writing it may be painful [lazy], we make it a function! We do this:

NOTE: Just to make sure, you can call the function whatever you want. ;)

Because that this is a function, it can be called any amount of times. Now that we're done with that, lets move on!


3.12) Starting the Animation/Small Details/Colors

There isn't much to include in this section, I will just attach a copy and paste of the colors. You can either paste this into the main.py or a different .py file. Here it is:

The capatilzed colors are darker, while the lowercase are a bit lighter. The back is a thing that will be behind the text. The bright is as it is said, bright colors. Also, the rest that I haven't mentioned are other editing things. For example, underline underlines and reset resets everything. And we're done with this section!


3.13) Starting the Animation/Small Details/time.sleep()

NOTE: In this topic I will be talking about how to use this function.

So the time.sleep() is very important in animations. It makes the animation actually rest, instead of going at the speed of light and you not being able to see. You have to put it in between file openings and before printing another 'file'. I will talk more about this in later sections.


4) Middle of animation

The middle of the animation is the main code. This is where we will talk about opening up the files and printing your 'files'. So lets go to opening up files!


4.1) Middle of animation/File opening

Opening up your file is how the animation 'animates'. It is the following syntax:

Do that, replace Folder with the folder name, and you'll be done! Actually, add more of those on different lines, and you'll be done! ;)

NOTE: The for loops could be nested, it could be for x in range or for i in range or whatever. ;)

So you've got the basics for file opening! Nice job! To continue on to more to the animation, keep adding for loops. I will be putting an example in this repl. Let's continue on to the print way!


4.2) Middle of animation/Printing

So printing animations are actually simple (without the animation). The following syntax is correct (and an example):

The output would be:

NOTE: The Reason why I added two backslashes was because regularly it is an escape slash in python. Also, the reason why the second backslash disappears in the output is that it now knows that we're trying to make it a symbol, so it switches it to a regular backslash.

So say you making someone go on the internet typing something in. You could add seperate print statements printing each and every other one. hmmrmm, that would be a good idea So there you have it! Let's move on! [pogchamp]


5) End animation

If you've read through the whole thing (hopefully you have without sleeping), you'll have reached here! [pog] If not, try your best and keep trying! There isn't much to do left... However, I give congrats to you! [yayay!] 🎉🥳 Just read through the whole code, just in case for typos!

NOTE: Remember that my code WILL be different than yours, mine will just reference yours
ANOTHER NOTE: My code will only show the main.py, so look through my files for those.

Again, if you followed correctly, you have done it! YAY! Congrats! Wait a sec though...


6) Closing

Hey guys, thanks for viewing this tutorial so much! I hope you guys like it, give suggestions, feedback!

This is my longest tutorial! 400 lines - 2449 Words - 16049 chars

6.1) Closing/Last Note

LAST NOTE OF TUTORIAL: Please don't ask for editing access, it annoys me, and you can just fork the repl. That would help both me and you, because you wouldn't have to wait so long for my permission. Thanks a lot again! ✌☮ @JBYT27

Voters
NFadhlurrahman
dhavalwaniwani
MeeraAl
Livarevie
CullenMeyer
reg5060
G0RG3
Shadowfang950
nbakh16
datboicatguy
Comments
hotnewtop
ShAdOwZxd

That's marvelous! Also, there were colors in Python? Didn't know that.

JBloves27

Thanks! yep! Glad you learned something! @ShAdOwZxd

SilvermoonCat

great! I learned a lot :D

JBloves27

Thanks! Yay! @SilvermoonCat

CuberRaghuveer

Cool man

JBloves27
SnowChristal

soap :L

JBloves27

Lol, thanks! @SnowChristal

Gh0stHack3r

Shampoo! XD @SnowChristal

LuckyOreos

Nice tutorial and your animation is cool!!!

JBloves27

Thanks! @DarthVader29

btfuss
JBloves27
OldWizard209

Noice tutorial @JBYT27

JBloves27

Thanks! @OldWizard209

RhinoRunner

Stop-motion animation is my favorite! Wait would this be stop-motion or text art...

JBloves27

Yep! hmmm, both? XD @RhinoRunner

RhinoRunner

@JBYT27 stop-motion animation + text art = text-art animation

JBloves27

XD yep! :D @RhinoRunner

Bookie0

Remember to add time.sleep()'s every so often.

I would say from time import sleep then you can use sleep(), it's shorter and easier.

for i in range(0):#any int
clear()#or your function
for line in range(len(open("Folder/frame"+ str(i + 1)).readlines())):
print(open("Folder/frame"+ str(i + 1)).readlines()[line],end="")
time.sleep(0)#any int

maybe explain the code, like you could say what does open do, then readlines, etc.

YESS APPLE!!!!

(what's "][" tho?)

also might be me, but for comments:

#colors

I prefer like # colors, a space just looks nice.

same thing here:

for i in range(0):#any int

like i would do for i in range(0): # any int

and why 2 back slashes, when only 1 appears:

I know it's because \ is for escaping, but maybe precise it?

:D

JBloves27

Thanks for suggestions! So

  1. OK
  2. Got it
  3. :)
  4. idk
  5. Cool
  6. Wdym?

@Bookie0

Bookie0

@JBYT27
ok

ok

:D

put apple logo:

ok

i mean like if you compare those 2 images, the side of the computer is made like this: \\ but in the second image, you only see \. That's because of the \ for escaping, but others might not know that?

JBloves27

Ah, ok. Ill put that in :) @Bookie0

Bookie0

cool! @JBYT27

JBloves27

Thanks btw for commenting on both tutorials! @Bookie0

zplusfour

@Bookie0 wait I can't see apple's logo?

JBloves27

You have to be on apple device
grimace @zplusfour

zplusfour

@JBYT27 oh that makes sense

JBloves27
Gh0stHack3r

Wow that Is cool and amazing! Also, Just a question wouldn't Ice also be good?

MeeraAl

cool

JBloves27

Thanks! @MeeraAl

Shadowfang950

It was my mistake I didn't see the file name. lol it works great. You are amazing.

JBloves27

lol, thanks! np @BenjaminWatts1

PetaCodeClub

cool

JBloves27

Thanks! @PetaCodeClub

DossoSoualiho

cool

JBloves27
KayPey

Cool. Interesting that you choose to focus on emojis! Still, anything that makes us improve is good, huh? Best to you!

JBloves27

Thanks! Lol, yep. ;D you too! @KayPey

rashi135

It’s so cool
Thx it helped a lot

JBloves27

Yay! Thanks! Np :) @rashi135

stoporinjail

Cool!

JBloves27

Thanks! @stoporinjail

26th

This is really neat.

JBloves27

Thanks! @26th

WILLIAMBAEWER

( õ ~ õ)

JBloves27
WILLIAMBAEWER

@JBYT27 ( u .u)zzzz...

JBloves27
WILLIAMBAEWER

@JBYT27 ( - 3-)

JBloves27
Gh0stHack3r

(^.^) @JBYT27

WILLIAMBAEWER

@KissFm ( > o <)

Gh0stHack3r
Gh0stHack3r

@JBYT27 Wow I learned a lot of things just from your tutorial!

Shadowfang950

hey I found a bug in your code on line 31. It could just be because of it updating but I just wanted to let you know

JBloves27

oh, ok. Thanks! let me check! @BenjaminWatts1

JBloves27

huh, i dont see anything? @BenjaminWatts1

catspython

I didn't read it, but I think you are trying to get us to close our browser...

JBloves27

Hmmm? Wdym? @catspython

catspython

@JBloves27 somewhere it says that pressing the button in the top right corner copies it.


and I think that's the x that closes the window! does making a new repl do it?

JBloves27

Uh, yeah. I think so @catspython

catspython

@JBloves27 wow! I didn't know that!

JBloves27

:D glad u learned smth! @catspython

Brendan23

@JBloves27 I followed your tutorial but this was the result.
https://repl.it/@Brendan23/animation-1#Frames/frame1
how do I fix it or what did I do wrong?

JBloves27

try putting a os.system('clear') after the time.sleep() at the bottom @Brendan23

Brendan23

@JBloves27 its still the same output.

Brendan23

@Brendan23 also, I change it to snow.

JBloves27

ok. so try putting another time.sleep() right after the other time.sleep(). However, the new time.sleep() will be unindented. So the code will be like this: @Brendan23

That should work. Try that

Brendan23

@JBloves27 it's unfortunate but it still doesn't work. 😥

Brendan23

@Brendan23 do I have to make 9 or more files or something. seems like your "animations" are always 9 files long.

JBloves27

oh. hmmm... could you share it with me so I can experiment? @Brendan23

JBloves27

no, thats prob not it. Then it would make an error @Brendan23

JBloves27

done. sry for late comment @Brendan23

Brendan23

@JBloves27 I got it to work. yay!

JBloves27
RainBowLion1

Oh You made a mustake I NOW HAVE THE POWER OF... COLORSS AHAHAHHAHAHA THR COLOR WILL BE EXTREAM AHAHAHAHAHHAHAHAHHA!!!

RainBowLion1

Help me.

JBloves27
JBloves27

? with what? @Rainbowryan

RainBowLion1

@JBYT27 my spelllingz

JBloves27

lol, umm, ok? @Rainbowryan

Gh0stHack3r

@JBYT27 How about making some people in the animation?