We Keep Coding

How Can I Make a Thicker Bezier in Pygame?

I'm building a specialized node editor in Pygame. Each node will be connected with a bezier curve. This curve is built by clicking on a node first. A bezier is drawn between the mouse cursor and the node and once you click on a second node, the bezier line is fixed. My code can already draw the curve and follow the mouse cursor. My problem is that the curve is too thin. Does anyone know of a way to easily specify width in pygame.gfxdraw.bezier? Also, I have no idea what the argument "6" corresponds to; I only know the code won't function without it.
# This draws the bezier curve for the node editor
x, y = pygame.mouse.get_pos()
b_points = [(380,390),(410,385),(425,405), (425, y), (x, y)]
pygame.gfxdraw.bezier(screen, b_points, 6, blue)

Simple answer: You cant't, at least not with pygame.gfxdraw
or pygame.draw. You have to do it yourself.
Compute points along the curve and connect them with pygame.draw.lines.
See Finding a Point on a Bézier Curve: De Casteljau's Algorithm and create a function that draw a bezier curve piont, by point:
import pygame
def ptOnCurve(b, t):
q = b.copy()
for k in range(1, len(b)):
for i in range(len(b) - k):
q[i] = (1-t) * q[i][0] + t * q[i+1][0], (1-t) * q[i][1] + t * q[i+1][1]
return round(q[0][0]), round(q[0][1])
def bezier(surf, b, samples, color, thickness):
pts = [ptOnCurve(b, i/samples) for i in range(samples+1)]
pygame.draw.lines(surf, color, False, pts, thickness)
Minimal example:
import pygame, pygame.gfxdraw
def ptOnCurve(b, t):
q = b.copy()
for k in range(1, len(b)):
for i in range(len(b) - k):
q[i] = (1-t) * q[i][0] + t * q[i+1][0], (1-t) * q[i][1] + t * q[i+1][1]
return round(q[0][0]), round(q[0][1])
def bezier(surf, b, samples, color, thickness):
pts = [ptOnCurve(b, i/samples) for i in range(samples+1)]
pygame.draw.lines(surf, color, False, pts, thickness)
pygame.init()
screen = pygame.display.set_mode((800, 600))
clock = pygame.time.Clock()
run = True
while run:
for event in pygame.event.get():
if event.type == pygame.QUIT:
run = False
x, y = pygame.mouse.get_pos()
b_points = [(380,390), (410,385), (425,405), (425, y), (x, y)]
screen.fill(0)
bezier(screen, b_points, 20, (255, 255, 0), 6)
pygame.draw.lines(screen, (255, 255, 255), False, b_points, 1)
pygame.gfxdraw.bezier(screen, b_points, 6, (255, 0, 0))
pygame.display.flip()
clock.tick(60)
pygame.quit()

Collisions in Zelle graphics.py

I am trying to make my circle bounce off of my rectangle using Zelle graphics.py. Once the circle bounces off of the rectangle I wanted it to keep moving randomly. Here is my code so far, and it's working!
Also I know that each circle graphics technically can use the points of the smallest possible square that would fit around the circle to do the collision but I'm having trouble with doing that.
from graphics import *
import random
def delay(d):
for i in range(d):
for i in range(50):
pass
#-------------------------------------------------
def main():
win=GraphWin("Moving Circle",500,400)
win.setBackground('white')
pt= Point(100,200)
cir=Circle(pt,30)
#changes the color of the circle for each game
r = random.randrange(256)
b = random.randrange(256)
g = random.randrange(256)
color = color_rgb(r, g, b)
cir.setFill(color)
cir.draw(win)
#rectangle
rec = Rectangle(Point(450,450), Point(275, 425))
rec.draw(win)
rec.setFill('black')
#-------------------------------------------------
pt5 = Point(250,30)
instruct1=Text(pt5, "click multiple times to start(rectangle can take multiple clicks to move)")
instruct1.setTextColor('black')
instruct1.draw(win)
#-------------------------------------------------
p=cir.getCenter()
p2=win.getMouse()
dx=1
dy=1
keepGoing=True
while keepGoing:
d = 100
delay(d)
cir.move(dx,dy)
p=cir.getCenter()
p2=win.checkMouse()
instruct1.setText("")
#rectanlge
isClicked= win.checkMouse()
if isClicked:
rp = isClicked
rc = rec.getCenter()
rdx = rp.getX() - rc.getX()
rdy = rp.getY() - rc.getY()
rec.move(rdx,rdy)
#circle
if((p.getX()-30)<=0.0) or ((p.getX()+30)>=500):
dx= -dx
if((p.getY()-30)<=0.0) or ((p.getY()+30)>=400):
dy=-dy
p3=win.checkMouse()
main()

