Gd4_p5cs - Creative Coding in Godot, based on p5.js

Showcase Applications
, ,
1

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.

This is currently just a Demo Scene in Godot with Code to get this working. I might turn this into an extension in the future, but it can be used by just copying the needed stuff from the Demo for now.

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

GitHub Repository

Website

I made a post about this on my Website with more Information about it, see here:

State

This is a usable thing, which you can try out and expand based on the Demo Scene in the GitHub Repository. However i would not call it feature complete and finished.
C# Sketch reloading is handled a bit special and still experimental, that is why i put it on the cs-hotreload branch.
I personally haven’t used GDScript a lot so that was also tested a lot less.

This also enables fun stuff like custom Animations and Textures on objects using a viewport for example.

I would love to get some feedback, if some of you want to try this out. :slight_smile:

3 Likes
2


Here is an example of a .gd sketch using this. (You cant see my cursor here but i pause and restart the sketch during the video)

Code: 
extends GodotP5

### The Coding Train ###
# Additive Waves - The Nature of Code
# https://www.youtube.com/watch?v=okfZRl4Xw-c

class Wave:
	var amplitude : float
	var period : float
	var phase : float
	
	func _init(amp, period, phase) -> void:
		self.amplitude = amp
		self.period = period
		self.phase = phase

	func calculate(x):
		return sin(self.phase + 2*PI * x / self.period) * self.amplitude

var waves : Array
var step : int

func setup() -> void:
	set_title("Additive Waves")
	set_viewport_mode(VIEWPORT_MODE.ALWAYS)
	createCanvas(1000, 800)
	background(Color.BLACK)
	noStroke()
	step = 4
	waves = []
	for i in range(5):
		waves.append(Wave.new(randi_range(20,80), randi_range(100,600), randf_range(0, 2*PI)))

func _draw() -> void:
	for i in range(5):
		waves[i].phase += 0.01
	var y
	for x in range(0, width, step):
		y = 0
		for i in range(5):
			y += waves[i].calculate(x)
		fill(Color.from_hsv(x/width, 1,1))
		circle(x,y + height / 2, step)
1 Like
3

Great stuff. I was researching what’s out there in terms of creative coding with Godot the other day, and I found the Godot4_p5 project, but not this one. Glad you’re extending it and keeping it alive, so to speak, with new features like these!

4

Thanks! Glad someone enjoys my efforts i put into this.