WIP: Adding support for py5-web #318

taconi · 2025-01-02T13:49:20Z

Description

Inspired by @berinhard's pyp5js more specifically @villares' fork, the idea is to use the python syntax with pyodide to access p5js.

related #317

If anyone wants to play/test, I created a flok server with py5-web.

I will upload the PR updates and adjustments on this server

Todo list

Documentation
Installation via npm
Maintain the py5 API

Maintain the py5 API

description	icon	Total
need to test	--	21
ok	✔️	192
error/does not exist on p5	❌	81
needs revision	❓	9
specific to py5, should not be implemented on the web	🚫	23

Py5 Reference

Drawing Shapes

Basic Elements


✔️	`arc()`	Draws an arc to the screen.
✔️	`circle()`	Draws a circle to the screen.
✔️	`ellipse()`	Draws an ellipse (oval) - to the screen.
✔️	`ellipse_mode()`	Modifies the location from which ellipses and circles are drawn by changing the way in which values given are interpreted.
✔️	`line()`	Draws a line (a direct path between two points) - to the screen.
✔️	`lines()`	Draw a collection of lines to the screen.
✔️	`point()`	Draws a point, a coordinate in space at the dimension of one pixel.
✔️	`points()`	Draw a collection of points, each a coordinate in space at the dimension of one pixel.
✔️	`quad()`	A quad is a quadrilateral, a four sided polygon.
✔️	`rect()`	Draws a rectangle to the screen.
✔️	`rect_mode()`	Modifies the location from which rectangles and squares are drawn by changing the way in which values given are interpreted.
✔️	`square()`	Draws a square to the screen.
✔️	`triangle()`	A triangle is a plane created by connecting three points.

3D Shapes


✔️	`box()`	A box is an extruded rectangle. You’ll need to set the P3D renderer in size() to use it.
✔️	`sphere()`	A sphere is a hollow ball made from tessellated triangles. You’ll need the P3D renderer.
❌	`sphere_detail()`	Controls the detail used to render a sphere by adjusting the number of vertices of the sphere mesh.

Vertex Based Shapes


✔️	`begin_closed_shape()`	This method is used to start a custom closed shape.
✔️	`begin_contour()`	Use the begin_contour() and end_contour() methods to create negative shapes within shapes such as the center of the letter ‘O’.
✔️	`begin_shape()`	Using the begin_shape() and end_shape() functions allow creating more complex forms.
✔️	`bezier_vertex()`	Specifies vertex coordinates for Bezier curves.
✔️	`bezier_vertices()`	Create a collection of bezier vertices.
✔️	`curve_vertex()`	Specifies vertex coordinates for curves.
✔️	`curve_vertices()`	Create a collection of curve vertices.
✔️	`end_contour()`	Use the begin_contour() and end_contour() methods to create negative shapes within shapes such as the center of the letter ‘O’.
✔️	`end_shape()`	The end_shape() function is the companion to begin_shape() and may only be called after begin_shape().
✔️	`quadratic_vertex()`	Specifies vertex coordinates for quadratic Bezier curves.
✔️	`quadratic_vertices()`	Add a collection of quadratic vertices.
✔️	`vertex()`	Add a new vertex to a shape.
✔️	`vertices()`	Add a collection of vertices to a shape.

Standalone Curves


✔️	`bezier()`	Draws a Bezier curve on the screen.
✔️	`bezier_detail()`	Sets the resolution at which Beziers display.
✔️	`bezier_point()`	Evaluates the Bezier at point t for points a, b, c, d.
✔️	`bezier_tangent()`	Calculates the tangent of a point on a Bezier curve.
✔️	`curve()`	Draws a curved line (Catmull-Rom spline) on the screen.
✔️	`curve_detail()`	Sets the resolution at which curves display.
✔️	`curve_point()`	Evaluates the curve at point t for points a, b, c, d.
✔️	`curve_tangent()`	Calculates the tangent of a point on a curve.
✔️	`curve_tightness()`	Modifies the quality of forms created with curve() and curve_vertex().

Creating and Displaying Shape Objects


❌	`create_shape()`	Used to define a new empty Py5Shape object.
❌	`load_shape()`	Loads SVG or OBJ geometry making it available as a Py5Shape object.
❌	`convert_shape()`	Converts Python objects into Py5Shape objects.
❌	`convert_cached_shape()`	Converts Python objects into Py5Shape objects, but cache the results.
❌	`shape()`	Draws shapes to the display window.
❌	`shape_mode()`	Modifies the location from which shapes draw.

