gd4_p5cs

gd4_p5cs is a p5.js-inspired creative-coding layer for Godot 4. It lets you write visual sketches in either GDScript or C# without touching scenes, shaders, or the Godot editor’s drawing pipeline directly. The goal is fast iteration: write a few lines, save, and see the result immediately.

The name reflects the stack: Godot 4 + p5 + cs (C# support).

The project is based on adcomp/Godot4_p5 and extends it with C# support, hot-reloading, a runtime sketch selector, and a broader API.


Why

p5.js is popular for generative art and creative prototyping because the barrier to entry is nearly zero - setup(), draw(), done. Godot is a capable 2D/3D engine, but turning it into a canvas for quick visual experiments requires boilerplate. gd4_p5cs removes that boilerplate and maps the p5.js mental model onto Godot’s rendering layer. C# extends this further - when a sketch grows beyond quick prototyping, the .NET ecosystem is available without leaving the same API.


Features

  • GDScript and C# sketches - both languages are fully supported and interchangeable
  • Hot-reloading - GDScript sketches reload on file save; C# sketches reload after assembly rebuild
  • Runtime sketch selector - pick any sketch from the sketch/ folder without restarting
  • Built-in UI - pause, restart, screenshot, and color picker buttons
  • p5.js-style API - setup(), draw(), background(), fill(), stroke(), and the full shape set
  • Transform stack - push() / pop() saves and restores both transform and style state
  • Math helpers - map, lerp, noise (1D/2D/3D), random, randomGaussian, and more
  • Input - mouse position, buttons, keyboard, and event callbacks
  • Text and images - text(), textSize(), loadImage(), image()

Getting Started

Clone or download the repository and open the project in Godot 4.5+ with .NET support enabled. Press Run. The demo scene loads and the sketch selector appears.

Writing a GDScript sketch

Create a .gd file inside sketch/ (or anywhere else where you can find it) that extends godotp5_class:

extends godotp5_class

func setup():
    createCanvas(800, 800)

func _draw():
    background(Color.BLACK)
    fill(Color.WHITE)
    circle(width / 2, height / 2, 100)

Writing a C# sketch

Create a .cs file inside sketch/ that extends GodotP5:

using Godot;

public partial class MySketch : GodotP5
{
    public override void Setup()
    {
        CreateCanvas(800, 800);
    }

    public override void DrawSketch()
    {
        Background(new Color(0, 0, 0));
        Fill(new Color(1, 1, 1));
        Circle(Width / 2, Height / 2, 100);
    }
}

The sketch is picked up automatically by the selector - no scene wiring needed.


API Overview

The API mirrors p5.js conventions. GDScript uses snake_case; C# uses PascalCase.

Shapes: circle, ellipse, arc, rect, square, triangle, quad, line, point, bezier, beginShape / vertex / endShape

Style: fill, noFill, stroke, noStroke, strokeWeight, background, smooth, noSmooth

Transforms: push / pop, translate, rotate, scale, resetMatrix

Math: map, constrain, lerp, dist, mag, norm, sq, degrees, radians, random, randomGaussian, noise (1D/2D/3D), noiseSeed

Color: lerpColor, red, green, blue, alpha

Input: mouseX/Y, pmouseX/Y, movedX/Y, mouseIsPressed, mouseButton, keyIsPressed, key, keyCode - plus overridable callbacks mousePressed(), mouseClicked(), mouseReleased(), mouseMoved(), mouseDragged(), keyPressed(), keyReleased()

Time: hour(), minute(), second(), day(), month(), year(), millis(), frameCount, deltaTime

Canvas: createCanvas(w, h), loop(), noLoop(), pause(), restart(), frameRate(fps)

Text & images: text(str, x, y), textSize(n), textAlign(h), loadImage(path), image(tex, x, y)

Full API tables are in the README.


Included Sketches

The sketch/ folder ships with ~20 examples:

SketchDescription
AdditiveWavesAdditive wave synthesis (Coding Train #30)
ClockAnimated analog clock face
PhyllotaxisGolden angle / Fibonacci spiral
spirographSpirograph mathematical visualization
noise_circle_gridGrid of circles driven by FastNoise
blobbyAnimated blob using rotated vectors
circle_danceDancing circles with trig functions
wrap_nodeWrapping particles with proximity connections
draw_with_mouseFreehand mouse drawing
Gametest (C#)Interactive note-matching game
empty_sketchBlank template for new sketches

Status

Core drawing and control APIs are stable. C# support covers the most commonly used features. Hot-reload for C# is functional but still experimental - it lives on the cs-hotreload branch and requires an assembly rebuild while the project is running. This happens automatically and doesn’t require restarting the game but there might still be some issues with it, which i have not discovered yet.

Future plans

In the future i might implement loading p5.js files themselves. This is a huge uptaking as it probably requires translating the files into .gd or .cs files. Loading p5.js files in Godot is theoretically already possible over the JavaScriptBridge singleton but i am actually not sure how well that works.


Repository

github.com/Toemmsen96/gd4_p5cs


Credits

  • adcomp - original Godot4_p5 base
  • Toemmsen96 - C# support, hot-reload, sketch selector, extended API