Every Umfeld example

#include "Umfeld.h"

using namespace umfeld;

// demonstrates `cursor(kind)` system cursors (SDL backend, no asset needed)
// and a `PImage`-based custom cursor.
//
//   1 ARROW   2 CROSS   3 HAND   4 MOVE   5 TEXT   6 WAIT
//   7 custom image cursor
//   0 hide (noCursor)   r show default (cursor)

PImage*     cursor_image = nullptr;
std::string current      = "ARROW";

void settings() {
    size(1024, 768);
}

void setup() {
    cursor_image = loadImage("cursor.png");
    cursor_image->resize(32, 32); // small hotspot-friendly size
    cursor(ARROW);
}

void draw() {
    background(216);
    fill(0);
    debug_text("current cursor: " + current, 20, 30);
    debug_text("1 ARROW  2 CROSS  3 HAND  4 MOVE  5 TEXT  6 WAIT", 20, 60);
    debug_text("7 custom image   0 hide   r show default", 20, 80);
}

void keyPressed() {
    switch (key) {
        case '1': cursor(ARROW); current = "ARROW"; break;
        case '2': cursor(CROSS); current = "CROSS"; break;
        case '3': cursor(HAND); current = "HAND"; break;
        case '4': cursor(MOVE); current = "MOVE"; break;
        case '5': cursor(TEXT); current = "TEXT"; break;
        case '6': cursor(WAIT); current = "WAIT"; break;
        case '7':
            cursor(cursor_image, 16, 16); // hotspot at image center
            current = "custom image";
            break;
        case '0': noCursor(); current = "hidden"; break;
        case 'r': cursor(); current = "visible (default)"; break;
        default: break;
    }
}

#include "Umfeld.h"

using namespace umfeld;

const color_t light_green = color(171, 255, 0);
const color_t soft_red    = color(255, 63, 89);

void settings() {
    size(1024, 768);
    config.ignore_key_repeat(true);
}

void setup() {
    strokeWeight(8);
    noStroke();
}

void draw() {
    background(216);
    const float size = 100.0;
    const float x    = width / 2.0;
    const float y    = height / 2.0;
    fill(soft_red);
    circle(x - size * 2.2, y + size, size);
    fill(light_green);
    circle(x - size, y + size, size);
}

void keyPressed() {
    println("pressed :", (char) key);
}

void keyReleased() {
    println("released:", (char) key);
}

/*
 * lights - lightFalloff()
 *
 * Demonstrates lightFalloff(constant, linear, quadratic).
 *
 * Controls how quickly a point light or spotlight dims with distance.
 * The formula is:  attenuation = 1 / (constant + linear*d + quadratic*d^2)
 * where d is the distance from light to vertex.
 *
 * Default is lightFalloff(1, 0, 0) :: no distance falloff.
 *
 * Press LEFT/RIGHT to change the linear falloff term.
 * Press UP/DOWN to change the quadratic falloff term.
 *
 * From https://processing.org/reference/lightFalloff_.html
 */

#include "Umfeld.h"

using namespace umfeld;

float linearFalloff    = 0.0f;
float quadraticFalloff = 0.0f;

void settings() {
    size(800, 500, P3D);
}

void setup() {
    noStroke();
    textSize(14);
}

void keyPressed() {
    const float step = 0.001f;
    if (keyCode == LEFT  && linearFalloff > 0.0f)    linearFalloff    -= step;
    if (keyCode == RIGHT && linearFalloff < 0.05f)   linearFalloff    += step;
    if (keyCode == DOWN  && quadraticFalloff > 0.0f) quadraticFalloff -= step * 0.1f;
    if (keyCode == UP    && quadraticFalloff < 0.01f) quadraticFalloff += step * 0.1f;
    if (key == 'r') { linearFalloff = 0; quadraticFalloff = 0; }
}

void draw() {
    background(10);

    // Point light at center of scene
    noLights();
    lightFalloff(1.0f, linearFalloff, quadraticFalloff);
    pointLight(255, 240, 220, width / 2.0f, height / 2.0f, 200);
    ambientLight(15, 15, 20);

    // Row of spheres at increasing distances from the light
    fill(200, 160, 80);
    const int   count  = 7;
    const float startX = 80;
    const float stepX  = (width - 160.0f) / (count - 1);

    for (int i = 0; i < count; ++i) {
        pushMatrix();
        translate(startX + i * stepX, height / 2.0f, 0);
        sphere(45);
        popMatrix();
    }

    // 2D overlay :: restore default camera/projection
    camera();
    perspective();
    noLights();
    fill(220);
    debug_text("lightFalloff(1,  linear,  quadratic)", 10, 10);
    debug_text("  linear    = " + nf(linearFalloff,    1, 4) + "  (LEFT/RIGHT)", 10, 26);
    debug_text("  quadratic = " + nf(quadraticFalloff, 1, 5) + "  (UP/DOWN)",   10, 42);
    debug_text("  R = reset to defaults", 10, 58);
}

/*
 * lights - material properties
 *
 * Demonstrates ambient(), specular(), emissive(), shininess()
 * working together to define the surface appearance of lit geometry.
 *
 *   ambient(r, g, b)    :: how much ambient light the surface reflects
 *   specular(r, g, b)   :: color of specular (shiny) highlights
 *   emissive(r, g, b)   :: self-illumination; added regardless of lighting
 *   shininess(s)        :: size of the specular highlight (Phong exponent)
 *                          low values = broad highlights, high = sharp pinpoints
 *
 * The example shows four spheres each with different material settings.
 *
 * From https://processing.org/reference/ambient_.html
 *      https://processing.org/reference/specular_.html
 *      https://processing.org/reference/emissive_.html
 *      https://processing.org/reference/shininess_.html
 */

#include "Umfeld.h"

using namespace umfeld;

void settings() {
    size(800, 400, P3D);
}

void setup() {
    noStroke();
    textSize(13);
}