Color and Other Graphic Attributes

Creating and Setting Colors


✔️	`background()`	Sets the color for the sketch background, also, paints over any previous drawing.
✔️	`clear()`	Clear the drawing surface by setting every pixel to black.
✔️	`color_mode()`	Changes the way py5 interprets color data, using the constants HSB, RGB and the range of the values to be used.
✔️	`fill()`	Sets the color used to fill shapes.
✔️	`no_fill()`	Disables filling geometry.
✔️	`no_stroke()`	Disables drawing the stroke (outline).
✔️	`stroke()`	Sets the color used to draw lines and borders around shapes.
✔️	`color()`	Creates colors for storing in variables of the color datatype (a 32 bit integer).
✔️	`lerp_color()`	Calculates a color between two colors at a specific increment.

Analyzing Colors


✔️	`hex_color()`	Convert a color value to a hex color string.
✔️	`alpha()`	Extracts the alpha value from a color, scaled to match current color_mode().
✔️	`blue()`	Extracts the blue value from a color, scaled to match current color_mode().
✔️	`brightness()`	Extracts the brightness value from a color.
✔️	`green()`	Extracts the green value from a color, scaled to match current color_mode().
✔️	`hue()`	Extracts the hue value from a color.
✔️	`red()`	Extracts the red value from a color, scaled to match current color_mode().
✔️	`saturation()`	Extracts the saturation value from a color.

Stroke Attributes and Style Control


✔️	`stroke_weight()`	Sets the width of the stroke used for lines, points, and the border around shapes.
✔️	`stroke_cap()`	Sets the style for rendering line endings.
✔️	`stroke_join()`	Sets the style of the joints which connect line segments.
✔️	`pop_style()`	The push_style() function saves the current style settings and pop_style() restores the prior settings; these functions are always used together.
✔️	`push_style()`	The push_style() function saves the current style settings and pop_style() restores the prior settings.
✔️	`push()`	combines push_style() and push_matrix() The push() function saves the current drawing style settings and transformations, while pop() restores these settings.
✔️	`pop()`	combines pop_style() and pop_matrix() The pop() function restores the previous drawing style settings and transformations after push() has changed them.

Inputs

Reading Files


✔️	`load_bytes()`	Load byte data from a file or URL.
✔️	`load_json()`	Load a JSON data file from a file or URL.
❌	`load_pickle()`	Load a pickled Python object from a file.
✔️	`load_strings()`	Load a list of strings from a file or URL.
✔️	`parse_json()`	Parse serialized JSON data from a string.
❌	`select_folder()`	Opens a file chooser dialog to select a folder.
❌	`select_input()`	Open a file chooser dialog to select a file for input.

Keyboard Variables


✔️	`is_key_pressed`	The is_key_pressed variable stores whether or not a keyboard button is currently being pressed.
✔️	`key`	The variable key always contains the value of the most recent key on the keyboard that was used (either pressed or released). It will contain the constant CODED if it was a special key that can then be discriminated with key_code.
✔️	`key_code`	The variable key_code is used to detect special keys such as the arrow keys (UP, DOWN, LEFT, and RIGHT) - as well as ALT, CONTROL, and SHIFT.

Keyboard Event Functions


✔️	`key_pressed()`	If defined, it will be called once when a keyboard key is pressed.
✔️	`key_released()`	If defined, it will be called once when a keyboard key is released.
✔️	`key_typed()`	If defined, it will be called once when a keyboard key is pressed and released.

Mouse Variables


✔️	`is_mouse_pressed`	The is_mouse_pressed variable stores whether or not a mouse button is currently being pressed.
✔️	`mouse_button`	When a mouse button is pressed, the variable mouse_button is set to either LEFT, RIGHT, or CENTER, depending on which button is pressed.
✔️	`mouse_x`	The variable mouse_x always contains the current horizontal coordinate of the mouse.
✔️	`mouse_y`	The variable mouse_y always contains the current vertical coordinate of the mouse.
✔️	`pmouse_x`	The variable pmouse_x always contains the horizontal position of the mouse in the frame previous to the current frame.
✔️	`pmouse_y`	The variable pmouse_y always contains the horizontal position of the mouse in the frame previous to the current frame.
❌	`rmouse_x`	The current horizontal coordinate of the mouse after activating scale invariant drawing.
❌	`rmouse_y`	The current vertical coordinate of the mouse after activating scale invariant drawing.

Mouse Event Functions


