How to animate the creation of this arc in Tkinter? [duplicate] - python

I am trying to model a simple solar system in Tkinter using circles and moving them around in canvas. However, I am stuck trying to find a way to animate them. I looked around and found the movefunction coupled with after to create an animation loop. I tried fidgeting with the parameters to vary the y offset and create movement in a curved path, but I failed while trying to do this recursively or with a while loop. Here is the code I have so far:
import tkinter
class celestial:
def __init__(self, x0, y0, x1, y1):
self.x0 = x0
self.y0 = y0
self.x1 = x1
self.y1 = y1
sol_obj = celestial(200, 250, 250, 200)
sx0 = getattr(sol_obj, 'x0')
sy0 = getattr(sol_obj, 'y0')
sx1 = getattr(sol_obj, 'x1')
sy1 = getattr(sol_obj, 'y1')
coord_sol = sx0, sy0, sx1, sy1
top = tkinter.Tk()
c = tkinter.Canvas(top, bg='black', height=500, width=500)
c.pack()
sol = c.create_oval(coord_sol, fill='black', outline='white')
top.mainloop()

Here's something that shows one way to do what you want using the tkinter after method to update both the position of the object and the associated canvas oval object. It uses a generator function to compute coordinates along a circular path representing the orbit of one of the Celestial instances (named planet_obj1).
import math
try:
import tkinter as tk
except ImportError:
import Tkinter as tk # Python 2
DELAY = 100
CIRCULAR_PATH_INCR = 10
sin = lambda degs: math.sin(math.radians(degs))
cos = lambda degs: math.cos(math.radians(degs))
class Celestial(object):
# Constants
COS_0, COS_180 = cos(0), cos(180)
SIN_90, SIN_270 = sin(90), sin(270)
def __init__(self, x, y, radius):
self.x, self.y = x, y
self.radius = radius
def bounds(self):
""" Return coords of rectangle surrounding circlular object. """
return (self.x + self.radius*self.COS_0, self.y + self.radius*self.SIN_270,
self.x + self.radius*self.COS_180, self.y + self.radius*self.SIN_90)
def circular_path(x, y, radius, delta_ang, start_ang=0):
""" Endlessly generate coords of a circular path every delta angle degrees. """
ang = start_ang % 360
while True:
yield x + radius*cos(ang), y + radius*sin(ang)
ang = (ang+delta_ang) % 360
def update_position(canvas, id, celestial_obj, path_iter):
celestial_obj.x, celestial_obj.y = next(path_iter) # iterate path and set new position
# update the position of the corresponding canvas obj
x0, y0, x1, y1 = canvas.coords(id) # coordinates of canvas oval object
oldx, oldy = (x0+x1) // 2, (y0+y1) // 2 # current center point
dx, dy = celestial_obj.x - oldx, celestial_obj.y - oldy # amount of movement
canvas.move(id, dx, dy) # move canvas oval object that much
# repeat after delay
canvas.after(DELAY, update_position, canvas, id, celestial_obj, path_iter)
top = tk.Tk()
top.title('Circular Path')
canvas = tk.Canvas(top, bg='black', height=500, width=500)
canvas.pack()
sol_obj = Celestial(250, 250, 25)
planet_obj1 = Celestial(250+100, 250, 15)
sol = canvas.create_oval(sol_obj.bounds(), fill='yellow', width=0)
planet1 = canvas.create_oval(planet_obj1.bounds(), fill='blue', width=0)
orbital_radius = math.hypot(sol_obj.x - planet_obj1.x, sol_obj.y - planet_obj1.y)
path_iter = circular_path(sol_obj.x, sol_obj.y, orbital_radius, CIRCULAR_PATH_INCR)
next(path_iter) # prime generator
top.after(DELAY, update_position, canvas, planet1, planet_obj1, path_iter)
top.mainloop()
Here's what it looks like running:

Related

How to use time.sleep() to draw circles Tkinter?