void draw() {
    background(20);

    noLights();
    lightSpecular(255, 255, 255);
    pointLight(255, 255, 255, width / 2.0f, -height * 0.5f, 400);
    ambientLight(60, 60, 60);

    const float y     = height / 2.0f;
    const float r     = 85.0f;
    const float xStep = width / 4.0f;

    // --- Sphere 1: default material (ambient only) ---
    pushMatrix();
    translate(xStep * 0.5f, y, 0);
    fill(200, 100, 50);
    ambient(200, 100, 50);
    specular(0, 0, 0);
    emissive(0, 0, 0);
    shininess(1.0f);
    sphere(r);
    popMatrix();

    // --- Sphere 2: high shininess, grey specular ---
    pushMatrix();
    translate(xStep * 1.5f, y, 0);
    fill(80, 140, 200);
    ambient(80, 140, 200);
    specular(255, 255, 255);
    emissive(0, 0, 0);
    shininess(64.0f);
    sphere(r);
    popMatrix();

    // --- Sphere 3: colored specular + high shininess ---
    pushMatrix();
    translate(xStep * 2.5f, y, 0);
    fill(60, 160, 80);
    ambient(60, 160, 80);
    specular(255, 200, 0);  // gold highlights
    emissive(0, 0, 0);
    shininess(128.0f);
    sphere(r);
    popMatrix();

    // --- Sphere 4: emissive glow ---
    pushMatrix();
    translate(xStep * 3.5f, y, 0);
    fill(200, 80, 180);
    ambient(25, 25, 25);
    specular(0, 0, 0);
    emissive(100, 0, 75);  // purple glow even in shadow
    shininess(1.0f);
    sphere(r);
    popMatrix();

    // 2D labels :: restore default camera/projection
    camera();
    perspective();
    noLights();
    fill(220);
    const float lx = xStep;
    debug_text("ambient only",            lx * 0.5f - 50,  height - 30);
    debug_text("specular  shininess=64",  lx * 1.5f - 65,  height - 30);
    debug_text("gold spec  shine=128",    lx * 2.5f - 55,  height - 30);
    debug_text("emissive glow",           lx * 3.5f - 50,  height - 30);
}

/*
 * lights - normal()
 *
 * Demonstrates normal() for correct lighting on custom geometry.
 *
 * When drawing custom shapes with beginShape()/endShape(), OpenGL cannot
 * automatically compute per-face normals. Calling normal(nx, ny, nz) before
 * the vertices of each face tells the lighting system which direction the
 * surface is pointing, controlling how diffuse and specular highlights fall.
 *
 * This example draws a manually-assembled cube with explicit face normals.
 * Rotating the cube shows how each face reacts to the light differently.
 *
 * From https://processing.org/reference/normal_.html
 */

#include "Umfeld.h"

using namespace umfeld;

// Draw one quad face with an explicit surface normal
void face(float x0, float y0, float z0,
          float x1, float y1, float z1,
          float x2, float y2, float z2,
          float x3, float y3, float z3,
          float nx, float ny, float nz) {
    beginShape(QUADS);
    normal(nx, ny, nz);
    vertex(x0, y0, z0);
    vertex(x1, y1, z1);
    vertex(x2, y2, z2);
    vertex(x3, y3, z3);
    endShape();
}

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

void setup() {
    noStroke();
}

void draw() {
    background(0);

    // Warm directional light from upper-left
    noLights();
    directionalLight(255, 240, 200, -1, -1, -1);
    ambientLight(40, 40, 60);

    translate(width / 2.0f, height / 2.0f, 0);
    rotateY(frameCount * 0.015f);
    rotateX(frameCount * 0.009f);

    fill(200, 120, 60);
    const float s = 120.0f;

    // front  (+Z)
    face(-s, -s,  s,   s, -s,  s,   s,  s,  s,  -s,  s,  s,   0,  0,  1);
    // back   (-Z)
    face( s, -s, -s,  -s, -s, -s,  -s,  s, -s,   s,  s, -s,   0,  0, -1);
    // right  (+X)
    face( s, -s,  s,   s, -s, -s,   s,  s, -s,   s,  s,  s,   1,  0,  0);
    // left   (-X)
    face(-s, -s, -s,  -s, -s,  s,  -s,  s,  s,  -s,  s, -s,  -1,  0,  0);
    // top    (-Y)
    face(-s, -s, -s,   s, -s, -s,   s, -s,  s,  -s, -s,  s,   0, -1,  0);
    // bottom (+Y)
    face(-s,  s,  s,   s,  s,  s,   s,  s, -s,  -s,  s, -s,   0,  1,  0);
}

/*
 * this example is based on the Processing example
 * https://processing.org/reference/lights_.html
 * and shows how to use light with 3D primitives in umfeld.
 */

#include "Umfeld.h"

using namespace umfeld;

void settings() {
    size(400, 400);
}

void setup() {
    noStroke();
    fill(255);
    profile(PROFILE_3D);
}

void draw() {
    background(0);

    // Include lights() at the beginning
    // of draw() to keep them persistent

    lights();

    pushMatrix();
    translate(80, 200, 0);
    sphere(120);
    popMatrix();

    pushMatrix();
    translate(320, 200, 0);
    sphere(120);
    popMatrix();

    noLights();
}

/*
 * this example shows how to load an OBJ and display it as a mesh.
 */

#include "Umfeld.h"
#include "VertexBuffer.h"

using namespace umfeld;

VertexBuffer* mesh_shape;
int           number_vertices = 0;

void settings() {
    size(1024, 768);
}

void setup() {
    profile(PROFILE_3D);

    const std::vector<Vertex> vertices = loadOBJ("Panda.obj");
    number_vertices                    = vertices.size();
    mesh_shape                         = new VertexBuffer();
    mesh_shape->add_vertices(vertices);
}

void draw() {
    background(216);

    if (isMousePressed) {
        mesh_shape->set_shape(LINES);
    } else {
        mesh_shape->set_shape(TRIANGLES);
    }

    fill(0);
    debug_text("FPS     : " + nf(frameRate, 1), 10, 10);
    debug_text("VERTICES: " + nf(number_vertices, 1), 10, 25);

    pushMatrix();

    translate(width * 0.5f, height * 0.75f);
    rotateX(PI);
    rotateY(PI);
    rotateX(sin(frameCount * 0.07f) * 0.07f);
    rotateY(sin(frameCount * 0.1f) * 0.1f);
    rotateZ(sin(frameCount * 0.083f) * 0.083f);
    scale(75);

    mesh(mesh_shape);

    pushMatrix();
    translate(2, 0);
    scale(0.4);
    rotateY(-0.7);
    mesh(mesh_shape);
    popMatrix();

    noStroke();
    fill(127, 216, 255);
    pushMatrix();
    rotateX(HALF_PI);
    square(-3, -3, 6);
    popMatrix();

    popMatrix();

    if (isKeyPressed) {
        for (auto& v: mesh_shape->vertices_data()) {
            v.position.x += random(-0.02, 0.02);
            v.position.y += random(-0.02, 0.02);
            v.position.z += random(-0.02, 0.02);
        }
        mesh_shape->update();
    }
}