✔️	`mouse_pressed()`	If defined, it will be called once when a mouse button is pressed.
✔️	`mouse_released()`	If defined, it will be called once when a mouse button is pressed.
✔️	`mouse_clicked()`	If defined, it will be called once when a mouse button is clicked.
✔️	`mouse_dragged()`	If defined, it will be called many times as the mouse is moved while pressed.
✔️	`mouse_wheel()`	If defined, it will be called as the mouse wheel is rolled.
✔️	`mouse_moved()`	If defined, it will be called many times as the mouse is moved.
✔️	`mouse_entered()`	If defined, it will be called when the mouse enters the sketch area.
✔️	`mouse_exited()`	If defined, it will be called when the mouse leaves the sketch area.

Time & Date Helpers


✔️	`day()`	Returns the current day as a value from 1 - 31 by consulting the clock on your computer.
✔️	`hour()`	Returns the current hour as a value from 0 to 23 by consulting the clock on your computer.
✔️	`millis()`	Returns the number of milliseconds (thousandths of a second) - since starting the program.
✔️	`minute()`	Returns the current minute as a value from 0 to 59 by consulting the clock on your computer.
✔️	`month()`	Returns the current month as a value from 1 to 12 by consulting the clock on your computer.
✔️	`second()`	Returns the current seconds as a value from 0 to 59 by consulting the clock on your computer.
✔️	`year()`	Returns the current year by consulting the clock on your computer.

Output

Saving Files


❌	`begin_raw()`	To create vectors from 3D data, use the begin_raw() and end_raw() commands.
❌	`begin_record()`	Opens a new file and all subsequent drawing functions are echoed to this file as well as the display window.
❌	`end_raw()`	Complement to begin_raw(); they must always be used together.
❌	`end_record()`	Stops the recording process started by begin_record() and closes the file.
❌	`save_bytes()`	Save byte data to a file.
✔️	`save_json()`	Save JSON data to a file.
❌	`save_pickle()`	Pickle a Python object to a file.
✔️	`save_strings()`	Save a list of strings to a file.
❌	`select_output()`	Opens a file chooser dialog to select a file for output.

Image Output


✔️	`save()`	Save the drawing surface to an image file.
❌	`save_frame()`	Save the current frame as an image.

Text Area (Console)


✔️	`println()`	Print text or other values to the console (not the sketch drawing area). Similar to Python’s print().
✔️	`set_println_stream()`	Customize where the output of println() goes.

Typography

Drawing Text


✔️	`text()`	Draws text on the screen, that is, the sketch drawing area.
✔️	`text_align()`	Sets the current alignment for drawing text.
✔️	`text_leading()`	Sets the spacing between lines of text in units of pixels.
❌	`text_mode()`	Sets the way text draws to the screen, either as texture maps or as vector geometry.
✔️	`text_size()`	Sets the current font size.

Loading & Selecting Fonts


❌	`create_font()`	Dynamically converts a font to the format used by py5 from a .ttf or .otf file inside the Sketch’s “data” folder or a font that’s installed elsewhere on the computer.
❓	`load_font()`	Loads a .vlw formatted font into a Py5Font object.
--	`text_font()`	Sets the current font that will be drawn with the text() function.

Text Metrics


✔️	`text_width()`	Calculates and returns the width of any character or text string.
✔️	`text_ascent()`	Returns ascent of the current font at its current size.
✔️	`text_descent()`	Returns descent of the current font at its current size.

Coordinate System Transformations

Basic Operations


✔️	`push_matrix()`	Saves the transformation matrix that describes the current coordinate system in the matrix stack so that it can be restored later with pop_matrix().
✔️	`pop_matrix()`	Retrieves the last transformation matrix stored in the matrix stack restoring a previous coordinate system state.
✔️	`translate()`	Specifies an amount to displace the coordinate system origin, displacing objects drawn within the display window. Can be used in 2D, translate(x, y), or 3D, translate(x, y, z).
✔️	`rotate()`	Rotates the coordinate system the amount specified by the angle parameter.
✔️	`scale()`	Increases or decreases the size of shapes by expanding and contracting the coordinate system.
✔️	`shear_x()`	Shears shapes around the x-axis the amount specified by the angle parameter.
✔️	`shear_y()`	Shears shapes around the y-axis the amount specified by the angle parameter.

3D Rotations


✔️	`rotate_x()`	Rotates around the x-axis the amount specified by the angle parameter.
✔️	`rotate_y()`	Rotates around the y-axis the amount specified by the angle parameter.
✔️	`rotate_z()`	Rotates around the z-axis the amount specified by the angle parameter.

