How Can I Make a Thicker Bezier in Pygame? - python

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()

Related

How to translate and rotate the coordinate axis about a point in pygame screen?

I'm trying to draw a polygon with DDA line algorithm using pygame.
def Round(a):
return int(a + 0.5)
def mainloop():
while True:
for event in pygame.event.get():
if event.type == pygame.QUIT:
pygame.quit()
sys.exit()
def Draw():
DrawPoly((100, 100), 6, 100)
pygame.display.flip()
def drawDDA(p1, p2, color=[0, 0, 0]):
x0, y0, x1, y1 = p1[0], p1[1], p2[0], p2[1]
steps = abs(x0-x1) if abs(x0-x1) > abs(y0-y1) else abs(y0-y1)
dx = (x1-x0)/steps
dy = (y1-y0)/steps
x, y = x0, y0
gfxdraw.pixel(screen,Round(x),Round(y),color)
for i in range(int(steps)):
x += dx
y += dy
gfxdraw.pixel(screen,Round(x), Round(y),color)
def DrawPoly(center, n, s, color=[0, 0, 0]):
cx, cy = center[0], center[1]
sideAngle = 360/n
bv1x = cx-s/2
bv1y = cy - (s/2)*(1/math.tan(math.radians(sideAngle/2)))
bv2x = cx+s/2
bv2y = bv1y
drawDDA((bv1x, bv1y), (bv2x, bv2y), color)
for i in range(n-1):
# i want to rotate the coordinate plane about an angle "sideAngle" with (cx,cy) as the center
# code here
drawDDA((bv1x, bv1y), (bv2x, bv2y), color)
size = [640, 720]
os.environ['SDL_VIDEO_CENTERED'] = '0'
pygame.init()
screen = pygame.display.set_mode(size)
screen.fill((255, 255, 255))
Draw()
mainloop()
The idea I tried to execute to draw a polygon is
I'm taking a point as center of the polygon
calculating the coordinates of two consecutive points
draw a line between those two points
rotate the whole plane about the center of the polygon by side angle which is (360 degrees/number of sides of the polygon)
now, draw a line with the same coordinates to get another side of the polygon
repeat 4 and 5 for n-2 times to get all the remaining side. (n is the number of sides)
I need a way to rotate the coordinate axis about the center of my polygon.
If you can transform Polar coordinates (d, a) to Cartesian coordinate (x, y) with math.sin and math.cos
x = d * cos(a)
y = d * sin(a)
Change the function DrawPoly:
def DrawPoly(center, n, s, color=[0, 0, 0]):
x0, y0 = center[0], center[1]
a = math.radians(360 / n)
d = s / 2 / math.sin(a / 2)
pts = []
for i in range(n+1):
sideAngle = math.radians(360 * i / n)
x = x0 + d * math.cos(sideAngle)
y = y0 + d * math.sin(sideAngle)
pts.append([x, y])
for i in range(n):
drawDDA(pts[i], pts[i+1], color)
Different polygons with the same side length:
def Draw():
DrawPoly((100, 100), 3, 100, (192, 0, 0))
DrawPoly((100, 100), 4, 100, (0, 192, 0))
DrawPoly((100, 100), 5, 100, (0, 0, 192))
DrawPoly((100, 100), 6, 100, (0, 0, 0))
pygame.display.flip()

How to rotate a triangle to a certain angle in pygame?