void mousePressed() {
#ifdef SYSTEM_MACOS
    popen("say -v \"Anna\" \"EI CAN DANCE!\"", "r");
#endif
}

#include "Umfeld.h"

using namespace umfeld;

PImage* umfeld_image;

void settings() {
    size(1024, 768);
}

void setup() {
    umfeld_image = loadImage("umfeld.png");
    umfeld_image->set_resize_filter_mode(IMAGE_RESIZE_FILTER_BOX);
    umfeld_image->resize(0, height);

    // umfeld_image = loadImage("umfeld.jpg"); // JPG has no alpha channel

    // NOTE loading images also works with URLs
    // umfeld_image = loadImage("https://codeberg.org/Umfeld/umfeld/raw/branch/main/assets/umfeld-logotype.png");

    imageMode(CENTER);
    noStroke();
}

void draw() {
    background(216);

    fill(0);
    debug_text("FPS: " + nf(frameRate, 3, 1), 10, 10);

    fill(0);
    circle(width * 0.5f, height * 0.5f, umfeld_image->width - 34);

    if (isMousePressed) {
        tint(255, 0, 0, map(mouseX, 0, width, 0, 255));
    }
    noStroke();
    noFill();
    image(umfeld_image, mouseX, mouseY);
    if (isMousePressed) {
        noTint();
    }
}

void keyPressed() {
    umfeld_image->clear(); // deleting image pixels
}

/*
 * loadShape(".svg") :: editable vector SVG as a retained PShape tree.
 *
 * NanoSVG parses paths + gradients; gradients are baked per-vertex so they
 * render on every backend. the returned shape is a GROUP of child shapes
 * (one per SVG element) that you can re-style and transform at runtime.
 *
 * note: SVG <text> is not yet supported (parser drops it).
 */

#include "Umfeld.h"

using namespace umfeld;

PShape* icon;

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

void setup() {
    icon = loadShape("icon.svg"); // resolved relative to data/
    if (icon == nullptr) {
        warning("could not load icon.svg");
    }
}

void draw() {
    background(20);

    if (icon == nullptr) { return; }

    // draw centred and scaled to fit a 400x400 box via shapeMode(CENTER)
    shapeMode(CENTER);
    shape(icon, width * 0.5f, height * 0.5f, 400, 400);

    // re-tint the second child (the sun circle) over time, proving the tree is editable
    if (icon->getChildCount() > 1) {
        const float pulse = 128 + 127 * sin(frameCount * 0.05f);
        icon->getChild(1)->setFill(color_pack_i(static_cast<uint8_t>(pulse), 210, 60, 255));
    }
}

void shutdown() {
    delete icon;
}

#include "Umfeld.h"

using namespace umfeld;

// The following short CSV file called "mammals.csv" is parsed
// in the code below. It must be in the project's "data" folder.
//
// id,species,name
// 0,Capra hircus,Goat
// 1,Panthera pardus,Leopard
// 2,Equus zebra,Zebra

Table* table;

void settings() {
    size(1024, 768);
}

void setup() {

    table = loadTable("mammals.csv", "header");

    println(table->getRowCount(), " total rows in table");

    for (TableRow row: table->rows()) {

        int    id      = row.getInt("id");
        String species = row.getString("species");
        String name    = row.getString("name");

        println(name, " (" + species + ") has an ID of ", id);
    }

    exit();
}

// Sketch prints:
// 3 total rows in table
// Goat (Capra hircus) has an ID of 0
// Leopard (Panthera pardus) has an ID of 1
// Zebra (Equus zebra) has an ID of 2

#include "Umfeld.h"

using namespace umfeld;

const color_t light_green = color(171, 255, 0);
const color_t soft_red    = color(255, 63, 89);

void settings() {
    size(1024, 768);
}

void setup() {
    strokeWeight(32);
}

void draw() {
    background(216);
    const float size           = 100.0;
    const float diameter_red   = size + sin(frameCount * 0.05) * 15.0;
    const float diameter_green = size + sin(frameCount * 0.033) * 15.0;
    const float x              = width / 2.0;
    const float y              = height / 2.0;
    noStroke();
    fill(soft_red);
    circle(x - size * 2.2, y + size, diameter_red);
    fill(light_green);
    circle(x - size, y + size, diameter_green);

    const float size_half = size / 2.0;
    noFill();
    stroke(0);
    line(mouseX - size_half, mouseY - size_half, mouseX + size_half, mouseY + size_half);
    line(mouseX + size_half, mouseY - size_half, mouseX - size_half, mouseY + size_half);
}

#include "Umfeld.h"

using namespace umfeld;

PImage* original_image;

void settings() {
    size(1024, 768);
}

void setup() {
    original_image = loadImage("drip.png");
}

void draw() {
    const int halfImage = width * height / 2;
    fill(255);
    image(original_image, 0, 0);

    loadPixels();
    for (int i = 0; i < halfImage; i++) {
        pixels[i + halfImage] = pixels[i];
    }
    constexpr int offset = 100;
    for (int x = 0; x < 100; x++) {
        for (int y = 0; y < 100; y++) {
            float     red         = y / 100.0f;
            float     green       = (float) x / 100.0f;
            float     blue        = red * green;
            const int i           = (x + offset) + (y + offset) * width;
            pixels[i + halfImage] = color(red * 255, green * 255, blue * 255);
            set(x + offset, y + offset, color(red * 255, green * 255, blue * 255));
        }
    }
    updatePixels();

    /* color picker */

    const color_t pick_color = get((int) mouseX, (int) mouseY);
    noFill();
    stroke(pick_color);
    strokeWeight(8);
    circle(mouseX, mouseY, 64);

    noStroke();
    fill(255);
    circle(mouseX - 20, mouseY, 20);
    circle(mouseX, mouseY, 20);
    circle(mouseX + 20, mouseY, 20);
    float picked_color_red = red(pick_color) / 255.0;
    fill(255, 0, 0);
    circle(mouseX - 20, mouseY, 20 * picked_color_red);
    float picked_color_green = green(pick_color) / 255.0;
    fill(0, 255, 0);
    circle(mouseX, mouseY, 20 * picked_color_green);
    float picked_color_blue = blue(pick_color) / 255.0;
    fill(0, 0, 255);
    circle(mouseX + 20, mouseY, 20 * picked_color_blue);

    fill(255);
    debug_text("FPS: " + to_string(frameRate), 10, 20);
}

/* 
 * this example is based on the Processing example
 * https://processing.org/reference/box_.html
 * and shows how to draw 3D primitives in umfeld.
 */