I wrote a program to explore Tkinter & try out object-oriented programming. My goal is to draw concentric circles, starting with the outside and moving in.
The drawing works fine, but my time-delay between circles isn't working. I can see the count-down (with print) but it doesn't draw anything until after the count-down ends.
Possibly this is related to the creation of the object? Nothing happens until the object is finished being created? IDK.
Here's my code:
import tkinter as tk
import time
root = tk.Tk()
size = 1000
myCanvas = tk.Canvas(root, bg="white", height=size, width=size)
# draw circle
class Circle:
def __init__(self, rt, dia, color, x=0, y=0):
self.rt = rt
self.dia = dia
self.color = color
self.x = x # center cord x
self.y = y # center cord y
def draw_circle(self):
r = self.dia / 2
up_left = (self.x - r, self.y + r)
low_right = (self.x + r, self.y - r)
cord = up_left + low_right
self.rt.create_oval(cord, fill=self.color, outline="")
coord2 = 0, 300, 300, 0
#arc = myCanvas.create_oval(coord2, fill="blue")
def PickColor(r, g, b):
r = r % 250
g = g % 250
b = b % 250
return('#%02x%02x%02x' % (r, g, b))
class ConcentricCircles:
def __init__(self, rt, quantity):
self.rt = rt
self.quantity = quantity
def draw_circles(self):
q = self.quantity
circles = []
i = 0
for c in range(q, 1, -1):
time.sleep(0.005)
incr = size/(1.5*q-0.001*c*c*c)
print(c)
circles += [Circle(self.rt, incr*c, PickColor(110, 15*c^3-c^2, 300*c^5-c^4), size/2, size/2)]
circles[i].draw_circle()
i += 1
self.rt.pack()
a = ConcentricCircles(myCanvas, 30).draw_circles()
root.mainloop()
Here's what it draws:
When you use the sleep() function, the application suspends updates to the GUI. This means that the drawing of circles is also suspended. But you can force the application to update the GUI before it continues with update_idletasks(), see example below. I chose to make the update in the Circle.draw_circle() function:
def draw_circle(self):
r = self.dia / 2
up_left = (self.x - r, self.y + r)
low_right = (self.x + r, self.y - r)
cord = up_left + low_right
self.rt.create_oval(cord, fill=self.color, outline="")
self.rt.update_idletasks() # Updates the canvas
When you use sleep() the application is busy all the time it sleeps. You might want to research the after() function which schedules a function call but does not lock the app.

How to get tkinter canvas object to move around a circle

I have a canvas created image:
On my canvas, I have drawn a circle:
The code to produce this circle:
def create_circle(x, y, r, canvasName): #center coordinates, radius
x0 = x - r
y0 = y - r
x1 = x + r
y1 = y + r
return canvasName.create_oval(x0, y0, x1, y1, outline='red')
create_circle(100, 100, 50, canvas)
I would like to get the canvas created image to follow the canvas drawn circle exactly (go round the circle), by each pixel. How is this possible?
To elaborate, here is a demonstration of what I want the canvas image to do:
You can use root.after to send a periodic call to change the coordinates of your image. After that its just a matter of calculating the new x, y positions of your image in each call.
import tkinter as tk
from math import cos, sin, radians
root = tk.Tk()
root.geometry("500x500")
canvas = tk.Canvas(root, background="black")
canvas.pack(fill="both",expand=True)
image = tk.PhotoImage(file="plane.png").subsample(4,4)
def create_circle(x, y, r, canvasName):
x0 = x - r
y0 = y - r
x1 = x + r
y1 = y + r
return canvasName.create_oval(x0, y0, x1, y1, outline='red')
def move(angle):
if angle >=360:
angle = 0
x = 200 * cos(radians(angle))
y = 200 * sin(radians(angle))
angle+=1
canvas.coords(plane, 250+x, 250+y)
root.after(10, move, angle)
create_circle(250, 250, 200, canvas)
plane = canvas.create_image(450,250,image=image)
root.after(10, move, 0)
root.mainloop()