Matrix Operations


✔️	`apply_matrix()`	Multiplies the current matrix by the one specified through the parameters.
❌	`get_matrix()`	Get the current matrix as a numpy array.
❌	`print_matrix()`	Prints the current matrix to standard output.
✔️	`reset_matrix()`	Replaces the current matrix with the identity matrix.
❌	`set_matrix()`	Set the current matrix to the one specified through the parameter source.

Sketch Environment

Setup and Variables


✔️	`size()`	Must be called only once to define the sketch dimensions, width and height, in pixel units. Other than in static mode, it must be used inside setup() or settings().
✔️	`full_screen()`	Make the sketch use the full size of the computer’s display. Replaces size().
✔️	`width`	variable that stores the width of the display window.
✔️	`height`	variable that stores the height of the display window.
✔️	`smooth()`	Draws all geometry with smooth (anti-aliased) - edges. Must be used just after size().
✔️	`no_smooth()`	Draws all geometry and fonts with jagged (aliased) - edges and images with hard edges between the pixels when enlarged rather than interpolating pixels.
❓	`cursor()`	Sets the cursor to a predefined symbol or an image, or makes it visible if already hidden.
❓	`no_cursor()`	Hides the cursor from view.
✔️	`frame_count`	The variable frame_count contains the number of frames that have been displayed since the program started.
✔️	`frame_rate()`	Specifies the target number of frames to be displayed every second. If drawing a frame gets slow the target will not be met!
✔️	`get_frame_rate()`	Get the running Sketch’s current frame rate.
✔️	`display_density()`	This function returns the number “2” if the screen is a high-density screen (called a Retina display on macOS or high-dpi on Windows and Linux) - and a “1” if not.
✔️	`pixel_density()`	This function makes it possible for py5 to render using all of the pixels on high resolutions screens like Apple Retina displays and Windows High-DPI displays.
✔️	`display_height`	variable that stores the height of the entire screen display.
✔️	`display_width`	variable that stores the width of the entire screen display.
✔️	`focused`	Confirms if a py5 program is “focused”, meaning that it is active and will accept mouse or keyboard input.
🚫	`sketch_path()`	The Sketch’s current path.

Other Window Controls


❌	`get_surface()`	Get the Py5Surface object used for the Sketch window.
❌	`pixel_height`	Height of the display window in pixels.
❌	`pixel_width`	Width of the display window in pixels.
❌	`ratio_left`	Width of the left section of the window that does not fit the desired aspect ratio of a scale invariant Sketch.
❌	`ratio_scale`	Scaling factor used to maintain scale invariant drawing.
❌	`ratio_top`	Height of the top section of the window that does not fit the desired aspect ratio of a scale invariant Sketch.
❌	`rheight`	The height of the scale invariant display window.
❌	`rwidth`	The width of the scale invariant display window.
❌	`window_move()`	Set the Sketch’s window location.
❌	`window_ratio()`	Set a window ratio to enable scale invariant drawing.
❌	`window_resizable()`	Set the Sketch window as resizable by the user.
--	`window_resize()`	Set a new width and height for the Sketch window.
❌	`window_title()`	Set the Sketch window’s title.
❌	`window_x`	The x-coordinate of the current window location.
❌	`window_y`	The y-coordinate of the current window location.

Math Related

Calculation


✔️	`ceil()`	Calculates the closest int value that is greater than or equal to the value of the parameter.
✔️	`constrain()`	Constrains a value to not exceed a maximum and minimum value.
✔️	`dist()`	Calculates the distance between two points.
✔️	`exp()`	Returns Euler’s number e (2.71828…) - raised to the power of the n parameter.
✔️	`floor()`	Calculates the closest int value that is less than or equal to the value of the parameter.
✔️	`lerp()`	Calculates a number between two numbers at a specific increment.
✔️	`log()`	Calculates the natural logarithm (the base-e logarithm) - of a number.
✔️	`mag()`	Calculates the magnitude (or length) - of a vector.
✔️	`norm()`	Normalizes a number from another range into a value between 0 and 1.
✔️	`remap()`	Re-maps a number from one range to another.
✔️	`sq()`	Squares a number (multiplies a number by itself).
✔️	`sqrt()`	Calculates the square root of a number.

Random