#include "Umfeld.h"

using namespace umfeld;

void settings() {
    size(400, 400);
}

void setup() {
    noFill();
    g->set_render_mode(RENDER_MODE_IMMEDIATELY);
    g->set_render_mode(RENDER_MODE_SORTED_BY_SUBMISSION_ORDER);
    g->set_render_mode(RENDER_MODE_SORTED_BY_Z_ORDER);

    g->set_stroke_render_mode(STROKE_RENDER_MODE_NATIVE);
    g->set_stroke_render_mode(STROKE_RENDER_MODE_TRIANGULATE_2D);

    profile(PROFILE_3D);
}

void draw() {
    TRACE_FRAME;

    background(216);
    strokeWeight(3);

    stroke(127, 216, 255);
    noFill();
    pushMatrix();
    translate(232, 192, 0);
    rotateY(0.5f);
    box(160);
    popMatrix();

    stroke(255, 63, 89);
    noFill();
    pushMatrix();
    translate(232, 192, 0);
    rotateY(0.5);
    box(160, 80, 200);
    popMatrix();

    stroke(255);
    fill(mouseX / width * 2, 0, 158); // NOTE stroke+filled shapes in render mode 'RENDER_MODE_SORTED_BY_Z_ORDER' do not play well with stroke render mode 'STROKE_RENDER_MODE_TRIANGULATE_2D'
    translate(200, 200, 0);
    rotateX(mouseY * 0.05);
    rotateZ(mouseX * 0.05);
    sphereDetail(mouseX / 4);
    sphere(100);
}

void keyPressed() {
    if (key == ' ') {
        static bool toggle_render_mode = true;
        toggle_render_mode             = !toggle_render_mode;
        if (toggle_render_mode) {
            g->set_render_mode(RENDER_MODE_SORTED_BY_SUBMISSION_ORDER);
            console("RENDER_MODE_SORTED_BY_SUBMISSION_ORDER");
        } else {
            g->set_render_mode(RENDER_MODE_SORTED_BY_Z_ORDER);
            console("RENDER_MODE_SORTED_BY_Z_ORDER");
        }
    }
    if (key == 's') {
        static int switch_stroke_render_mode = 0;
        switch_stroke_render_mode++;
        switch_stroke_render_mode %= 3;
        switch (switch_stroke_render_mode) {
            case 0:
                g->set_stroke_render_mode(STROKE_RENDER_MODE_NATIVE);
                console("STROKE_RENDER_MODE_NATIVE");
                break;
            case 1:
                g->set_stroke_render_mode(STROKE_RENDER_MODE_TRIANGULATE_2D);
                console("STROKE_RENDER_MODE_TRIANGULATE_2D");
                break;
            case 2:
                g->set_stroke_render_mode(STROKE_RENDER_MODE_LINE_SHADER);
                console("STROKE_RENDER_MODE_LINE_SHADER");
                break;
            default:;
        }
    }
}

/*
 * this example shows how to use primitive shapes like arcs and ellipses.
 */

#include "Umfeld.h"

using namespace umfeld;

void settings() {
    size(1024, 768);
}

void draw() {
    background(216);
    fill(255);
    noStroke();
    arc(50, 55, 50, 50, 0, HALF_PI, PIE);
    stroke(0);
    arc(50, 55, 50, 50, 0, HALF_PI, OPEN);
    noFill();
    arc(50, 55, 60, 60, HALF_PI, PI);
    arc(50, 55, 70, 70, PI, PI + QUARTER_PI);
    arc(50, 55, 80, 80, PI + QUARTER_PI, TWO_PI);

    fill(255);
    stroke(0);
    arc(200, 200, 300, 300, 0, PI + QUARTER_PI, OPEN);
    translate(320, 0);
    arc(200, 200, 300, 300, 0, PI + QUARTER_PI, PIE);
    translate(320, 0);
    arc(200, 200, 300, 300, 0, PI + QUARTER_PI, CHORD);

    translate(-640, 320);
    ellipseMode(RADIUS);         // Set ellipseMode to RADIUS
    fill(255);                   // Set fill to white
    ellipse(200, 200, 120, 120); // Draw white ellipse using RADIUS mode

    ellipseMode(CENTER);         // Set ellipseMode to CENTER
    fill(102);                   // Set fill to gray
    ellipse(200, 200, 120, 120); // Draw gray ellipse using CENTER mode

    translate(320, 0);
    ellipseMode(CORNER);         // Set ellipseMode is CORNER
    fill(255);                   // Set fill to white
    ellipse(100, 100, 200, 200); // Draw white ellipse using CORNER mode

    ellipseMode(CORNERS);        // Set ellipseMode to CORNERS
    fill(102);                   // Set fill to gray
    ellipse(100, 100, 200, 200); // Draw gray ellipse using CORNERS mode
}

/* this example shows how to export shapes as OBJ */
// TODO WIP a lot of things are not implemented yet and not tested

#include "Umfeld.h"

using namespace umfeld;

void settings() {
    size(1024, 768);
}

void setup() {
    // g->set_stroke_render_mode(STROKE_RENDER_MODE_NATIVE); // TODO strokes are flattend in some render modes
}

void draw() {
    background(216);

    if (isKeyPressed && key == ' ') {
        beginRecord(OBJ, to_string("example-", frameCount, ".obj"));
    }

    pushMatrix();
    stroke(255);
    fill(127, 216, 255);
    translate(width * 0.33, height * 0.5f, 0);
    rotateX(mouseY * 0.03);
    rotateY(mouseX * 0.07);
    box(width * 0.25f);
    popMatrix();

    pushMatrix();
    stroke(255);
    fill(255, 63, 89);
    translate(width * 0.66, height * 0.5f, 0);
    rotateX(mouseY * 0.05f);
    rotateY(mouseX * 0.05f);
    sphereDetail(mouseX / 40);
    sphere(width * 0.25f);
    popMatrix();

    if (isKeyPressed && key == ' ') {
        endRecord();
    }
}

/* this example shows how to export shapes as PDF */
// TODO WIP a lot of things are not implemented yet and not tested

#include "Umfeld.h"

using namespace umfeld;

void settings() {
    size(1024, 768);
}

void setup() {
    noFill();
}

