I have created a Pygame application where I have about 25 rectangles. I want to display 25 different text values (which is a numerical value but typecasted in str- I mention this because I believe we need string in the first argument) at the center of the rectangle. I have imported a csv file that contains data.
def draw_point(text, pos):
font = pygame.font.SysFont(None, 20)
img = font.render(text, True, (0,0,0))
window.blit(img, pos)
def loop_func():
count = 0
while count < total_length:
data = data_pass[count] # data_pass is an empty list
pygame.draw.rect(window, (255,255,255), (20, 20, width, height))
draw_point(data, (width // 2, height // 2))
According to the loop_func() function, the variable 'data' should be updated with a new value in every loop, and it is updating because I checked with the print() function. But when I pass the variable to the draw_point() function, it seems the function does not display the desired value. This is my output:
It is actually 25 different rectangles with an almost similar background color. I followed everything from the Pygame tutorial, but I am getting a very ugly font, and among 25 rectangles, only 1 rectangle shows the text at its center.
How can I fix this?
All of the text is drawn on top of each other. You need to draw the text at different positions. e.g.:
def loop_func():
count = 0
while count < total_length:
data = data_pass[count] # data_pass is an empty list
pygame.draw.rect(window, (255,255,255), (20, 20, width, height))
draw_point(data, (width // 2, height // 2 + count * 20))
If you want to draw the text at different times (counter), you need to change the text by time. See for example How to display dynamically in Pygame?
Related
I'm trying to make a visualisation for various sorting algorithms and I was playing around with Pygame to try and draw the rectangles that I need.
In the below code, the user is given multiples inputs: the lowest value of the list to be sorted, the highest value, and the number of elements the list is going to have. The elements are going to be randomly generated.
Then I'm getting the user's screen size so that I can have an appropriate window for the visualisation. Based on the visualisation window and the user's input, I'm setting up the width and height of the rectangles, so that each rectangle has the same width and that they are scaled based on the highest value.
Almost everything is nice and fine with this approach, but there's one thing that I can't figure out. It seems that setting the number of elements (n, in the code below) too high, the rectangles are not being drawn.
My asumption is that after a specific threshold, RECT_W, which is the width of the rectangles, becomes to small for Pygame to draw it.
What options do I have to solve it, except of having the number of elements smaller than a specific value?
import random
import pygame
import color_constants as colors
import ctypes
import copy
from pygame.locals import *
# Read data based on user's input
def readData():
listOfNumbers = []
data = dict()
print("Lowest Value: ")
numLow = int(input())
print("Highest Value: ")
numHigh = int(input())
print("Length of list: ")
n = int(input())
for i in range(0, n):
listOfNumbers.append(random.randint(numLow, numHigh))
origLst = copy.copy(listOfNumbers)
data.update({'lst': origLst})
data.update({'numLow': numLow})
data.update({'numHigh': numHigh})
data.update({'n': n})
data.update({'sorted': listOfNumbers})
return data
if __name__ == "__main__":
data = readData()
# Getting the user's screen size
user32 = ctypes.windll.user32
SCREENSIZE = user32.GetSystemMetrics(0)-100, user32.GetSystemMetrics(1)-100
SCREEN_W = SCREENSIZE[0]
SCREEN_H = SCREENSIZE[1]
# Setting and scaling the size of rectangle based on the number of elements (n)
# and the highest number (numHigh)
RECT_W = SCREEN_W // data['n']
RECT_H = SCREEN_H / (data['numHigh'])
# Setting up the color literals
RED = (255, 255, 255)
GRAY = (0, 0, 0)
pygame.init()
screen = pygame.display.set_mode(SCREENSIZE)
running = True
while running:
for event in pygame.event.get():
if event.type == QUIT:
running = False
screen.fill(GRAY)
for i in range(data['n']):
rect = Rect(i*RECT_W, 0, RECT_W, RECT_H * data['lst'][i])
rect.bottom = SCREEN_H
pygame.draw.rect(screen, RED, rect)
pygame.display.flip()
If data['n'] is greater than SCREEN_W, RECT_W is 0. A coordinate is truncated when drawing. You cannot draw a fraction of a pixel. The size of the rectangle can only be integral (0, 1, 2 ...). Hence, you cannot draw a rectangle with a size less than 1.
You can draw the rectangles on a large surface and scale down the surface. However, the rectangles get blurred. So, this is no good option.
At the moment I create a Visualization Tool for my Sudoku solver.
Now I want to display the numbers in the grid with pygame.
def draw(win):
global grid
w = 70
x,y = 0,0
for row in grid:
for col in grid:
rect = pygame.Rect(x,y,w,w)
pygame.draw.rect(win,BLACK,rect)
rect2 = pygame.Rect(x+2, y+2, w-1, w-1)
pygame.draw.rect(win,WHITE,rect2)
pygame.display.flip()
x = x + w
y = y + w
x = 0
The code is ugly, I know but my grid works. And I can iterate over it. My problem now, I don't know how to fill the Rect with a Number?
I want to add the Number from the Sudoku grid at the position [row][col] within rect2.
I hope one of you guys can help me.
To draw text in a rectangle there's a few things you need. The first is a pygame Font object. This is basically just a configured font. You can pass it a full path to a True Type Font (possibly others), or use a system font.
number_font = pygame.font.SysFont( None, 16 ) # default font, size 16
Then to render a number, pass it as text to the font's render() method, giving it a foreground and background colour. The second parameter is whether you want the font nice and smooth. Generally I always leave this True.
number_font = pygame.font.SysFont( None, 16 ) # Default font, Size 16
number_image = number_font.render( "8", True, BLACK, WHITE ) # Number 8
So that creates a number_image - a pyagme.Surface containing the "rendered" number.
Now that has to be centred in each cell. We can do this by working out the size difference between the surrounding rectangle, and the size of the number-image. Splitting this in half should give us a centre position. I just guessed at a font-size of 16, it might be too big for your grid (or way too small).
# Creating the font object needs to be only done once, so don't put it inside a loop
number_font = pygame.font.SysFont( None, 16 ) # default font, size 16
...
for row in grid:
for col in grid:
rect = pygame.Rect(x,y,w,w)
pygame.draw.rect(win,BLACK,rect)
rect2 = pygame.Rect(x+2, y+2, w-1, w-1)
pygame.draw.rect(win,WHITE,rect2)
# make the number from grid[row][col] into an image
number_text = str( grid[row][col] )
number_image = number_font.render( number_text, True, BLACK, WHITE )
# centre the image in the cell by calculating the margin-distance
margin_x = ( w-1 - number_image.width ) // 2
margin_y = ( w-1 - number_image.height ) // 2
# Draw the number image
win.blit( number_image, ( x+2 + margin_x, y+2 + margin_y ) )
I dont know how soduku works but this is how you render text in pygame. Create a font first.
fontName = pygame.font.get_default_font()
size = 10 # This means the text will be 10 pixels in height.
# The width will be scaled automatically.
font = pygame.font.Font(fontName, size)
Then create a text surface from the font.
text = number
antislias = True
color = (0, 0, 0)
surface = font.render(f"{text}", antialias, color)
Note that text argument always has to be a string, so in your case you have to use an fstring because you are rendering number. This surface is like any other surface in pygame, so you can simply render it using win.blit(surface, (row, col)).
I am creating a program which must change the color of individual pixels in a pyglet window. I am unable to find any way to do this in the docs. Is there a way to do this?
For funsies, I'll add another answer that is more along the lines of what you might need. Because the window itself will be whatever "clear" color buffer you decide via:
window = pyglet.window.Window(width=width, height=height)
pyglet.gl.glClearColor(0.5,0,0,1) # Note that these are values 0.0 - 1.0 and not (0-255).
So changing the background is virtually impossible because it's "nothing".
You can however draw pixels on the background via the .draw() function.
import pyglet
from random import randint
width, height = 500, 500
window = pyglet.window.Window(width=width, height=height)
#window.event
def on_draw():
window.clear()
for i in range(10):
x = randint(0,width)
y = randint(0,height)
pyglet.graphics.draw(1, pyglet.gl.GL_POINTS,
('v2i', (x, y)),
('c3B', (255, 255, 255))
)
pyglet.app.run()
This will create 10 randomly placed white dots on the background.
To add anything above that simply place your .blit() or .draw() features after the pyglet.graphics.draw() line.
You could use the magic function SolidColorImagePattern and modify the data you need.
R,G,B,A = 255,255,255,255
pyglet.image.SolidColorImagePattern((R,G,B,A).create_image(width,height)
This is a .blit():able image. It's white, and probably not what you want.
So we'll do some more wizardry and swap out all the pixels for random ones (War of the ants):
import pyglet
from random import randint
width, height = 500, 500
window = pyglet.window.Window(width=width, height=height)
image = pyglet.image.SolidColorImagePattern((255,255,255,255)).create_image(width, height)
data = image.get_image_data().get_data('RGB', width*3)
new_image = b''
for i in range(0, len(data), 3):
pixel = bytes([randint(0,255)]) + bytes([randint(0,255)]) + bytes([randint(0,255)])
new_image += pixel
image.set_data('RGB', width*3, new_image)
#window.event
def on_draw():
window.clear()
image.blit(0, 0)
pyglet.app.run()
For educational purposes, I'll break it down into easier chunks.
image = pyglet.image.SolidColorImagePattern((255,255,255,255)).create_image(width, height)
Creates a solid white image, as mentioned. It's width and height matches the window-size.
We then grab the image data:
data = image.get_image_data().get_data('RGB', width*3)
This bytes string will contain width*height*<format>, meaning a 20x20 image will be 1200 bytes big because RGB takes up 3 bytes per pixel.
new_image = b''
for i in range(0, len(data), 3):
pixel = bytes([randint(0,255)]) + bytes([randint(0,255)]) + bytes([randint(0,255)])
new_image += pixel
This whole block loops over all the pixels (len(data) is just a convenience thing, you could do range(0, width*height*3, 3) as well, but meh.
The pixel contists of 3 randint(255) bytes objects combined into one string like so:
pixel = b'xffxffxff'
That's also the reason for why we step 3 in our range(0, len(data), 3). Because one pixel is 3 bytes "wide".
Once we've generated all the pixels (for some reason the bytes object image can't be modified.. I could swear I've modified bytes "strings" before.. I'm tired tho so that's probably a utopian dream or something.
Anyhow, once all that sweet image building is done, we give the image object it's new data by doing:
image.set_data('RGB', width*3, new_image)
And that's it. Easy as butter in sunshine on a -45 degree winter day.
Docs:
https://pyglet.readthedocs.io/en/pyglet-1.2-maintenance/programming_guide/quickstart.html
https://github.com/Torxed/PygletGui/blob/master/gui_classes_generic.py
https://pythonhosted.org/pyglet/api/pyglet.image.ImageData-class.html#get_image_data
https://pythonhosted.org/pyglet/api/pyglet.image.ImageData-class.html#set_data
You can also opt in to get a region, and just modify a region.. But I'll leave the tinkering up to you :)
You can blit pixels into background 'image'. You can look at this Stack Overflow question.
If you mean background color, I can help. There is one option that I know of, the pyglet.gl.glClearColor function.
for example,:
import pyglet
from pyglet.gl import glClearColor
win = pyglet.window.Window(600, 600, caption = "test")
glClearColor(255, 255, 255, 1.0) # red, green, blue, and alpha(transparency)
def on_draw():
win.clear()
That will create a window with a white background(as opposed to the default, black)
I need to draw a circle filled with random gray colors and a black outline using pygame. This is what it should look like:
The radius increases by expansion_speed * dt every frame and the surface is updated 60 times per second, so however this is achieved (if even possible) needs to be fast. I tried masking an stored texture but that was too slow. My next idea was to read the pixels from this stored texture and only replace the difference between the last and current surfaces. I tried this too but was unable to translate the idea to code.
So how can this be done?
See my update to your previous related question. It has some info about performance. You could try to enable hardware acceleration in fullscreen mode, but I never personally tried it, so can't give good advice how to do it properly. Just use two differnt colorkeys for extracting circle from noise and putting the whole surface to the display. Note that if your Noise surface has pixels same as colorkey color then they also become transparent.
This example I think is what you are trying to get, move the circle with mouse and hold CTRL key to change radius.
Images:
import os, pygame
pygame.init()
w = 800
h = 600
DISP = pygame.display.set_mode((w, h), 0, 24)
clock = pygame.time.Clock( )
tile1 = pygame.image.load("2xtile1.png").convert()
tile2 = pygame.image.load("2xtile2.png").convert()
tw = tile1.get_width()
th = tile1.get_height()
Noise = pygame.Surface ((w,h))
Background = pygame.Surface ((w,h))
for py in range(0, h/th + 2) :
for px in range(0, w/tw + 2):
Noise.blit(tile1, (px*(tw-1), py*(th-1) ) )
Background.blit(tile2, (px*(tw-1), py*(th-1) ) )
color_key1 = (0, 0, 0)
color_key2 = (1, 1, 1)
Circle = pygame.Surface ((w,h))
Circle.set_colorkey(color_key1)
Mask = pygame.Surface ((w,h))
Mask.fill(color_key1)
Mask.set_colorkey(color_key2)
strokecolor = (10, 10, 10)
DISP.blit(Background,(0,0))
def put_circle(x0, y0, r, stroke):
pygame.draw.circle(Mask, strokecolor, (x0,y0), r, 0)
pygame.draw.circle(Mask, color_key2, (x0,y0), r - stroke, 0)
Circle.blit(Noise,(0,0))
Circle.blit(Mask,(0,0))
dirtyrect = (x0 - r, y0 - r, 2*r, 2*r)
Mask.fill(color_key1, dirtyrect)
DISP.blit(Circle, (0,0))
X = w/2
Y = h/2
R = 100
stroke = 2
FPS = 25
MainLoop = True
pygame.mouse.set_visible(False)
pygame.event.set_grab(True)
while MainLoop :
clock.tick(FPS)
pygame.event.pump()
Keys = pygame.key.get_pressed()
MR = pygame.mouse.get_rel() # get mouse shift
if Keys [pygame.K_ESCAPE] :
MainLoop = False
if Keys [pygame.K_LCTRL] :
R = R + MR[0]
if R <= stroke : R = stroke
else :
X = X + MR[0]
Y = Y + MR[1]
DISP.blit(Background,(0,0))
put_circle(X, Y, R, stroke)
pygame.display.flip( )
pygame.mouse.set_visible(True)
pygame.event.set_grab(False)
pygame.quit( )
Many years ago we had a font rendering challenge with the Pygame project.
Someone created an animated static text for the contest but it was far too slow.
We put our heads together and made a much quicker version. Step one was to create a smallish image with random noise. Something like 64x64. You may need a bigger image if your final image is large enough to notice the tiling.
Every frame you blit the tiled noise using a random offset. Then you take an image with the mask, in your case an inverted circle, and draw that on top. That should give you a final image containing just the unmasked noise.
The results were good. In our case it was not noticeable that the noise was just jittering around. That may be because the text did not have a large unobstrcted area. I'd be concerned your large circle would make the trick appear obvious. i guess if you really had a large enough tiled image it would still work.
The results and final source code are still online at the Pygame website,
http://www.pygame.org/pcr/static_text/index.php
I a drawing a graph using Cairo (pycairo specifically) and I need to know how can I draw text inside a circle without overlapping it, by keeping it inside the bounds of the circle. I have this simple code snippet that draws a letter "a" inside the circle:
'''
Created on May 8, 2010
#author: mrios
'''
import cairo, math
WIDTH, HEIGHT = 1000, 1000
#surface = cairo.PDFSurface ("/Users/mrios/Desktop/exampleplaces.pdf", WIDTH, HEIGHT)
surface = cairo.ImageSurface (cairo.FORMAT_ARGB32, WIDTH, HEIGHT)
ctx = cairo.Context (surface)
ctx.scale (WIDTH/1.0, HEIGHT/1.0) # Normalizing the canvas
ctx.rectangle(0, 0, 1, 1) # Rectangle(x0, y0, x1, y1)
ctx.set_source_rgb(255,255,255)
ctx.fill()
ctx.arc(0.5, 0.5, .4, 0, 2*math.pi)
ctx.set_source_rgb(0,0,0)
ctx.set_line_width(0.03)
ctx.stroke()
ctx.arc(0.5, 0.5, .4, 0, 2*math.pi)
ctx.set_source_rgb(0,0,0)
ctx.set_line_width(0.01)
ctx.set_source_rgb(255,0,255)
ctx.fill()
ctx.set_source_rgb(0,0,0)
ctx.select_font_face("Georgia",
cairo.FONT_SLANT_NORMAL, cairo.FONT_WEIGHT_BOLD)
ctx.set_font_size(1.0)
x_bearing, y_bearing, width, height = ctx.text_extents("a")[:4]
print ctx.text_extents("a")[:4]
ctx.move_to(0.5 - width / 2 - x_bearing, 0.5 - height / 2 - y_bearing)
ctx.show_text("a")
surface.write_to_png ("/Users/mrios/Desktop/node.png") # Output to PNG
The problem is that my labels have variable amount of characters (with a limit of 20) and I need to set the size of the font dynamically. It must fit inside the circle, no matter the size of the circle nor the size of the label. Also, every label has one line of text, no spaces, no line breaks.
Any suggestion?
I had a similar issue, where I need to adjust the size of the font to keep the name of my object within the boundaries of rectangles, not circles. I used a while loop, and kept checking the text extent size of the string, decreasing the font size until it fit.
Here what I did: (this is using C++ under Kylix, a Delphi derivative).
double fontSize = 20.0;
bool bFontFits = false;
while (bFontFits == false)
{
m_pCanvas->Font->Size = (int)fontSize;
TSize te = m_pCanvas->TextExtent(m_name.c_str());
if (te.cx < (width*0.90)) // Allow a little room on each side
{
// Calculate the position
m_labelOrigin.x = rectX + (width/2.0) - (te.cx/2);
m_labelOrigin.y = rectY + (height/2.0) - te.cy/2);
m_fontSize = fontSize;
bFontFits = true;
break;
}
fontSize -= 1.0;
}
Of course, this doesn't show error checking. If the rectangle (or your circle) is too small, you'll have to break out of the loop.
Since the size of the circle does not matter you should draw them in the opposite order than your code.
Print the text on screen
Calculate the text boundaries (using text extents)
Draw a circle around the text that is just a little bigger from the text.