✔️	`noise()`	Generate pseudo-random noise values for specific coordinates using Processing’s noise algorithm.
✔️	`noise_detail()`	Adjusts the character and level of detail of Processing’s noise algorithm, produced by the noise() function.
✔️	`noise_seed()`	Sets the seed value for noise().
✔️	`np_random`	Access the numpy random number generator that py5 uses to provide random number functionality.
❌	`os_noise()`	Generate pseudo-random noise values for specific coordinates using the OpenSimplex 2 algorithm (smooth version / SuperSimplex).
❌	`os_noise_seed()`	Sets the seed value for os_noise().
✔️	`random()`	Generates random numbers.
✔️	`random_choice()`	Select a random item from a list.
✔️	`random_gaussian()`	Generates random gaussian values.
✔️	`random_int()`	Generates random integers.
✔️	`random_sample()`	Select random items from a list.
✔️	`random_seed()`	Sets the seed value for py5’s random functions.

Trigonometry


✔️	`acos()`	The inverse of cos(), returns the arc cosine of a value.
✔️	`asin()`	The inverse of sin(), returns the arc sine of a value.
✔️	`atan()`	The inverse of tan(), returns the arc tangent of a value.
✔️	`atan2()`	Calculates the angle (in radians) - from a specified point to the coordinate origin as measured from the positive x-axis.
✔️	`cos()`	Calculates the cosine of an angle.
✔️	`degrees()`	Converts a radian measurement to its corresponding value in degrees.
✔️	`radians()`	Converts a degree measurement to its corresponding value in radians.
✔️	`sin()`	Calculates the sine of an angle.
✔️	`tan()`	Calculates the ratio of the sine and cosine of an angle.

Working with Images

Loading and Displaying


✔️	`image()`	The image() function draws an image to the display window.
✔️	`image_mode()`	Modifies the location from which images are drawn by changing the way in which parameters given to image() are interpreted.
✔️	`load_image()`	Load an image into a variable of type Py5Image.
✔️	`no_tint()`	Removes the current fill value for displaying images and reverts to displaying images with their original hues.
✔️	`tint()`	Sets the fill value for displaying images.

Pixels


✔️	`apply_filter()`	Filters the display window using a preset filter or with a custom shader.
✔️	`blend()`	Blends a region of pixels from one image into another (or in itself again) - with full alpha channel support.
✔️	`copy()`	Copies a region of pixels from the display window to another area of the display window and copies a region of pixels from an image used as the src_img parameter into the display window.
❌	`get_np_pixels()`	Returns the contents of np_pixels[] as a numpy array.
❌	`get_pixels()`	Reads the color of any pixel or grabs a section of the drawing surface.
❌	`load_np_pixels()`	Loads the pixel data of the current display window into the np_pixels[] array.
❓	`load_pixels()`	Loads the pixel data of the current display window into the pixels[] array.
❌	`np_pixels[]`	The np_pixels[] array contains the values for all the pixels in the display window.
--	`pixels[]`	The pixels[] array contains the values for all the pixels in the display window.
❌	`set_np_pixels()`	Set the entire contents of np_pixels[] to the contents of another properly sized and typed numpy array.
❌	`set_pixels()`	Changes the color of any pixel or writes an image directly into the drawing surface.
❌	`to_pil()`	Returns the drawing surface as a PIL Image object.
❌	`update_np_pixels()`	Updates the display window with the data in the np_pixels[] array.
--	`update_pixels()`	Updates the display window with the data in the pixels[] array.

Textures


✔️	`texture()`	Sets a texture to be applied to vertex points.
✔️	`texture_mode()`	Sets the coordinate space for texture mapping.
✔️	`texture_wrap()`	Defines if textures repeat or draw once within a texture map.

Image Objects


❓	`create_image()`	Creates a new Py5Image (the datatype for storing images).
❌	`convert_image()`	Convert non-py5 image objects into Py5Image objects.
❌	`convert_cached_image()`	Convert non-py5 image objects into Py5Image objects, but cache the results.
❌	`create_image_from_numpy()`	Convert a numpy array into a Py5Image object.
❌	`request_image()`	Use a Py5Promise object to load an image into a variable of type Py5Image.

3D Scene

Camera


❌	`begin_camera()`	The begin_camera() and end_camera() functions enable advanced customization of the camera space.
✔️	`camera()`	Sets the position of the camera through setting the eye position, the center of the scene, and which axis is facing upward.
❌	`end_camera()`	The begin_camera() and end_camera() methods enable advanced customization of the camera space.
❌	`frustum()`	Sets a perspective matrix as defined by the parameters.
✔️	`ortho()`	Sets an orthographic projection and defines a parallel clipping volume.
✔️	`perspective()`	Sets a perspective projection applying foreshortening, making distant objects appear smaller than closer ones.
❌	`print_camera()`	Prints the current camera matrix to standard output.
❌	`print_projection()`	Prints the current projection matrix to standard output.