void draw() {
    background(216);

    if (isKeyPressed && key == ' ') {
        beginRecord(PDF, to_string("example-", frameCount, ".pdf"));
    }

    pushMatrix();
    stroke(255);
    fill(127, 216, 255);
    translate(width * 0.33, height * 0.5f, 0);
    rotateX(mouseY * 0.03);
    rotateY(mouseX * 0.07);
    box(width * 0.25f);
    popMatrix();

    pushMatrix();
    stroke(255);
    fill(255, 63, 89);
    translate(width * 0.66, height * 0.5f, 0);
    rotateX(mouseY * 0.05f);
    rotateY(mouseX * 0.05f);
    sphereDetail(mouseX / 40);
    sphere(width * 0.25f);
    popMatrix();

    if (isKeyPressed && key == ' ') {
        endRecord();
    }
}

/*
 * this example shows how to use `saveFrame()` to save the current frame to a file.
 */

#include "Umfeld.h"
#include "Geometry.h"

using namespace umfeld;

void settings() {
    size(1024, 768);
}

void setup() {
    rectMode(CENTER);
    g->set_render_mode(RENDER_MODE_SORTED_BY_Z_ORDER);
    g->set_render_mode(RENDER_MODE_SORTED_BY_SUBMISSION_ORDER);
    // hint(ENABLE_DEPTH_TEST);
}

void draw() {
    background(216);

    stroke(0);
    fill(127, 216, 255);
    strokeWeight(15);
    strokeJoin(ROUND);
    strokeCap(ROUND);

    pushMatrix();

    translate(width / 2, height / 2);
    rotateY(frameCount * 0.027f);
    rotateZ(frameCount * 0.01f);

    beginShape();
    vertex(-110, -110);
    vertex(110, -110);
    vertex(110, 110);
    vertex(-110, 110);
    endShape(CLOSE);

    popMatrix();

    noStroke();
    fill(255, 63, 89);
    circle(width * 0.5f, height * 0.5f, 55);
}

void keyPressed() {
    if (key == '1') {
        saveFrame();
    }
    if (key == '2') {
        const std::string save_path = selectFolder("Choose a folder");
        if (!save_path.empty()) {
            saveFrame(save_path + "fast-uncompressed-frame.bmp");
        }
    }
}

/*
 * this example shows how to use `saveImage()` to save a PImage to disk.
 */

#include "Umfeld.h"

using namespace umfeld;

PImage* umfeld_image;

void settings() {
    size(1024, 768);
}

void setup() {
    umfeld_image = loadImage("umfeld.png");
}

void draw() {
    background(216);
    image(umfeld_image, mouseX, mouseY);
}

void keyPressed() {
    if (key == ' ') {
        saveImage(umfeld_image, sketchPath() + "image-" + nfs(frameCount, 4) + ".png");
    }
}

#include "Umfeld.h"

using namespace umfeld;

Table* table;

void settings() {
    size(1024, 768);
}

void setup() {

    table = new Table();

    table->addColumn("id");
    table->addColumn("species");
    table->addColumn("name");

    TableRow newRow = table->addRow();
    newRow.setInt("id", table->getRowCount() - 1);
    newRow.setString("species", "Panthera leo");
    newRow.setString("name", "Lion");

    saveTable(table, "data/new.csv");
}

// Sketch saves the following to a file called "new.csv":
// id,species,name
// 0,Panthera leo,Lion

void shutdown() {
    delete table;
}

/*
 * this example shows how to use the beginShape() + endShape() functions to draw a shape with different vertex types.
 * from https://processing.org/reference/beginShape_.html
 */

#include "Umfeld.h"
#include "Geometry.h"

using namespace umfeld;

const color_t light_green = color(171, 255, 0);
const color_t soft_red    = color(255, 63, 89);

int   stroke_join_mode = ROUND;
int   stroke_cap_mode  = ROUND;
float stroke_weight    = 15.0f;

void settings() {
    size(1024, 768);
}

void setup() {}

void draw() {
    background(218);

    fill(100);
    debug_text(nf(mouseX, 0) + ", " + nf(mouseY, 0), 10, 10);

    pushMatrix();

    stroke(0);
    fill(light_green);
    strokeWeight(stroke_weight);
    pointSize(stroke_weight);
    strokeJoin(stroke_join_mode);
    strokeCap(stroke_cap_mode);

    scale(0.66667f);

    beginShape();
    vertex(120, 80);
    vertex(340, 80);
    vertex(340, 300);
    vertex(120, 300);
    endShape(CLOSE);

    translate(280, 0);
    beginShape(POINTS);
    vertex(120, 80);
    vertex(340, 80);
    vertex(340, 300);
    vertex(120, 300);
    endShape();

    translate(280, 0);
    beginShape();
    vertex(120, 80);
    vertex(230, 80);
    vertex(230, 190);
    vertex(340, 190);
    vertex(340, 300);
    vertex(120, 300);
    endShape(CLOSE);

    translate(280, 0);
    beginShape(LINES);
    vertex(120, 80);
    vertex(340, 80);
    vertex(340, 300);
    vertex(120, 300);
    endShape();

    translate(-4 * 280, 280);

    translate(280, 0);
    noFill();
    beginShape();
    vertex(120, 80);
    vertex(340, 80);
    vertex(340, 300);
    vertex(120, 300);
    endShape();

    translate(280, 0);
    noFill();
    beginShape();
    vertex(120, 80);
    vertex(340, 80);
    vertex(340, 300);
    vertex(120, 300);
    endShape(CLOSE);

    stroke(0);
    fill(soft_red);

    translate(280, 0);
    beginShape(TRIANGLES); // TODO disconnected triangles cause line artifacts
    vertex(120, 300);
    vertex(160, 120);
    vertex(200, 300);
    vertex(270, 80);
    vertex(280, 300);
    vertex(320, 80);
    endShape();

    translate(280, 0);
    beginShape(TRIANGLE_STRIP);
    vertex(120, 300);
    vertex(160, 80);
    vertex(200, 300);
    vertex(240, 80);
    vertex(280, 300);
    vertex(320, 80);
    vertex(360, 300);
    endShape();

    translate(-4 * 280, 280);

    translate(280, 0);
    beginShape(TRIANGLE_FAN);
    vertex(230, 200);
    vertex(230, 60);
    vertex(368, 200);
    vertex(230, 340);
    vertex(88, 200);
    vertex(230, 60);
    endShape();

    translate(280, 0);
    beginShape(QUAD_STRIP);
    vertex(120, 80);
    vertex(120, 300);
    vertex(200, 80);
    vertex(200, 300);
    vertex(260, 80);
    vertex(260, 300);
    vertex(340, 80);
    vertex(340, 300);
    endShape();

    translate(280, 0);
    pushMatrix();
    translate(120, 80);
    rotateY((float) frameCount * 0.027f);
    rotateZ((float) frameCount * 0.01f);
    translate(-120, -80);
    beginShape(LINE_STRIP);
    vertex(120, 80);
    vertex(120, 300);
    vertex(200, 300);
    vertex(200, 80);
    vertex(260, 80);
    vertex(260, 300);
    vertex(340, 300);
    vertex(340, 80);
    endShape();
    popMatrix();

    translate(280, 0);
    circle(230, 190, 220);

    translate(280, 0);
    bezier(120, 80 - 560, 120, 300 - 560, 340, 80, 340, 300);

    popMatrix();

    fill(100);
    debug_text(get_frame_statistics().to_string(), 10, 34);
}