Efficiently create a grid in tkinter

I am currently using the following code to create a grid the size of the window within python using the tkinter module
import tkinter as tk
class Frame():
def __init__(self, *args, **kwargs):
# Setup Canvas
self.c = tk.Canvas(root, height=500, width=500, bg='white')
self.c.pack(fill=tk.BOTH, expand=True)
self.c.bind('<Configure>', self.createGrid)
self.pixel_width = 20
self.pixel_height = 20
# Setup binds
self.c.bind("<ButtonPress-1>", self.leftClick)
def leftClick(self, event):
items = self.c.find_closest(event.x, event.y)
if items:
rect_id = items[0]
self.c.itemconfigure(rect_id, fill="red")
def createGrid(self, event=None):
for x in range(0, self.c.winfo_width()):
for y in range(0, self.c.winfo_height()):
x1 = (x * self.pixel_width)
x2 = (x1 + self.pixel_width)
y1 = (y * self.pixel_height)
y2 = (y1 + self.pixel_height)
self.c.create_rectangle(x1,y1,x2,y2)
self.c.update()
root = tk.Tk()
gui = Frame(root)
root.mainloop()
If I set the canvas height and width to something like 50 this loads quite quickly, although when the size is increased to 500 x 500 like is set here it takes about 5 seconds to create the grid. I have tried creating the grid with lines but the problem with that is I need squares as I am then planning to change the colour of a square that is selected. Is there any way I can make this more efficient?
I think you created way more rectangles than you need. The below two lines:
for x in range(0, self.c.winfo_width()):
for y in range(0, self.c.winfo_height()):
Will create 504x504 rectangles = 254016. It will work fine if you reduce it to just fill your current screen:
def createGrid(self, event=None):
for x in range(0, int(self.c.winfo_width()/20+1)):
for y in range(0, int(self.c.winfo_height()/20+1)):
x1 = (x * self.pixel_width)
x2 = (x1 + self.pixel_width)
y1 = (y * self.pixel_height)
y2 = (y1 + self.pixel_height)
self.c.create_rectangle(x1,y1,x2,y2)
self.c.update()

Animating an object to move in a circular path in Tkinter