Coordinates


❌	`model_x()`	Returns the three-dimensional X, Y, Z position in model space.
❌	`model_y()`	Returns the three-dimensional X, Y, Z position in model space.
❌	`model_z()`	Returns the three-dimensional X, Y, Z position in model space.
❌	`screen_x()`	Takes a three-dimensional X, Y, Z position and returns the X value for where it will appear on a (two-dimensional) - screen.
❌	`screen_y()`	Takes a three-dimensional X, Y, Z position and returns the Y value for where it will appear on a (two-dimensional) - screen.
❌	`screen_z()`	Takes a three-dimensional X, Y, Z position and returns the Z value for where it will appear on a (two-dimensional) - screen.

Lights


✔️	`ambient_light()`	Adds an ambient light.
✔️	`directional_light()`	Adds a directional light.
❌	`light_falloff()`	Sets the falloff rates for point lights, spot lights, and ambient lights.
❌	`light_specular()`	Sets the specular color for lights.
✔️	`lights()`	Sets the default ambient light, directional light, falloff, and specular values.
❌	`no_lights()`	Disable all lighting.
❌	`normal()`	Sets the current normal vector.
✔️	`point_light()`	Adds a point light.
❌	`spot_light()`	Adds a spot light.

Material Properties


❌	`ambient()`	Sets the ambient reflectance for shapes drawn to the screen.
❌	`emissive()`	Sets the emissive color of the material used for drawing shapes drawn to the screen.
✔️	`shininess()`	Sets the amount of gloss in the surface of shapes.
❌	`specular()`	Sets the specular color of the materials used for shapes drawn to the screen, which sets the color of highlights.

Rendering

Graphics Context


✔️	`blend_mode()`	Blends the pixels in the display window according to a defined mode.
❌	`clip()`	Limits the rendering to the boundaries of a rectangle defined by the parameters.
❓	`create_graphics()`	Creates and returns a new Py5Graphics object.
❌	`flush()`	Flush drawing commands to the renderer.
❌	`get_graphics()`	Get the Py5Graphics object used by the Sketch.
❌	`hint()`	This function is used to enable or disable special features that control how graphics are drawn.
❌	`no_clip()`	Disables the clipping previously started by the clip() function.

Shaders


❓	`load_shader()`	Loads a shader into a Py5Shader object.
❓	`reset_shader()`	Restores the default shaders.
❓	`shader()`	Applies the shader specified by the parameters.

Sketch Execution

Draw Loop Control


✔️	`loop()`	By default, py5 loops through draw() continuously, executing the code within it.
✔️	`no_loop()`	Stops py5 from continuously executing the code within draw().
✔️	`redraw()`	Executes the code within draw() one time.
🚫	`exit_sketch()`	Quits/stops/exits the program.
🚫	`exiting()`	A function that, if defined by the user, will be called to be executed after the sketch stops.

Advanced Execution Control


🚫	`finished`	Boolean variable reflecting if the Sketch has stopped permanently.
🚫	`hot_reload_draw()`	Perform a hot reload of the Sketch’s draw function.
🚫	`is_dead`	Boolean value reflecting if the Sketch has been run and has now stopped.
🚫	`is_dead_from_error`	Boolean value reflecting if the Sketch has been run and has now stopped because of an error.
🚫	`is_ready`	Boolean value reflecting if the Sketch is in the ready state.
🚫	`is_running`	Boolean value reflecting if the Sketch is in the running state.
🚫	`pargs`	List of strings passed to the Sketch through the call to run_sketch().

Performance Profiling


🚫	`print_line_profiler_stats()`	Print the line profiler stats initiated with profile_draw() or profile_functions().
🚫	`profile_draw()`	Profile the execution times of the draw function with a line profiler.
🚫	`profile_functions()`	Profile the execution times of the Sketch’s functions with a line profiler.

Threading


🚫	`has_thread()`	Determine if a thread of a given name exists and is currently running.
🚫	`join_thread()`	Join the Python thread associated with the given thread name.
🚫	`launch_promise_thread()`	Create a Py5Promise object that will store the returned result of a function when that function completes.
🚫	`launch_repeating_thread()`	Launch a new thread that will repeatedly execute a function in parallel with your Sketch code.
🚫	`launch_thread()`	Launch a new thread to execute a function in parallel with your Sketch code.
🚫	`list_threads()`	List the names of all of the currently running threads.
🚫	`stop_all_threads()`	Stop all running threads.
🚫	`stop_thread()`	Stop a thread of a given name.