void keyPressed() {
    if (key == '-') {
        stroke_weight -= 0.25f;
        if (stroke_weight < 0) { stroke_weight = 0; }
        strokeWeight(stroke_weight);
        console("stroke_weight: ", stroke_weight);
    }
    if (key == '+') {
        stroke_weight += 0.25f;
        strokeWeight(stroke_weight);
        console("stroke_weight: ", stroke_weight);
    }
    if (key == '1') {
        stroke_join_mode = NONE;
        strokeJoin(NONE);
        console("NONE");
    }
    if (key == '2') {
        stroke_join_mode = BEVEL;
        strokeJoin(BEVEL);
        console("BEVEL");
    }
    if (key == '3') {
        stroke_join_mode = MITER;
        strokeJoin(MITER);
        console("MITER");
    }
    if (key == '4') {
        stroke_join_mode = ROUND;
        strokeJoin(ROUND);
        console("ROUND");
    }
    if (key == '5') {
        stroke_join_mode = MITER_FAST;
        strokeJoin(MITER_FAST);
        console("MITER_FAST");
    }
    if (key == '6') {
        stroke_join_mode = BEVEL_FAST;
        strokeJoin(BEVEL_FAST);
        console("BEVEL_FAST");
    }
    if (key == 'q') {
        stroke_cap_mode = POINTED;
        strokeCap(POINTED);
        console("POINTED");
    }
    if (key == 'w') {
        stroke_cap_mode = PROJECT;
        strokeCap(PROJECT);
        console("PROJECT");
    }
    if (key == 'e') {
        stroke_cap_mode = ROUND;
        strokeCap(ROUND);
        console("ROUND");
    }
    if (key == 'r') {
        stroke_cap_mode = SQUARE;
        strokeCap(SQUARE);
        console("SQUARE");
    }
    if (key == 'a') {
        // TODO WIP
        g->set_stroke_render_mode(STROKE_RENDER_MODE_TUBE_3D);
        console("STROKE_RENDER_MODE_TUBE_3D");
    }
    if (key == 's') {
        g->set_stroke_render_mode(STROKE_RENDER_MODE_LINE_SHADER);
        console("STROKE_RENDER_MODE_LINE_SHADER");
    }
    if (key == 'd') {
        g->set_stroke_render_mode(STROKE_RENDER_MODE_TRIANGULATE_2D);
        console("STROKE_RENDER_MODE_TRIANGULATE_2D");
    }
    if (key == 'f') {
        g->set_stroke_render_mode(STROKE_RENDER_MODE_NATIVE);
        console("STROKE_RENDER_MODE_NATIVE");
    }
}

#include "Umfeld.h"

using namespace umfeld;

const color_t light_green = color(171, 255, 0);
const color_t soft_red    = color(255, 63, 89);

void settings() {
    size(1024, 768);
}

void setup() {
    noStroke();
}

void draw() {
    background(216);
    const float size           = 100.0;
    const float diameter_red   = size + sin(frameCount * 0.05) * 15.0;
    const float diameter_green = size + sin(frameCount * 0.033) * 15.0;
    const float x              = width / 2.0;
    const float y              = height / 2.0;
    fill(soft_red);
    circle(x - size * 2.2, y + size, diameter_red);
    fill(light_green);
    circle(x - size, y + size, diameter_green);
}

/*
 * this example shows how to render text and work with typographic attributes
 * from https://processing.org/reference/textAlign_.html
 */

#include "Umfeld.h"

using namespace umfeld;

const color_t light_green = color(171, 255, 0);
const color_t soft_red    = color(255, 63, 89);

PFont* font;

void settings() {
    size(1024, 768);
}

void setup() {
    font = loadFont("RobotoMono-Regular.ttf", 44);

    // font = loadFont("https://www.jacobremin.com/transport/RobotoMono-Regular.ttf", 44);

    // std::string character_atlas = DEFAULT_PFONT_CHARARCTER_ATLAS;
    // character_atlas += "ÄÖÜäöüß"; // add some extra characters to the atlas
    // font = loadFont("RobotoMono-Regular.ttf", 44, character_atlas);

    textFont(font);
}

void draw() {
    background(216);

    noStroke();
    stroke(0);
    pushMatrix();
    translate(100, 100);
    fill(light_green);
    textSize(map(mouseX, 0, width, 10, 88));
    textAlign(CENTER, BOTTOM);
    line(0, 120, width - 200, 120);
    text("CENTER,BOTTOM", 200, 120);
    textAlign(CENTER, CENTER);
    line(0, 200, width - 200, 200);
    text("CENTER,CENTER", 200, 200);
    textAlign(CENTER, BASELINE);
    line(0, 280, width - 200, 280);
    text("CENTER,BASELINE", 200, 280);
    textAlign(CENTER, TOP);
    line(0, 360, width - 200, 360);
    text("CENTER,TOP", 200, 360);

    fill(soft_red);
    translate(width / 2, 0);
    textAlign(RIGHT);
    text("ABCD", 200, 120);
    textAlign(CENTER);
    text("EFGH", 200, 200);
    textAlign(LEFT);
    text("IJKL", 200, 280);
    textAlign(CENTER);
    textLeading(map(mouseY, 0, height, 0, 88));
    text(nf(textAscent(), 2) + "\n" + nf(textDescent(), 2), 200, 360);
    popMatrix();

    /* --- BONUS: still a bit EXPERIMENTAL but outlines can be extracted from fonts ( curves are not implemented yet ) --- */
    noFill();
    stroke(0);
    std::vector<std::vector<glm::vec2>> outlines;
    font->outline(nf(mouseY), outlines);
    pushMatrix();
    translate(mouseX, mouseY);
    for (const auto& outline: outlines) {
        beginShape(LINE_STRIP);
        for (const auto& v: outline) {
            vertex(v.x, v.y);
        }
        endShape();
    }
    popMatrix();
}