I am trying to model a simple solar system in Tkinter using circles and moving them around in canvas. However, I am stuck trying to find a way to animate them. I looked around and found the movefunction coupled with after to create an animation loop. I tried fidgeting with the parameters to vary the y offset and create movement in a curved path, but I failed while trying to do this recursively or with a while loop. Here is the code I have so far:
import tkinter
class celestial:
def __init__(self, x0, y0, x1, y1):
self.x0 = x0
self.y0 = y0
self.x1 = x1
self.y1 = y1
sol_obj = celestial(200, 250, 250, 200)
sx0 = getattr(sol_obj, 'x0')
sy0 = getattr(sol_obj, 'y0')
sx1 = getattr(sol_obj, 'x1')
sy1 = getattr(sol_obj, 'y1')
coord_sol = sx0, sy0, sx1, sy1
top = tkinter.Tk()
c = tkinter.Canvas(top, bg='black', height=500, width=500)
c.pack()
sol = c.create_oval(coord_sol, fill='black', outline='white')
top.mainloop()
Here's something that shows one way to do what you want using the tkinter after method to update both the position of the object and the associated canvas oval object. It uses a generator function to compute coordinates along a circular path representing the orbit of one of the Celestial instances (named planet_obj1).
import math
try:
import tkinter as tk
except ImportError:
import Tkinter as tk # Python 2
DELAY = 100
CIRCULAR_PATH_INCR = 10
sin = lambda degs: math.sin(math.radians(degs))
cos = lambda degs: math.cos(math.radians(degs))
class Celestial(object):
# Constants
COS_0, COS_180 = cos(0), cos(180)
SIN_90, SIN_270 = sin(90), sin(270)
def __init__(self, x, y, radius):
self.x, self.y = x, y
self.radius = radius
def bounds(self):
""" Return coords of rectangle surrounding circlular object. """
return (self.x + self.radius*self.COS_0, self.y + self.radius*self.SIN_270,
self.x + self.radius*self.COS_180, self.y + self.radius*self.SIN_90)
def circular_path(x, y, radius, delta_ang, start_ang=0):
""" Endlessly generate coords of a circular path every delta angle degrees. """
ang = start_ang % 360
while True:
yield x + radius*cos(ang), y + radius*sin(ang)
ang = (ang+delta_ang) % 360
def update_position(canvas, id, celestial_obj, path_iter):
celestial_obj.x, celestial_obj.y = next(path_iter) # iterate path and set new position
# update the position of the corresponding canvas obj
x0, y0, x1, y1 = canvas.coords(id) # coordinates of canvas oval object
oldx, oldy = (x0+x1) // 2, (y0+y1) // 2 # current center point
dx, dy = celestial_obj.x - oldx, celestial_obj.y - oldy # amount of movement
canvas.move(id, dx, dy) # move canvas oval object that much
# repeat after delay
canvas.after(DELAY, update_position, canvas, id, celestial_obj, path_iter)
top = tk.Tk()
top.title('Circular Path')
canvas = tk.Canvas(top, bg='black', height=500, width=500)
canvas.pack()
sol_obj = Celestial(250, 250, 25)
planet_obj1 = Celestial(250+100, 250, 15)
sol = canvas.create_oval(sol_obj.bounds(), fill='yellow', width=0)
planet1 = canvas.create_oval(planet_obj1.bounds(), fill='blue', width=0)
orbital_radius = math.hypot(sol_obj.x - planet_obj1.x, sol_obj.y - planet_obj1.y)
path_iter = circular_path(sol_obj.x, sol_obj.y, orbital_radius, CIRCULAR_PATH_INCR)
next(path_iter) # prime generator
top.after(DELAY, update_position, canvas, planet1, planet_obj1, path_iter)
top.mainloop()
Here's what it looks like running:

How to draw the "trail" in a maze solving application