JVM Constants


🚫	`java_platform`	Version of Java currently being used by py5.
🚫	`java_version_name`	Version name of Java currently being used by py5.

Py5 Functions


--	`@render()`	Decorator function to render a single frame using the decorated draw function.
--	`@render_sequence()`	Decorator function to render a sequence of frames using the decorated draw function.
--	`create_font_file()`	Utility function to create Processing’s vlw font data files.
--	`get_current_sketch()`	Get the py5 module’s current Sketch instance.
--	`prune_tracebacks()`	Set py5’s exception handling to prune unhelpful stack trace frames when exceptions are thrown by a running Sketch.
--	`register_image_conversion()`	Register new image conversion functionality to be used by convert_image().
--	`register_shape_conversion()`	Register new shape conversion functionality to be used by convert_shape().
--	`render_frame()`	Helper function to render a single frame using the passed draw function argument.
--	`render_frame_sequence()`	Helper function to render a sequence of frames using the passed draw function argument.
--	`reset_py5()`	Reset the py5 module’s current Sketch instance.
--	`set_stackprinter_style()`	Set the formatting style for py5’s stack traces.

Classes


--	`Py5Graphics`	Main graphics and rendering context, as well as the base API implementation for Processing’s “core”.
--	`Py5Image`	A Datatype for storing images. Allows loading, converting and displaying external image formats as well as efficient manipulation of pixels as NumPy arrays.
--	`Py5Shape`	Datatype for storing shapes. Allows loading and displaying SVG (Scalable Vector Graphics) and OBJ shapes.
--	`Py5Shader`	This class encapsulates a GLSL shader program, including a vertex and a fragment shader.
--	`Py5Surface`	The Py5Surface object is the actual window py5 draws animations to. You can use this to interact with the window and change some of its characteristics, such as the window title or location.
--	`Py5Font`	Py5Font is the font class for py5. To create a font to use with py5, use create_font_file(). This will create a font in the format py5 requires.
✔️	`Py5MouseEvent`	A Py5MouseEvent object will be passed to user-defined mouse event functions. Useful for capturing all of a user’s mouse activity.
✔️	`Py5KeyEvent`	A Py5MouseEvent object will be passed to user-defined mouse event functions. Useful for capturing all of a user’s keyboard activity.
✔️	`Py5Vector`	Class to describe a 2D, 3D, or 4D vector. A vector is an entity that has both a magnitude and a direction. This datatype stores the components of the vector as a set of coordinates.

Events

Init


✔️	`settings()`	will be run once at Sketch initialization
✔️	`setup()`	will be run once at Sketch initialization
✔️	`draw()`	run in an animation thread, once per frame

Window


❌	`window_moved()`	If the user moves the Sketch window
✔️	`window_resized()`	If the Sketch window is resizable and the user resizes

Movie


❌	`movie_event()`	when a new movie frame is available.

Update


✔️	`predraw_update()`	The main idea is to allow users to execute code in-between calls to `draw()`.

Camera3D Support

These functions are only for Sketches that use the Processing library Camera3D with py5; without Camera3D, py5 will never call them.


❌	`pre_draw()`	runs once pre `draw()`
❌	`post_draw()`	runs once post `draw()`

munshkr · 2025-01-02T14:58:33Z

packages/web/index.html


 <body class="min-h-screen font-sans antialiased overscroll-none overflow-hidden text-slate-50">
  <div id="root"></div>
+  <script src="https://cdn.jsdelivr.net/pyodide/v0.26.4/full/pyodide.js"></script>


It'd be nice to have this installed as an npm package instead

I had installed pyodide with npm but I had the same error as this issue reports and the solution was to install via cdn.

Maybe updating the node or some other dependency will solve the problem, I'll test this later.

If it doesn't work, would installing pyodide via cdn block the merge?

Ahh I see!

If it doesn't work, would installing pyodide via cdn block the merge?

No, I wouldn't go as far as that. It's just that I try to avoid depending on CDN for external code so that Flok also works offline, as an installable package (e.g. for LAN jams). But if we get stuck, we could go ahead and leave that for another future issue/PR.

I tested with the latest version of node.js currently (23.5.0) and the error persists. Maybe we could remove the cdn from index.html and set it to be loaded only when the session is py5, I believe that this way the other targets would continue to work.
I'm not familiar with react (front-end in general) but I'll see how to load via cdn within the py5 wrapper with react