I need to rotate a triangle (Not an image) around at the center of the screen. I have seen other people answer this question, but the triangle could not point upwards.
I have tried to use other peoples functions, but they see to only work partly, like the function I mentioned above.
import pygame
disp=pygame.display.set_mode((200,200))
import math
def rotate_triange(mouse_pos,triangle_pos):
#The code here
import time
while True:
time.sleep(1)
pygame.Surface.fill(disp,(255,255,255))
center = (100,100)
radius = 10
mouse_position = pygame.mouse.get_pos()
for event in pygame.event.get():
pass
points = rotate_triangle((100,100),mouse_position)
pygame.draw.polygon(disp,(0,0,0),points)
pygame.display.update()
In pygame 2 dimensional vector arithmetic is implemented in pygame.math.Vector2.
Define a Vector2 object for the mouse position and the center of the triangle. Calculate the angle of vector form the center point to the mouse position (.angle_to()):
vMouse = pygame.math.Vector2(mouse_pos)
vCenter = pygame.math.Vector2(center)
angle = pygame.math.Vector2().angle_to(vMouse - vCenter)
Define the 3 points of the triangle around the (0, 0) and rotate them by the angle (.rotate())
points = [(-0.5, -0.866), (-0.5, 0.866), (2.0, 0.0)]
rotated_point = [pygame.math.Vector2(p).rotate(angle) for p in points]
To calculate the final points, the points have to b scaled and translated by the center of the triangle:
triangle_points = [(vCenter + p*scale) for p in rotated_point]
See the example:
import pygame
import math
def rotate_triangle(center, scale, mouse_pos):
vMouse = pygame.math.Vector2(mouse_pos)
vCenter = pygame.math.Vector2(center)
angle = pygame.math.Vector2().angle_to(vMouse - vCenter)
points = [(-0.5, -0.866), (-0.5, 0.866), (2.0, 0.0)]
rotated_point = [pygame.math.Vector2(p).rotate(angle) for p in points]
triangle_points = [(vCenter + p*scale) for p in rotated_point]
return triangle_points
disp=pygame.display.set_mode((200,200))
run = True
while run:
for event in pygame.event.get():
if event.type == pygame.QUIT:
run = False
mouse_position = pygame.mouse.get_pos()
points = rotate_triangle((100, 100), 10, mouse_position)
pygame.Surface.fill(disp, (255,255,255))
pygame.draw.polygon(disp, (0,0,0), points)
pygame.display.update()
A version of the algorithm, without the use of pygame.math.Vector2, looks as follows:
def rotate_triangle(center, scale, mouse_pos):
dx = mouse_pos[0] - center[0]
dy = mouse_pos[1] - center[1]
len = math.sqrt(dx*dx + dy*dy)
dx, dy = (dx*scale/len, dy*scale/len) if len > 0 else (1, 0)
pts = [(-0.5, -0.866), (-0.5, 0.866), (2.0, 0.0)]
pts = [(center[0] + p[0]*dx + p[1]*dy, center[1] + p[0]*dy - p[1]*dx) for p in pts]
return pts
Note this version is probably faster. It needs a math.sqrt operation, in compare to math.atan2 which is probably used by .angle_to() and math.sin respectively math.cos which is probably used by .rotate(), of the former algorithm.
The result coordinates are the same.

Detect collision between textbox and circle in pygame

I'm trying to create a game in python where one can drag a textbox around the screen, but whenever it touches the borders of a circle around it, I want the loop to start over, but with a different text (by storing all text-strings in a list, but I'm not that far, yet). This is how far I have come:
import pygame
import ptext
pygame.init()
gameDisplay = pygame.display.set_mode((500, 500))
gameDisplay.fill((255,255,255))
x = 190
y = 230
a = 250
b = 250
text = "ExampleText 1."
def textbox(x,y):
ptext.draw(text, (x,y), color = (0,0,0))
def circle(a,b):
pygame.draw.circle(gameDisplay, (0,0,0), (250, 250), 210, 5)
done = False
while not done:
for event in pygame.event.get():
if event.type == pygame.QUIT:
done = True
elif event.type == pygame.MOUSEMOTION:
if event.buttons[0]:
x += event.rel[0]
y += event.rel[1]
textbox(x,y)
circle(a,b)
pygame.display.flip()
pygame.quit()
quit()
Now I understand I will need to detect collision of the borders of my objects, but here I'm pretty lost. I tried to store the variables of my objects in rectangles and then produce another if statement that recognizes whether or not my objects collide (I used a print command because I haven't gotten to the actual command I want, yet), but that won't print anything and I'm sure I'm on the wrong path, but it is my best effort...
For that I have defined:
text_rect = pygame.Rect(x, y, 10, 30)
circle_rect = pygame.Rect(a,b, 300, 300)
and then in my loop:
if circle_rect.colliderect(text_rect):
print("COLLIDE")
Does anybody have any tip on a better way to define the objects and to create the function I want?
(Edit: Btw.: I'm not too concerned about the fact that when I drag my textbox, it leaves a print of the text, since that doesn't happen in my original script, but would be thankful if anyone knows why it does that in my current example.)
A rectangle has 4 corner points. If the rectangle is "smaller" then the circle (the diameter of the circle is greater than the diagonal of the rectangle), then the rectangle collides with the contour of a circle, if at least one point is out of the circle and at least one point is in the circle.
Define the rectangle and setup a list of the corner points. Further you've to know the radius of the circle:
w, h = 10, 30
rect = pygame.Rect(x, y, 10, 30)
corners = [rect.bottomleft, rect.bottomright, rect.topleft, rect.topright]
radius = 210
Calculate the Euclidean distance of each corner point to the center of the circle (a, b):
import math
dist = [math.sqrt((p[0]-a)**2 + (p[1]-b)**2) for p in corners]
Create to lists, one with the points in the circle (p_in) and one with the points out of the circle (p_out):
p_out = [i for i, d in enumerate(dist) if d > radius]
p_in = [i for i, d in enumerate(dist) if d < radius]
If both list contain any element, then the rectangle intersects the circle contour:
if any(p_in) and any(p_out):
print("COLLIDE")
If len(p_in) is 4, then the rectangle is completely in the circle. If len(p_out) is 4 then the rectangle is completely out of the circle.
if any(p_in) and any(p_out):
print("COLLIDE")
elif len(p_in) == 4:
print("IN")
elif len(p_out) == 4:
print("OUT")
See the simple example, which is based on your code snippet and demonstrates the collision test. The rectangle is attached to the mouse:
import pygame
import math
pygame.init()
gameDisplay = pygame.display.set_mode((500, 500))
done = False
while not done:
for event in pygame.event.get():
if event.type == pygame.QUIT:
done = True
x, y = pygame.mouse.get_pos()
w, h = 10, 30
rect = pygame.Rect(x, y, 10, 30)
a, b = 250, 250
radius = 210
corners = [rect.bottomleft, rect.bottomright, rect.topleft, rect.topright]
dist = [math.sqrt((p[0]-a)**2 + (p[1]-b)**2) for p in corners]
p_out = [i for i, d in enumerate(dist) if d > radius]
p_in = [i for i, d in enumerate(dist) if d < radius]
if any(p_in) and any(p_out):
print("COLLIDE")
elif len(p_in) == 4:
print("IN")
elif len(p_out) == 4:
print("OUT")
gameDisplay.fill((255,255,255))
pygame.draw.rect(gameDisplay, (255, 0, 0), rect)
pygame.draw.circle(gameDisplay, (0,0,0), (a, b), radius, 5)
pygame.display.flip()
pygame.quit()
quit()