I know that each circle graphics technically can use the points of the
smallest possible square that would fir around the circle to do the
collision
I'm playing with an alternate idea -- we could consider a circle around the rectangle instead of a square around the circle. The issue for me is that we not only need to detect collision, but come out with a sense of which way to move away from the other object. It's not just True and False but rather a (dx, dy) type of result.
Obviously, a circle around the rectangle is too crude, but suppose it were lots of smaller circles making up the rectangle and we measure circle center to center distance to detect a hit:
A hit on just a central (green) rectangle circle means reverse the vertical direction of the big circle. A hit on just the end (red) circle means reverse the horizontal direction of the big circle. And we can detect both kinds of hits and reverse the big circle completely.
Here's my rework of your code with the above in mind -- I also fixed your multiple clicking issue and made lots of style changes:
from random import randrange
from graphics import *
WIDTH, HEIGHT = 500, 400
RADIUS = 30
def delay(d):
for _ in range(d):
for _ in range(50):
pass
def distance(p1, p2):
return ((p2.getX() - p1.getX()) ** 2 + (p2.getY() - p1.getY()) ** 2) ** 0.5
def intersects(circle, rectangle):
dx, dy = 1, 1 # no change
center = circle.getCenter()
rectangle_radius = (rectangle.p2.getY() - rectangle.p1.getY()) / 2
rectangle_width = rectangle.p2.getX() - rectangle.p1.getX()
y = rectangle.getCenter().getY()
for x in range(int(rectangle_radius * 2), int(rectangle_width - rectangle_radius * 2) + 1, int(rectangle_radius)):
if distance(center, Point(rectangle.p1.getX() + x, y)) <= rectangle_radius + RADIUS:
dy = -dy # reverse vertical
break
if distance(center, Point(rectangle.p1.getX() + rectangle_radius, y)) <= rectangle_radius + RADIUS:
dx = -dx # reverse horizontal
elif distance(center, Point(rectangle.p2.getX() - rectangle_radius, y)) <= rectangle_radius + RADIUS:
dx = -dx # reverse horizontal
return (dx, dy)
def main():
win = GraphWin("Moving Circle", WIDTH, HEIGHT)
circle = Circle(Point(WIDTH / 5, HEIGHT / 2), RADIUS)
# change the color of the circle for each game
color = color_rgb(randrange(256), randrange(256), randrange(256))
circle.setFill(color)
circle.draw(win)
# rectangle
rectangle = Rectangle(Point(275, 425), Point(450, 450)) # off screen
rectangle.setFill('black')
rectangle.draw(win)
dx, dy = 1, 1
while True:
delay(100)
circle.move(dx, dy)
# rectangle
isClicked = win.checkMouse()
if isClicked:
point = isClicked
center = rectangle.getCenter()
rectangle.move(point.getX() - center.getX(), point.getY() - center.getY())
# circle
center = circle.getCenter()
if (center.getX() - RADIUS) <= 0.0 or (center.getX() + RADIUS) >= WIDTH:
dx = -dx
if (center.getY() - RADIUS) <= 0.0 or (center.getY() + RADIUS) >= HEIGHT:
dy = -dy
# collision bounce
x, y = intersects(circle, rectangle)
dx *= x
dy *= y
main()
Not perfect, but something to play around with, possibly plugging in a better intersects() implementation.