munshkr · 2025-01-02T14:58:54Z

packages/web/index.html

 <body class="min-h-screen font-sans antialiased overscroll-none overflow-hidden text-slate-50">
  <div id="root"></div>
+  <script src="https://cdn.jsdelivr.net/pyodide/v0.26.4/full/pyodide.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js"></script>


This is probably not needed because flok already has p5 installed as package dependency?

With the installation of pyodide via the CDN, the p5 installed with npm was not found by pyodide, after the installation with the CDN it worked.

I believe that by solving the pyodide problem this will be resolved.

(I didn't test the p5 to see if there was an error due to yet another installation using the CDN, the idea is to remove the CDN, but I'll test it so I can already map it)

I did a quick test and the p5 in the hydra sessions continues to work without any apparent conflicts

…backs

(WIP) Adding support for py5-web

6c75798

taconi changed the title ~~[WIP] Adding support for py5-web~~ WIP: Adding support for py5-web Jan 2, 2025

taconi marked this pull request as draft January 2, 2025 14:28

munshkr reviewed Jan 2, 2025

View reviewed changes

taconi added 4 commits January 2, 2025 22:40

Merge branch 'main' into 317-py5

95a918e

Adjusting compatibility with py5

d5df23b

Increasing compatibility with the py5 api

0a096b4

Increasing compatibility with the py5 api

37959fc

taconi mentioned this pull request Jan 5, 2025

p5js/hydra mouse and key events do not work in the editor #321

Open

taconi added 21 commits January 5, 2025 11:24

Merge branch 'main' into 317-py5

13f348d

Update pyodide

39a3672

Fixing py5 random functions

4092790

Fixing Vertex Based Shapes Functions

026dd8e

Creating set_println_stream function

7ff76c3

Merge branch 'main' into 317-py5

af1adad

Merge branch 'main' into 317-py5

21ea669

Adding py5 copyright

65ed5ed

Fix py5.println

4c33543

Key event support

110bd9a

Implementing Py5Vector based on py5 code

02f31e0

Implementing Py5MouseEvent based on py5 code

00a6ec9

Merge branch 'main' into 317-py5

a936966

Merge branch 'main' into 317-py5

f8b71ab

Removing non-py5 functions

fa096c0

Set stderr

4e2128d

fix build

9fa7738

Adjusting py5 panicCodes

e89faff

Adjustment in comparison of *args

56eddd3

Remap error adjustment

40880d8

Removing try/except to handle events to avoid omitting errors in call…

d8f5180

…backs

taconi added 2 commits January 26, 2025 09:35

Merge branch 'main' into 317-py5

a55560e

Merge branch 'main' into 317-py5

e2edba8

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

WIP: Adding support for py5-web #318

WIP: Adding support for py5-web #318

Uh oh!

taconi commented Jan 2, 2025 •

edited

Loading

Uh oh!

munshkr Jan 2, 2025

Uh oh!

taconi Jan 2, 2025

Uh oh!

munshkr Jan 2, 2025

Uh oh!

taconi Jan 3, 2025

Uh oh!

munshkr Jan 2, 2025

Uh oh!

taconi Jan 2, 2025

Uh oh!

taconi Jan 3, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

WIP: Adding support for py5-web #318

Are you sure you want to change the base?

WIP: Adding support for py5-web #318

Uh oh!

Conversation

taconi commented Jan 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Todo list

Py5 Reference

Drawing Shapes

Basic Elements

3D Shapes

Vertex Based Shapes

Standalone Curves

Creating and Displaying Shape Objects

Color and Other Graphic Attributes

Creating and Setting Colors

Analyzing Colors

Stroke Attributes and Style Control

Inputs

Reading Files

Keyboard Variables

Mouse Variables

Time & Date Helpers

Output

Saving Files

Image Output

Text Area (Console)

Typography

Drawing Text

Loading & Selecting Fonts

Text Metrics

Coordinate System Transformations

Basic Operations

3D Rotations

Matrix Operations

Sketch Environment

Setup and Variables

Other Window Controls

Math Related

Calculation

Random

Trigonometry

Working with Images

Loading and Displaying

Pixels

Textures

Image Objects

3D Scene

Camera

Coordinates

Lights

Material Properties

Rendering

Graphics Context

Shaders

Sketch Execution

Draw Loop Control

Advanced Execution Control

Performance Profiling

Threading

JVM Constants

Py5 Functions

Classes

Events

Init

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

taconi commented Jan 2, 2025 •

edited

Loading