Why is pixel manipulation with pygame.surfarray slower than with pygame.image? [duplicate]

I'm looking for method that allow me to draw single pixel on display screen. For example when I click mouse, I want the position of clicked pixel to change color. I know how to read mouse pos, but I could not find simple pixel draw ( there is screen.fill method but it's not working as I want).
You can do this with surface.set_at():
surface.set_at((x, y), color)
You can also use pygame.gfxdraw.pixel():
from pygame import gfxdraw
gfxdraw.pixel(surface, x, y, color)
Do note, however, the warning:
EXPERIMENTAL!: meaning this api may change, or dissapear in later
pygame releases. If you use this, your code will break with the next
pygame release.
You could use surface.fill() to do the job too:
def pixel(surface, color, pos):
surface.fill(color, (pos, (1, 1)))
You can also simply draw a line with the start and end points as the same:
def pixel(surface, color, pos):
pygame.draw.line(surface, color, pos, pos)
The usual method of drawing a point on a Surface or the display is to use [`pygame.Surface.set_at']:
window_surface.set_at((x, y), my_color)
However, this function is very slow and leads to a massive lack of performance if more than 1 point is to be drawn.
Minimal example where each pixel is set separately: repl.it/#Rabbid76/PyGame-DrawPixel-1
import pygame
pygame.init()
window = pygame.display.set_mode((300, 300))
run = True
while run:
for event in pygame.event.get():
if event.type == pygame.QUIT:
run = False
window.fill(0)
rect = pygame.Rect(window.get_rect().center, (0, 0)).inflate(*([min(window.get_size())//2]*2))
for x in range(rect.width):
u = x / (rect.width - 1)
color = (round(u*255), 0, round((1-u)*255))
for y in range(rect.height):
window.set_at((rect.left + x, rect.top + y), color)
pygame.display.flip()
pygame.quit()
exit()
Another option is to use a "pygame.PixelArray" object. This object enables direct pixel access to Surface objects. A PixelArray pixel item can be assigned directly. The pixel can be accessed by subscription. The PixelArray locks the Surface, You have to close() it when you have changed the pixel:
pixel_array = pygame.PixelArray(window_surface)
pixel_array[x, y] = my_color
pixel_array[start_x:end_x, start_y:end_y] = my_color
pixel_array.close()
Minimal example that set one line of pixels at once: repl.it/#Rabbid76/PyGame-DrawPixel-2
import pygame
pygame.init()
window = pygame.display.set_mode((300, 300))
run = True
while run:
for event in pygame.event.get():
if event.type == pygame.QUIT:
run = False
window.fill(0)
rect = pygame.Rect(window.get_rect().center, (0, 0)).inflate(*([min(window.get_size())//2]*2))
pixel_array = pygame.PixelArray(window)
for x in range(rect.width):
u = x / (rect.width - 1)
color = (round(u*255), 0, round((1-u)*255))
pixel_array[rect.left + x, rect.top:rect.bottom] = color
pixel_array.close()
pygame.display.flip()
pygame.quit()
exit()
For those who are interested in a more modern answer to the question you can use pygame.draw.circle() to draw a single pixel at a given position (or center).
pygame.draw.circle(surface, color, center, 0)
The documentation specifically says:
radius (int or float) -- radius of the circle, measured from the center parameter, a radius of 0 will only draw the center pixel
One way of doing that is to draw a line staring and ending at the same point.
pygame.draw.line(surface, (255,255,255), (x,y), (x,y))
draw a single coloured pixel
def drawPoint(x,y,color):
s = pygame.Surface((1,1)) # the object surface 1 x 1 pixel (a point!)
s.fill(color) # color as (r,g,b); e.g. (100,20,30)
# now get an object 'rectangle' from the object surface and place it at position x,y
r,r.x,r.y = s.get_rect(),x,y
screen.blit(s,r) # link the object rectangle to the object surface
of course you have to call: pygame.display.update() once you have
drawn all the points you need, don't call update at every single point.
# with this function, you can draw points and change the yer size
def point(surface, color, x, y, size):
'''the surface need the information of the pygame window'''
for i in range(0, size):
pygame.draw.line(surface, color, (x, y-1), (x, y+2), abs(size))

Desperately trying to understand pygame translucency

I have been working directionlessly for the past little while trying to figure out how to make a simple function that draws a translucent circle to a given surface in pygame. I did my research, and I found that many people suggested I simply draw the circle to a temporary surface with SRCALPHA enabled, then blit that surface ontop of the real one I'm drawing to. But I thought that's what I implemented below, no?
import pygame
SCREEN_DIMENSIONS = w, h = 800, 600
screen = pygame.display.set_mode(SCREEN_DIMENSIONS)
FPS = 60
clock = pygame.time.Clock()
def draw_alpha_circle(screen, colour, position, radius, thickness=0):
*colour, alpha = colour # Separate the colour from the alpha
# Note: (assuming colour is a 4-tuple (r, g, b, a))
# *colour, alpha = colour
#
# is equivalent to:
# r, g, b, alpha = colour; colour = r, g, b
x, y = position
d = 2*radius
temp_surface = pygame.Surface((d, d))
temp_surface.set_alpha(alpha)
pygame.draw.circle(temp_surface, colour, position, radius, thickness)
screen.blit(temp_surface, (x - radius, y - radius))
running = True
while running:
clock.tick(FPS)
screen.fill((0, 0, 0))
for evt in pygame.event.get():
if evt.type == pygame.QUIT:
running=False
draw_alpha_circle(screen, (255, 0, 0, 128), (w//2, h//2), 20)
pygame.display.update()
pygame.quit()
This actually draws nothing to the screen at all. I'm completely stumped as to what's causing it to draw absolutely nothing. Could someone give me a hand please? If it's any help, I'm running Python 3.2.3.
As a side question; why is pygame translucency such a hassle to understand? Everything else in the engine is fairly straightforwards, which it should be, but this is remarkably under-documented and difficult to use in my opinion.
EDIT: Now I'm confused, because not even the following code works correctly:
def draw_alpha_circle(screen, colour, position, radius, thickness=0):
*colour, alpha = colour # Separate the colour from the alpha
# Note: (assuming colour is a 4-tuple (r, g, b, a))
# *colour, alpha = colour
#
# is equivalent to:
# r, g, b, alpha = colour; colour = r, g, b
x, y = position
d = 2*radius
temp_surface = pygame.Surface((d, d))
# Doesn't even draw real alpha, I just wanted to test out if it draws properly without alpha, which it doesn't.
pygame.draw.circle(temp_surface, colour, position, radius, thickness)
screen.blit(temp_surface, (x - radius, y - radius))
What is going on here? I am utterly perplexed! Am I going insane, and are you guys actually getting circles and I'm just thinking there aren't circles? I swear this pygame translucency is out to get me.
...I'm an idiot.
The fix is to draw the circle on the temp surface NOT AT THE POSITION ON THE NORMAL SURFACE, but at the position (radius, radius). The following function works perfectly.
def draw_alpha_circle(screen, colour, position, radius, thickness=0):
*colour, alpha = colour # Separate the colour from the alpha
# Note: (assuming colour is a 4-tuple (r, g, b, a))
# *colour, alpha = colour
#
# is equivalent to:
# r, g, b, alpha = colour; colour = r, g, b
x, y = position
d = 2*radius
temp_surface = pygame.Surface((d, d))
temp_surface.set_alpha(alpha)
pygame.draw.circle(temp_surface, colour, (radius, radius), radius, thickness)
screen.blit(temp_surface, (x - radius, y - radius))
I'm not going to delete this question however, I'm going to leave it as a monument to my dumbassery.

Categories