random circles using SimpleGraphics

I need to make a circle by adjusting conditions on the heights, this program using a lot of random circles but I am unsure where to go from here? I am trying to use the following equation d = (sqrt)((x1 –x2)^2 +(y1 – y2)^2). Right now the program draws many random circles, so adjusting the formula i should be able to manipulate it so that certain circles are red in the centre (like the japan flag).
# using the SimpleGraphics library
from SimpleGraphics import *
# use the random library to generate random numbers
import random
diameter = 15
##
# returns a valid colour based on the input coordinates
#
# #param x is an x-coordinate
# #param y is a y-coordinate
# #return a colour based on the input x,y values for the given flag
##
def define_colour(x,y):
##
if y < (((2.5 - 0)**2) + ((-0.5 - 0)**2)**(1/2)):
c = 'red'
else:
c = 'white'
return c
return None
# repeat until window is closed
while not closed():
# generate random x and y values
x = random.randint(0, getWidth())
y = random.randint(0, getHeight())
# set colour for current circle
setFill( define_colour(x,y) )
# draw the current circle
ellipse(x, y, diameter, diameter)

Here's some code that endlessly draws circles. Circles that are close to the centre of the screen will be drawn in red, all other circles will be drawn in white. Eventually, this will create an image similar to the flag of Japan, although the edge of the inner red "circle" will not be smooth.
I have not tested this code because I don't have the SimpleGraphics module, and I'm not having much success locating it via Google or pip.
from SimpleGraphics import *
import random
diameter = 15
width, height = getWidth(), getHeight()
cx, cy = width // 2, height // 2
# Adjust the multiplier (10) to control the size of the central red portion
min_dist_squared = (10 * diameter) ** 2
def define_colour(x, y):
#Calculate distance squared from screen centre
r2 = (x - cx) ** 2 + (y - cy) ** 2
if r2 <= min_dist_squared:
return 'red'
else:
return 'white'
# repeat until window is closed
while not closed():
# generate random x and y values
x = random.randrange(0, width)
y = random.randrange(0, height)
# set colour for current circle
setFill(define_colour(x, y))
# draw the current circle
ellipse(x, y, diameter, diameter)

Creating a (R,G,B) Sierpinski Triangle in python, using pygame window. Each corner is, respectively Red, Green, and Blue and gradient into each other

