P5 library - Interactivity

Mouse coordinates

Use mouse_x and mouse_y to get the current coordinates of the mouse cursor.

from p5 import * def setup(): size(300, 300) background(240) def draw(): stroke_weight(2) point(mouse_x, mouse_y) run()

Use pmouse_x() and pmouse_y() to get the previous coordinates of the mouse cursor.

from p5 import * def setup(): size(300, 300) background(240) def draw(): stroke_weight(2) line(mouse_x, mouse_y, pmouse_x(), pmouse_y()) run()

Mouse events

mouse_moved

mouse_pressed

mouse_released

mouse_dragged

mouse_wheel

from p5 import * dots = [] # list of dots to draw on the screen dragged_dot = None # the dot being dragged def setup(): size(300, 300) # Create three dots and add them to the list. dots.append(ColorDot(width*1/4, height/2, width/5, 0)) # red dots.append(ColorDot(width*1/2, height/2, width/5, 120)) # green dots.append(ColorDot(width*3/4, height/2, width/5, 240)) # blue def draw(): background(240) for dot in dots: dot.draw() def mouse_moved(): for dot in dots: dot.highlighted = dot.contains(mouse_x, mouse_y) def mouse_pressed(): global dragged_dot for dot in dots: if dot.contains(mouse_x, mouse_y): dragged_dot = dot def mouse_released(): global dragged_dot dragged_dot = None def mouse_dragged(): if dragged_dot: dragged_dot.move_to(mouse_x, mouse_y) class ColorDot: def __init__(self, x, y, diameter, hue): self.x = x self.y = y self.diameter = diameter self.hue = hue self.highlighted = False def draw(self): push_style() color_mode(HSB) fill(self.hue, 100, 100, 1 if self.highlighted else 0.6) no_stroke() circle(self.x, self.y, self.diameter) pop_style() def contains(self, x, y): return dist(self.x, self.y, x, y) <= self.diameter/2 def move_to(self, x, y): self.x = x self.y = y run()

Keyboard events

keyboard.key

keyboard.keyCode

key_pressed

key_released

from p5 import * from string import printable COLORS = ["red", "green", "blue"] msg_text = "I love P5!" msg_angle_rad = 0 msg_size = 50 msg_color = COLORS[0] def setup(): size(300, 300) def draw(): background(240) push_matrix() translate(width/2, height/2) rotate(msg_angle_rad) fill(msg_color) text_align(CENTER, CENTER) text_size(msg_size) text(msg_text, 0, 0) pop_matrix() def key_pressed(): global msg_text, msg_angle_rad, msg_size, msg_color key, keyCode = keyboard.key, keyboard.keyCode if key in printable: msg_text += key elif key == "Backspace": msg_text = msg_text[:-1] # drop the last character elif key == "Enter": curr_index = COLORS.index(msg_color) next_index = (curr_index + 1) % len(COLORS) msg_color = COLORS[next_index] elif key == "ArrowUp": msg_size += 5 elif key == "ArrowDown": msg_size = max(msg_size - 5, 5) elif key == "ArrowLeft": msg_angle_rad -= radians(5) elif key == "ArrowRight": msg_angle_rad += radians(5) run()

Challenge: Modify the program to keep the text spinning until the left or right arrow key is released.

Check a pixel's color

from p5 import * score = 0 # We must use hex colors in uppercase here because will compare them with the get(x, y).hex property later. COLOR_OUTER = "#0000FF" COLOR_INNER = "#FFFFFF" COLOR_CENTER = "#FF0000" def setup(): size(300, 300) def draw(): background(240) text(f"Score: {score}", 10, 20) draw_target() def mouse_pressed(): global score color = get(mouse_x, mouse_y) if color.hex == COLOR_OUTER: score += 1 elif color.hex == COLOR_INNER: score += 5 elif color.hex == COLOR_CENTER: score += 10 def draw_target(): push_style() no_stroke() fill(COLOR_OUTER) circle(width/2, height/2, width*0.8) fill(COLOR_INNER) circle(width/2, height/2, width*0.5) fill(COLOR_CENTER) circle(width/2, height/2, width*0.2) pop_style() run()

Test program

Show me

from p5 import * def setup(): size(300, 300) def draw(): background(240) push_style() fill("purple") stroke_weight(5) rect(0.1 * width, 0.8 * height, 0.8 * width, 0.1 * height) pop_style() mx, my = mouse_x, mouse_y pmx, pmy = pmouse_x(), pmouse_y() color = get(mx, my) lines = [ "Use the mouse and the keyboard.", "Check the text output.", "", f"mx={mx:.0f}, my={my:.0f}", f"pmx={pmx:.0f}, pmy={pmy:.0f}", "", f"color.hex = {color.hex}", f"color.rgb = {color.red},{color.green},{color.blue}", f"color.hsb = {color.hue},{color.saturation:.0f},{color.brightness:.0f}", ] text_align(CENTER, CENTER) text("\n".join(lines), width/2, height*0.4) def key_pressed(): key, code = keyboard.key, keyboard.keyCode print(f"key_pressed - key={key}, code={code}") def key_released(): key, code = keyboard.key, keyboard.keyCode print(f"key_released - key={key}, code={code}") def mouse_moved(): mx, my = mouse_x, mouse_y pmx, pmy = pmouse_x(), pmouse_y() # print(f"mouse_moved - mx={mx:.0f}, my={my:.0f}, pmx={pmx:.0f}, pmy={pmy:.0f}") def mouse_pressed(): mx, my = mouse_x, mouse_y pmx, pmy = pmouse_x(), pmouse_y() print(f"mouse_pressed - mx={mx:.0f}, my={my:.0f}, pmx={pmx:.0f}, pmy={pmy:.0f}") def mouse_released(): mx, my = mouse_x, mouse_y pmx, pmy = pmouse_x(), pmouse_y() print(f"mouse_released - mx={mx:.0f}, my={my:.0f}, pmx={pmx:.0f}, pmy={pmy:.0f}") def mouse_dragged(): mx, my = mouse_x, mouse_y pmx, pmy = pmouse_x(), pmouse_y() print(f"mouse_dragged - mx={mx:.0f}, my={my:.0f}, pmx={pmx:.0f}, pmy={pmy:.0f}") def mouse_wheel(): # TODO: How to obtain the wheel count? mx, my = mouse_x, mouse_y pmx, pmy = pmouse_x(), pmouse_y() print(f"mouse_wheel - mx={mx:.0f}, my={my:.0f}, pmx={pmx:.0f}, pmy={pmy:.0f}") run()