/**
 * Array.
 *
 * An array is a list of data. Each piece of data in an array
 * is identified by an index number representing its position in
 * the array. Arrays are zero based, which means that the first
 * element in the array is [0], the second element is [1], and so on.
 * In this example, an array named "coswave" is created and
 * filled with the cosine values. This data is displayed three
 * separate ways on the screen.
 */

#include "Umfeld.h"

using namespace umfeld;

float* coswave; // @diff("arrays are declared slightly differntly in Processing `float[] coswave`")

void settings() {
    size(640, 360);
}

void setup() {
    coswave = new float[(int) width];
    for (int i = 0; i < width; i++) {
        float amount = map(i, 0, width, 0, PI);
        coswave[i]   = abs(cos(amount));
    }
    background(255);
    noLoop();
}

void draw() {

    int y1 = 0;
    int y2 = height/3;
    for (int i = 0; i < width; i++) {
        stroke(coswave[i]*255);
        line(i, y1, i, y2);
    }

    y1 = y2;
    y2 = y1 + y1;
    for (int i = 0; i < width; i++) {
        stroke(coswave[i]*255 / 4);
        line(i, y1, i, y2);
    }

    y1 = y2;
    y2 = height;
    for (int i = 0; i < width; i++) {
        stroke(255 - coswave[i]*255);
        line(i, y1, i, y2);
    }
}

// TODO there is a visible white line artifact at the very right of the screen. check screen width.

/**
 * Array 2D. 
 * 
 * Demonstrates the syntax for creating a two-dimensional (2D) array.
 * Values in a 2D array are accessed through two index values.  
 * 2D arrays are useful for storing images. In this example, each dot 
 * is colored in relation to its distance from the center of the image. 
 */

// TODO @diff(points are currently only rendered as rectangles ( not circles ))

#include "Umfeld.h"

using namespace umfeld;

float distances[640][360]; // @diff(array size must be defined when array is declared; alternatively use `std::vector`)
float maxDistance;
int   spacer;

void settings() {
    size(640, 360);
}

void setup() {
    maxDistance = dist(width / 2.f, height / 2.f, width, height);
    // distances = new float[width][height]; // @diff(array size must be defined when array is declared; alternatively use `std::vector`)
    for (int y = 0; y < height; y++) {
        for (int x = 0; x < width; x++) {
            float distance  = dist(width / 2, height / 2, x, y);
            distances[x][y] = distance / maxDistance * 255;
        }
    }
    spacer = 10;
    strokeWeight(6);
    noLoop(); // Run once and stop
}

void draw() {
    background(0);
    // This embedded loop skips over values in the arrays based on
    // the spacer variable, so there are more values in the array
    // than are drawn here. Change the value of the spacer variable
    // to change the density of the points
    for (int y = 0; y < height; y += spacer) {
        for (int x = 0; x < width; x += spacer) {
            stroke(distances[x][y]);
            point(x + spacer / 2, y + spacer / 2);
        }
    }
}

/**
 * Array Objects. 
 * 
 * Demonstrates the syntax for creating an array of custom objects. 
 */

#include "Umfeld.h"
#include "module.h"

using namespace umfeld;

int                 unit = 40;
int                 count;
std::vector<Module> mods; // @diff(std::vector)

void settings() {
    size(640, 360);
}

void setup() {
    noStroke();
    int wideCount = width / unit;
    int highCount = height / unit;
    count         = wideCount * highCount;
    mods          = std::vector<Module>(count);

    int index = 0;
    for (int y = 0; y < highCount; y++) {
        for (int x = 0; x < wideCount; x++) {
            mods[index++] = Module(
                x * unit,
                y * unit,
                (int) (unit / 2),
                (int) (unit / 2),
                random(0.05, 0.8),
                unit);
        }
    }
}

void draw() {
    background(0);
    for (Module& mod: mods) { // @diff(range_based_for_loop)
        mod.update();
        mod.display();
    }
}

/**
 * Move Eye. 
 * by Simon Greenwold.
 * 
 * The camera lifts up (controlled by mouseY) while looking at the same point.
 */


#include "Umfeld.h" // @diff(include)

using namespace umfeld;

void settings() {
    size(640, 360);
}

void setup() {
    fill(204);
    hint(ENABLE_DEPTH_TEST); // @note(available_hints)
}

void draw() {
    lights();
    background(0);
                                // ...existing code...
    stroke(255);
    camera(30.0, mouseY, 220.0, // eyeX, eyeY, eyeZ
           0.0, 0.0, 0.0,       // centerX, centerY, centerZ
           0.0, 1.0, 0.0);      // upX, upY, upZ

    noStroke();
    box(90);
    stroke(255);
    line(-100, 0, 0, 100, 0, 0);
    line(0, -100, 0, 0, 100, 0);
    line(0, 0, -100, 0, 0, 100);

    noLights();
}

/**
 * Perspective vs. Ortho
 *
 * Move the mouse left to right to change the "far" 
 * parameter for the perspective() and ortho() functions.
 * This parameter sets the maximum distance from the 
 * origin away from the viewer and will clip the geometry.
 * Click a mouse button to switch between the perspective and
 * orthographic projections.
 */

#include "Umfeld.h" // @diff(include)

using namespace umfeld;

bool showPerspective = false;

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

void setup() {
    noFill();
    fill(255); // when exeeding 1.f, shadow disappears in lighting, seems to need internal clamping? Do test with a big value like 10.f -- but unrelated to this example tho..

    noStroke();
    hint(ENABLE_DEPTH_TEST); // @diff(hints)
}

void draw() {
    background(0);
    lights();
    float far = map(mouseX, 0, width, 120, 400);
    if (showPerspective == true) {
        perspective(PI / 3.0, float(width) / float(height), 10, far); // FIXME: disables the light completely
    } else {
        ortho(-width / 2.0, width / 2.0, -height / 2.0, height / 2.0, 10, far); // FIXME: disables the light completely
    }
    translate(width / 2, height / 2, 0);
    rotateX(-PI / 6);
    rotateY(PI / 3);
    box(180);

    noLights();
}

void mousePressed() {
    showPerspective = !showPerspective;
}

/*
note:
- `pespective()` and `ortho()` disables the `lights()`.
*/

/**
 * Perspective. 
 * 
 * Move the mouse left and right to change the field of view (fov).
 * Click to modify the aspect ratio. The perspective() function
 * sets a perspective projection applying foreshortening, making 
 * distant objects appear smaller than closer ones. The parameters 
 * define a viewing volume with the shape of truncated pyramid. 
 * Objects near to the front of the volume appear their actual size, 
 * while farther objects appear smaller. This projection simulates 
 * the perspective of the world more accurately than orthographic projection. 
 * The version of perspective without parameters sets the default 
 * perspective and the version with four parameters allows the programmer 
 * to set the area precisely.
 */