So, for my computer science class we are supposed to import the pygame from the website:
http://www.petercollingridge.co.uk/image-processing-pygame
Then we are supposed to create the sierpinski triangle in python in the pygame window using pixels. So each pixel in the window needs to be colored in the shape of the triangle. I can't even get my triangle to show up in just black pixels, and what we're supposed to do is get it to appear with the top corner as red, the bottom left as green, and the bottom right as blue. These colors are supposed to slowly fade into each other (gradient) throughout the triangle. The finished process is supposed to look something like this:
http://eldar.mathstat.uoguelph.ca/dashlock/ftax/Gallery/Sierpenski2D960.gif
First off, everytime I set the window up it says that the midPoint in my main function, where I call the earlier midPoint function is not assigned. This confuses me because I clearly assigned it in the very first function: def midPoint, so any help with that problem would be great. Other than that I'm not sure why I can't get the actual triangle to show up. I just want to start out by getting it to show up black first, and then color it. Any help on what is wrong with my, most likely, awful code would be much appreciated. I am supposed to be minoring in computer science but I am failing the class. I am desperate. Please you can even make fun of my shitty code but I need something, anything. I'm lost. Thank you.
#######################################
import pygame, math, random
pygame.init()
#######################################
def midpoint (x0, x1, y0, y1):
panda = ((x0 + x1)/2)
polarbear = ((y0 + y1)/2)
return panda, polarbear
#######################################
def randomPoint (width, height):
potato = (random.random() * width)
pickle = (random.random() * height)
return potato, pickle
#newImage
# PRE: Takes size, which is a 2-tuple (width, height) and provides size of image
# POST: Creates list of length size[0]. Each item in list is length size[1]. Each item of list is a 3-tuple.
#
# Points of this data structure are denoted as image[x][y] and each point has 3 components: [0] for red, [1] for green, and [2] for blue
#
def newImage(size):
return pygame.surfarray.array3d(pygame.Surface(size))
#######################################
#showImage
# Takes image created by newImage and displays it in open window
# PRE: image is a list of lists of 3-tuples. Each 3 tuple corresponds to a (R,G,B) color.
# POST: image is displayed in window.
#
def showImage(image):
width, height, depth = image.shape
pygame.display.set_mode((width, height))
surface = pygame.display.get_surface()
pygame.surfarray.blit_array(surface, image)
pygame.display.flip()
#######################################
# MAIN PROGRAM
pygame.init()
width = int(input("How large do you want your window? "))
height = int(input("How tall do you want your window? "))
window = newImage((width, height))
for x in range(width):
for y in range(height):
window[x][y] = (255,255,255) #Colors window white
showImage(window)
#
p = randomPoint(width, height)
for i in range(1000001):
corners = [(width, height),(0, height),(width//2, 0)]
c = random.choice(corners)
mid = midPoint(p[0], p[1], c[0], c[1])
if i > 10:
window[(mid[0])][(mid[1])] = (0,0,0)
p = mid
if i % 1000 == 0:
showImage(window)
#
print('Done!')
input("Enter to quit")
pygame.quit()
#
#######################################`

###################SIERPINSKI TRIANGLE (R,G,B)###################
###########################
###################
##########
#######################################
import pygame, math, random
pygame.init()
#######################################
#newImage
# PRE: takes a 2-tuple (width, height) input from user and provides size of image
# POST: Creates list, len[0]. Each item in list is len[1]. Each item is 3-tuple.
# Points of data structure (pixels) are denoted as image[x][y] and each point has 3 components:
##########################################################################################
[0] - RED
##########################################################################################
[1] - GREEN
##########################################################################################
[2] - BLUE
def newImage(size):
return pygame.surfarray.array3d(pygame.Surface(size))
#######################################
#showImage
# Main function: Takes image created by "newImage" and displays it in pygame window
# PRE: image is a LIST OF LISTS of 3-tuples. Each 3 of the tuples corresponds to a (R,G,B) color.
# POST: image is displayed in window
def showImage(image):
width, height, depth = image.shape
pygame.display.set_mode((width, height))
surface = pygame.display.get_surface()
pygame.surfarray.blit_array(surface, image)
pygame.display.flip()
#######################################
#randomPoint
# set the variable "p" in main function to the returned values of this function which should be a random point
# PRE: takes in 2-tuple (width, height)
# POST: returns coordinates of a random point in the size of the image
def randomPoint(width, height):
ex = (random.random() * width)
wye = (random.random() * height)
return ex, wye
#######################################
#midPoint
# find the mid-point between "p" - random point and "c" - random corner in the main function
# PRE: take in all 4 coordinates of the 2 points
# POST: calculate the mid-point between these 2 points and color it black. Set p to the midPoint once this function is complete and repeat.
def midPoint(x0, y0, x1, y1):
eks = ((x0 + x1)/2)
wie = ((y0 + y1)/2)
return eks, wie
#######################################
def colorPoint (x, y, width, height):
w = (255/width)
h = (255/height)
x_color = x*w
y_color = y*h
r = math.fabs(255 - y_color)
g = math.fabs(255 - x_color)
b = math.fabs(255 - x_color - y_color)
return r, g, b
showImage(window)
#######################################
# MAIN PROGRAM
# Start the CHAOS GAME
pygame.init()
#######################################
# Get user input for the width and height of the window
width = int(input("How wide would you like your window to be? "))
height = int(input("How tall would you like your window to be? "))
window = newImage((width, height))
for ecks in range(width):
for why in range(height):
window[ecks][why] = (255,255,255) #Colors window white
showImage(window)
#######################################
# Set "p" to starting value
p = 1
# Call randomPoint in order to set "p" to a random point within the parameters of the window size
p = randomPoint(width, height)
i = 0
for i in range(1000001):
corners = [(width, height),(0, height),(width//2, 0)]
c = random.choice(corners)
mid = midPoint(p[0], p[1], c[0], c[1])
colour = colorPoint((mid[0]), (mid[1]), width, height)
if i > 10:
window[(mid[0])][(mid[1])] = colour
i += 1
p = mid
if i % 1000 == 0:
showImage(window)
#######################################
#End the CHAOS GAME
print ('Done!')
input ("ENTER to quit")
pygame.quit()
#######################################

How can I draw a bezier curve using Python's PIL?

I'm using Python's Imaging Library and I would like to draw some bezier curves.
I guess I could calculate pixel by pixel but I'm hoping there is something simpler.

def make_bezier(xys):
# xys should be a sequence of 2-tuples (Bezier control points)
n = len(xys)
combinations = pascal_row(n-1)
def bezier(ts):
# This uses the generalized formula for bezier curves
# http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Generalization
result = []
for t in ts:
tpowers = (t**i for i in range(n))
upowers = reversed([(1-t)**i for i in range(n)])
coefs = [c*a*b for c, a, b in zip(combinations, tpowers, upowers)]
result.append(
tuple(sum([coef*p for coef, p in zip(coefs, ps)]) for ps in zip(*xys)))
return result
return bezier
def pascal_row(n, memo={}):
# This returns the nth row of Pascal's Triangle
if n in memo:
return memo[n]
result = [1]
x, numerator = 1, n
for denominator in range(1, n//2+1):
# print(numerator,denominator,x)
x *= numerator
x /= denominator
result.append(x)
numerator -= 1
if n&1 == 0:
# n is even
result.extend(reversed(result[:-1]))
else:
result.extend(reversed(result))
memo[n] = result
return result
This, for example, draws a heart:
from PIL import Image
from PIL import ImageDraw
if __name__ == '__main__':
im = Image.new('RGBA', (100, 100), (0, 0, 0, 0))
draw = ImageDraw.Draw(im)
ts = [t/100.0 for t in range(101)]
xys = [(50, 100), (80, 80), (100, 50)]
bezier = make_bezier(xys)
points = bezier(ts)
xys = [(100, 50), (100, 0), (50, 0), (50, 35)]
bezier = make_bezier(xys)
points.extend(bezier(ts))
xys = [(50, 35), (50, 0), (0, 0), (0, 50)]
bezier = make_bezier(xys)
points.extend(bezier(ts))
xys = [(0, 50), (20, 80), (50, 100)]
bezier = make_bezier(xys)
points.extend(bezier(ts))
draw.polygon(points, fill = 'red')
im.save('out.png')

A bezier curve isn't that hard to draw yourself. Given three points A, B, C you require three linear interpolations in order to draw the curve. We use the scalar t as the parameter for the linear interpolation:
P0 = A * t + (1 - t) * B
P1 = B * t + (1 - t) * C
This interpolates between two edges we've created, edge AB and edge BC. The only thing we now have to do to calculate the point we have to draw is interpolate between P0 and P1 using the same t like so:
Pfinal = P0 * t + (1 - t) * P1
There are a couple of things that need to be done before we actually draw the curve. First off we have will walk some dt (delta t) and we need to be aware that 0 <= t <= 1. As you might be able to imagine, this will not give us a smooth curve, instead it yields only a discrete set of positions at which to plot. The easiest way to solve this is to simply draw a line between the current point and the previous point.

You can use the aggdraw on top of PIL, bezier curves are supported.
EDIT:
I made an example only to discover there is a bug in the Path class regarding curveto :(
Here is the example anyway:
from PIL import Image
import aggdraw
img = Image.new("RGB", (200, 200), "white")
canvas = aggdraw.Draw(img)
pen = aggdraw.Pen("black")
path = aggdraw.Path()
path.moveto(0, 0)
path.curveto(0, 60, 40, 100, 100, 100)
canvas.path(path.coords(), path, pen)
canvas.flush()
img.save("curve.png", "PNG")
img.show()
This should fix the bug if you're up for recompiling the module...

Although bezier curveto paths don't work with Aggdraw, as mentioned by #ToniRuža, there is another way to do this in Aggdraw. The benefit of using Aggdraw instead of PIL or your own bezier functions is that Aggdraw will antialias the image making it look smoother (see pic at bottom).
Aggdraw Symbols
Instead of using the aggdraw.Path() class to draw, you can use the aggdraw.Symbol(pathstring) class which is basically the same except you write the path as a string. According to the Aggdraw docs the way to write your path as a string is to use SVG path syntax (see: http://www.w3.org/TR/SVG/paths.html). Basically, each addition (node) to the path normally starts with
a letter representing the drawing action (uppercase for absolute path, lowercase for relative path), followed by (no spaces in between)
the x coordinate (precede by a minus sign if it is a negative number or direction)
a comma
the y coordinate (precede by a minus sign if it is a negative number or direction)
In your pathstring just separate your multiple nodes with a space. Once you have created your symbol, just remember to draw it by passing it as one of the arguments to draw.symbol(args).
Bezier Curves in Aggdraw Symbols
Specifically for cubic bezier curves you write the letter "C" or "c" followed by 6 numbers (3 sets of xy coordinates x1,y1,x2,y2,x3,y3 with commas in between the numbers but not between the first number and the letter). According the docs there are also other bezier versions by using the letter "S (smooth cubic bezier), Q (quadratic bezier), T (smooth quadratic bezier)". Here is a complete example code (requires PIL and aggdraw):
print "initializing script"
# imports
from PIL import Image
import aggdraw
# setup
img = Image.new("RGBA", (1000,1000)) # last part is image dimensions
draw = aggdraw.Draw(img)
outline = aggdraw.Pen("black", 5) # 5 is the outlinewidth in pixels
fill = aggdraw.Brush("yellow")
# the pathstring:
#m for starting point
#c for bezier curves
#z for closing up the path, optional
#(all lowercase letters for relative path)
pathstring = " m0,0 c300,300,700,600,300,900 z"
# create symbol
symbol = aggdraw.Symbol(pathstring)
# draw and save it
xy = (20,20) # xy position to place symbol
draw.symbol(xy, symbol, outline, fill)
draw.flush()
img.save("testbeziercurves.png") # this image gets saved to same folder as the script
print "finished drawing and saved!"
And the output is a smooth-looking curved bezier figure:

I found a simpler way creating a bezier curve (without aggraw and without complex functions).
import math
from PIL import Image
from PIL import ImageDraw
image = Image.new('RGB',(1190,841),'white')
draw = ImageDraw.Draw(image)
curve_smoothness = 100
#First, select start and end of curve (pixels)
curve_start = [(167,688)]
curve_end = [(678,128)]
#Second, split the path into segments
curve = []
for i in range(1,curve_smoothness,1):
split = (curve_end[0][0] - curve_start[0][0])/curve_smoothness
x = curve_start[0][0] + split * i
curve.append((x, -7 * math.pow(10,-7) * math.pow(x,3) - 0.0011 * math.pow(x,2) + 0.235 * x + 682.68))
#Third, edit any other corners of polygon
other =[(1026,721), (167,688)]
#Finally, combine all parts of polygon into one list
xys = curve_start + curve + curve_end + other #putting all parts of the polygon together
draw.polygon(xys, fill = None, outline = 256)
image.show()