Hello i have designed a maze and i want to draw a path between the cells as the 'person' moves from one cell to the next.
So each time i move the cell a line is drawn
Also i am using the graphics module
The graphics module is an object oriented library
Im importing
from graphics import*
from maze import*
my circle which is my cell
center = Point(15, 15)
c = Circle(center, 12)
c.setFill('blue')
c.setOutline('yellow')
c.draw(win)
p1 = Point(c.getCenter().getX(), c.getCenter().getY())
this is my loop
if mazez.blockedCount(cloc)> 2:
mazez.addDecoration(cloc, "grey")
mazez[cloc].deadend = True
c.move(-25, 0)
p2 = Point(p1.getX(), p1.getY())
line = graphics.Line(p1, p2)
cloc.col = cloc.col - 1
Now it says getX not defined every time i press a key is this because of p2???
This is the most important bits in the module for this part
def __init__(self, title="Graphics Window",
width=200, height=200, autoflush=True):
master = tk.Toplevel(_root)
master.protocol("WM_DELETE_WINDOW", self.close)
tk.Canvas.__init__(self, master, width=width, height=height)
self.master.title(title)
self.pack()
master.resizable(0,0)
self.foreground = "black"
self.items = []
self.mouseX = None
self.mouseY = None
self.bind("<Button-1>", self._onClick)
self.height = height
self.width = width
self.autoflush = autoflush
self._mouseCallback = None
self.trans = None
self.closed = False
master.lift()
if autoflush: _root.update()
def __checkOpen(self):
if self.closed:
raise GraphicsError("window is closed")
def setCoords(self, x1, y1, x2, y2):
"""Set coordinates of window to run from (x1,y1) in the
lower-left corner to (x2,y2) in the upper-right corner."""
self.trans = Transform(self.width, self.height, x1, y1, x2, y2)
def plot(self, x, y, color="black"):
"""Set pixel (x,y) to the given color"""
self.__checkOpen()
xs,ys = self.toScreen(x,y)
self.create_line(xs,ys,xs+1,ys, fill=color)
self.__autoflush()
def plotPixel(self, x, y, color="black"):
"""Set pixel raw (independent of window coordinates) pixel
(x,y) to color"""
self.__checkOpen()
self.create_line(x,y,x+1,y, fill=color)
self.__autoflush()
def draw(self, graphwin):
if self.canvas and not self.canvas.isClosed(): raise GraphicsError(OBJ_ALREADY_DRAWN)
if graphwin.isClosed(): raise GraphicsError("Can't draw to closed window")
self.canvas = graphwin
self.id = self._draw(graphwin, self.config)
if graphwin.autoflush:
_root.update()
def move(self, dx, dy):
"""move object dx units in x direction and dy units in y
direction"""
self._move(dx,dy)
canvas = self.canvas
if canvas and not canvas.isClosed():
trans = canvas.trans
if trans:
x = dx/ trans.xscale
y = -dy / trans.yscale
else:
x = dx
y = dy
self.canvas.move(self.id, x, y)
if canvas.autoflush:
_root.update()
class Point(GraphicsObject):
def __init__(self, x, y):
GraphicsObject.__init__(self, ["outline", "fill"])
self.setFill = self.setOutline
self.x = x
self.y = y
def _draw(self, canvas, options):
x,y = canvas.toScreen(self.x,self.y)
return canvas.create_rectangle(x,y,x+1,y+1,options)
def _move(self, dx, dy):
self.x = self.x + dx
self.y = self.y + dy
def clone(self):
other = Point(self.x,self.y)
other.config = self.config.copy()
return other
def getX(self): return self.x
def getY(self): return self.y
def __init__(self, p1, p2, options=["outline","width","fill"]):
GraphicsObject.__init__(self, options)
self.p1 = p1.clone()
self.p2 = p2.clone()
def _move(self, dx, dy):
self.p1.x = self.p1.x + dx
self.p1.y = self.p1.y + dy
self.p2.x = self.p2.x + dx
self.p2.y = self.p2.y + dy
def getP1(self): return self.p1.clone()
def getP2(self): return self.p2.clone()
def getCenter(self):
p1 = self.p1
p2 = self.p2
return Point((p1.x+p2.x)/2.0, (p1.y+p2.y)/2.0)
You might try this from an interactive Python shell:
>>> import graphics
>>> help(graphics.Circle)
That should tell you what attributes Circle does have.
You're trying to use getX() and getY() as free-standing FUNCTIONS:
p2 = Point(getX(), getY())
Note that you're calling them as bare names, not qualified names -- therefore, as functions, not as methods.
And yet the docs you quote say they're methods -- therefore, they must be called as part of qualified names ("after a dot"...!-) and before the dot must be an instance of Point.
Presumably, therefore, you need p1.getX() and p1.getY() instead of the bare names you're using. p1.getX is a qualified name (i.e., one with a dot) and it means "method or attribute getX of object p1.
This is really super-elementary Python, and I recommend you first study the official Python tutorial or other even simpler introductory documents before you try making or modifying applications in Python.
I don't know how maze solves the puzzle, so I am going to assume it works like a generator, yielding the next move for the circle to make. Something to this effect:
while not this_maze.solved():
next_position = this_maze.next()
my_circle.move(next_position)
Then all you need to do is keep track of the current circle position and the previous circle position.
prev_position = this_maze.starting_point
while not this_maze.solved():
next_position = this_maze.next()
my_circle.clear()
draw_trail(prev_position, next_position)
my_circle.draw_at(next_position)
prev_position = next_position
Obviously, changing this in something compatible with your framework is left up to you. dir(), help() and reading the libraries' source will all help you.

Categories