Umfeld — VSCode Snippets

Code snippets for Umfeld, a C++ creative coding library that brings a Processing-style API to C++. Write setup()/draw() sketches, draw shapes, play audio, run shaders, and handle MIDI/OSC — all in native C++.

Works on macOS, Linux, Raspberry Pi, and Windows (MSYS2).

Features

~40 snippets covering the full Umfeld API surface
Trigger any snippet by typing its prefix in a .cpp file and pressing Tab
Tabstop placeholders let you fill in arguments without reaching for the mouse
Works on every platform Umfeld supports

Snippets

Structure

Prefix	Description	Example output
`umfeld`	Full sketch skeleton with includes, `settings`, `setup`, and `draw`	`#include "Umfeld.h" …`
`settings`	`settings()` function stub	`void settings() { … }`
`setup`	`setup()` function stub	`void setup() { … }`
`draw`	`draw()` function stub	`void draw() { … }`

Input Callbacks

Prefix	Description	Example output
`keyPressed`	Key-press callback	`void keyPressed() { … }`
`keyReleased`	Key-release callback	`void keyReleased() { … }`
`mousePressed`	Mouse-button-press callback	`void mousePressed() { … }`
`mouseReleased`	Mouse-button-release callback	`void mouseReleased() { … }`
`mouseDragged`	Mouse-drag callback	`void mouseDragged() { … }`
`mouseMoved`	Mouse-move callback	`void mouseMoved() { … }`
`mouseWheel`	Mouse-wheel callback	`void mouseWheel(MouseEvent event) { … }`

2D Shapes

Prefix	Description	Example output
`ellipse`	Draw an ellipse	`ellipse(x, y, w, h);`
`circle`	Draw a circle	`circle(x, y, d);`
`rect`	Draw a rectangle	`rect(x, y, w, h);`
`line`	Draw a line	`line(x1, y1, x2, y2);`
`triangle`	Draw a triangle	`triangle(x1,y1, x2,y2, x3,y3);`
`point`	Draw a point	`point(x, y);`
`quad`	Draw a quadrilateral	`quad(x1,y1, x2,y2, x3,y3, x4,y4);`
`arc`	Draw an arc	`arc(x, y, w, h, start, stop);`

3D Shapes

Prefix	Description	Example output
`box`	Draw a box	`box(w, h, d);`
`sphere`	Draw a sphere	`sphere(r);`

Custom Shapes

Prefix	Description	Example output
`beginShape`	`beginShape`/`endShape` block	`beginShape(); … endShape();`
`vertex`	Add a vertex inside a shape	`vertex(x, y);`

Color & Style

Prefix	Description	Example output
`background`	Set background color	`background(r, g, b);`
`fill`	Set fill color	`fill(r, g, b);`
`stroke`	Set stroke color	`stroke(r, g, b);`
`noFill`	Disable fill	`noFill();`
`noStroke`	Disable stroke	`noStroke();`
`strokeWeight`	Set stroke thickness	`strokeWeight(w);`
`color`	Create a color value	`color(r, g, b)`
`color_t`	Declare a `color_t` variable	`color_t c = color(r, g, b);`

Transforms

Prefix	Description	Example output
`translate`	Translate the coordinate system	`translate(x, y, z);`
`rotate`	Rotate around Z axis	`rotate(angle);`
`scale`	Scale the coordinate system	`scale(x, y);`
`pushMatrix`	Save and restore matrix state	`pushMatrix(); … popMatrix();`
`pushStyle`	Save and restore style state	`pushStyle(); … popStyle();`

Typography

Prefix	Description	Example output
`text`	Draw text on screen	`text("hello", x, y);`
`loadFont`	Load a font from file	`PFont f = loadFont("font.ttf");`
`textFont`	Set the active font	`textFont(f);`
`textSize`	Set text size	`textSize(32);`

Images

Prefix	Description	Example output
`loadImage`	Load an image file	`PImage img = loadImage("file.png");`
`image`	Draw an image	`image(img, x, y);`

Math

Prefix	Description	Example output
`map`	Map a value from one range to another	`map(val, low1, high1, low2, high2)`
`lerp`	Linear interpolate between two values	`lerp(start, stop, amt)`
`random`	Generate a random number	`random(high)`
`noise`	Perlin noise value	`noise(x, y)`
`constrain`	Clamp a value to a range	`constrain(val, low, high)`
`dist`	Distance between two points	`dist(x1, y1, x2, y2)`

PVector

Prefix	Description	Example output
`PVector`	Declare a 2D PVector	`PVector v(x, y);`
`PVector3D`	Declare a 3D PVector	`PVector v(x, y, z);`

Shaders

Prefix	Description	Example output
`loadShader`	Load a shader from file	`PShader sh = loadShader("frag.glsl");`
`shader`	Apply a shader	`shader(sh);`

Audio

Prefix	Description	Example output
`audioEvent`	Audio callback receiving a buffer	`void audioEvent(AudioEvent* e) { … }`

Requirements

C/C++ Extension Pack by Microsoft — provides IntelliSense and build tasks for C++
CMake Tools — Umfeld projects use CMake
UMFELD_PATH environment variable pointing to the root of your Umfeld installation, e.g.:
```
export UMFELD_PATH=/opt/umfeld   # macOS / Linux
```
The CMakeLists.txt in every Umfeld project uses this variable to locate the library.

Usage

Open (or create) a .cpp file in your Umfeld project.
Type umfeld and press Tab. The snippet expands into a complete sketch skeleton:

#include "Umfeld.h"

using namespace umfeld;

void settings() {
    size(800, 600);
}

void setup() {
    background(0);
}

void draw() {
    ellipse(mouseX, mouseY, 50, 50);
}

Use Tab to jump between placeholders and fill in your values.
Mix and match other snippets (fill, translate, loadShader, …) as you build out your sketch.

Installation

From the marketplace:

Open VSCode and go to the Extensions view (Ctrl+Shift+X / Cmd+Shift+X).
Search for Umfeld.
Click Install.

Via the command line:

code --install-extension umfeld.umfeld

Via Quick Open:

Press Ctrl+P / Cmd+P and run:

ext install umfeld.umfeld

Umfeld library — https://codeberg.org/Umfeld/umfeld
umfeld-application template — https://codeberg.org/Umfeld/umfeld-application — a ready-to-build CMake starter project

Umfeld