#include "Umfeld.h" // @diff(include)

using namespace umfeld;

bool  showPerspective = false;
float aspect;


void settings() {
    size(640, 360);
}

void setup() {
    noStroke();
    fill(255);
    hint(ENABLE_DEPTH_TEST); // @diff(available_hints)
}

void draw() {
    background(0);
    lights();
    float cameraY = height / 2.f;
    float fov     = mouseX / width * PI / 2.f;
    float cameraZ = cameraY / tanf(fov / 2.f);

    perspective(fov, aspect, cameraZ / 10.f, cameraZ * 10.f); // FIXME: this disables the light

    translate(width / 2.f + 30.f, height / 2.f, 0.f);
    rotateX(-PI / 6.f);
    rotateY(PI / 3.f + mouseY / height * PI);
    box(45.f);
    translate(0.f, 0.f, -50.f);
    box(30.f);

    noLights();
}

void mousePressed() {
    aspect = aspect / 2.f;
}
void mouseReleased() {
    aspect = width / height;
}

/*
note:
- `pespective()` and `ortho()` disables the `lights()`.
*/

/**
 * Brightness 
 * by Rusty Robison. 
 * 
 * Brightness is the relative lightness or darkness of a color.
 * Move the cursor vertically over each bar to alter its brightness. 
 */
#include "Umfeld.h"
#include "glm/gtx/color_space.hpp"

using namespace umfeld;

int barWidth = 20;
int lastBar  = -1;

void settings() {
    size(640, 360);
}

void setup() {
    noStroke();
    background(0);
}

void draw() {
    int whichBar = mouseX / barWidth;
    if (whichBar != lastBar) {
        int barX = whichBar * barWidth;

        // the glm rgbColor function expects the hue to be in degrees (0-360), saturation (0-1), and brightness (0-1).
        glm::vec3 hsv(
            // hue: 0~width -> 0~360
            (static_cast<float>(barX) / width) * 360.0f,
            // saturation: always max 100% -> 1.0
            1.0f,
            // brightness: 0~height -> 0~1
            static_cast<float>(mouseY) / height);

        // Use GLM to convert HSV to RGB
        glm::vec3 rgb = glm::rgbColor(hsv);
        fill(rgb.r * 255.0f, rgb.g * 255.0f, rgb.b * 255.0f);
        rect(barX, 0, barWidth, height);
        lastBar = whichBar;
    }
}

/**
 * Color Variables (Homage to Albers). 
 * 
 * This example creates variables for colors that may be referred to 
 * in the program by a name, rather than a number. 
 */

#include "Umfeld.h"

using namespace umfeld;

color_t inside  = color(204, 102, 0);
color_t middle  = color(204, 153, 0);
color_t outside = color(153, 51, 0);

void settings() {
    size(640, 360);
}

void setup() {
    noStroke();
    background(50, 0, 0);
}

void draw() {
    pushMatrix();
    translate(80, 80);
    fill(outside);
    rect(0, 0, 200, 200);
    fill(middle);
    rect(40, 60, 120, 120);
    fill(inside);
    rect(60, 90, 80, 80);
    popMatrix();

    pushMatrix();
    translate(360, 80);
    fill(inside);
    rect(0, 0, 200, 200);
    fill(outside);
    rect(40, 60, 120, 120);
    fill(middle);
    rect(60, 90, 80, 80);
    popMatrix();
}

/**
 * Hue. 
 * 
 * Hue is the color reflected from or transmitted through an object 
 * and is typically referred to as the name of the color such as 
 * red, blue, or yellow. In this example, move the cursor vertically 
 * over each bar to alter its hue. 
 */

#include "Umfeld.h"
#include "glm/gtx/color_space.hpp"

using namespace umfeld;

int barWidth = 20;
int lastBar  = -1;

void settings() {
    size(640, 360);
}

void setup() {
    noStroke();
    background(0);
}

void draw() {
    int whichBar = mouseX / barWidth;
    if (whichBar != lastBar) {
        int barX = whichBar * barWidth;

        // normalize the hsv values to the range 0-1
        float hue        = mouseY / float(height);
        float saturation = 1.0f;
        float brightness = 1.0f;

        // use glm functions to convert HSV to RGB
        glm::vec3 hsv(hue * 360.0f, saturation, brightness);
        glm::vec3 rgb = glm::rgbColor(hsv);

        fill(rgb.r * 255.0f, rgb.g * 255.0f, rgb.b * 255.0f);
        rect(barX, 0, barWidth, height);
        lastBar = whichBar;
    }
}

/**
 * Simple Linear Gradient 
 * 
 * The lerpColor() function is useful for interpolating
 * between two colors.
 */
#include "Umfeld.h"

using namespace umfeld;

int      Y_AXIS = 1;
int      X_AXIS = 2;
uint32_t b1, b2, c1, c2; //@diff(color_type)

void setGradient(int x, int y, float w, float h, uint32_t c1, uint32_t c2, int axis); //@diff(forward_declaration)


void settings() {
    size(640, 360);
}

void setup() {
    b1 = color(255);
    b2 = color(0);
    c1 = color(204, 102, 0);
    c2 = color(0, 102, 153);

    noLoop();
}

void draw() {
    // Background
    setGradient(0, 0, width / 2, height, b1, b2, X_AXIS);
    setGradient(width / 2, 0, width / 2, height, b2, b1, X_AXIS);
    // Foreground
    setGradient(50, 90, 540, 80, c1, c2, Y_AXIS);
    setGradient(50, 190, 540, 80, c2, c1, X_AXIS);
}

void setGradient(int x, int y, float w, float h, uint32_t c1, uint32_t c2, int axis) {

    noFill();

    if (axis == Y_AXIS) { // Top to bottom gradient
        for (int i = y; i <= y + h; i++) {
            float    inter = map(i, y, y + h, 0, 1);
            uint32_t c     = lerpColor(c1, c2, inter);
            stroke_color(c);
            line(x, i, x + w, i);
        }
    } else if (axis == X_AXIS) { // Left to right gradient
        for (int i = x; i <= x + w; i++) {
            float    inter = map(i, x, x + w, 0, 1);
            uint32_t c     = lerpColor(c1, c2, inter);
            stroke_color(c);
            line(i, y, i, y + h);
        }
    }
}