# Streaming bitmap data

### Streaming bitmap data from Processing to TouchDesigner: Syphon

{% embed url="https://syphon.github.io" %}

{% embed url="https://github.com/syphon" %}

If you encounter compatability issues with Apples M1/M2/M3/M4 chips use the x64-Version of Processing:

{% embed url="https://github.com/processing/processing4/releases/download/processing-1293-4.3/processing-4.3-macos-x64.zip" %}

{% code lineNumbers="true" %}
```java
/**
 * This Processing sketch creates a rotating 3D box and streams it using Syphon.
 * It demonstrates off-screen rendering and real-time graphics streaming.
 */
 
import codeanticode.syphon.*;
SyphonServer server;
PGraphics canvas;

void setup() {
    // Initialize the sketch window with 3D renderer
    size(800, 800, P3D);
    // Create a new Syphon server named "P5 Stream"
    server = new SyphonServer(this, "P5 Stream");
    // Create an off-screen graphics buffer matching window dimensions
    canvas = createGraphics(800, 800, P3D);
}

void draw() {
    // Begin drawing to the off-screen canvas
    canvas.beginDraw();
    // Set color mode to HSB (Hue, Saturation, Brightness)
    canvas.colorMode(HSB);
    // Clear canvas with black background
    canvas.background(0);
    // Enable default lighting
    canvas.lights();
    // Move coordinate system to center of canvas
    canvas.translate(width/2, height/2);
    // Rotate the scene slowly over time
    canvas.rotateX(frameCount * 0.01);    // Rotation around X axis
    canvas.rotateY(frameCount * 0.01);    // Rotation around Y axis
    // Commented out animated hue calculation
    //float h = map(sin(frameCount/1000.0),-1,1, 0, 255);
    // Set fixed hue value
    float h = 200;
    // Set fill color (hue=200, saturation=150, brightness=200)
    canvas.fill(h, 150, 200);
    // Draw a box with size 450
    canvas.box(450);
    // Finish drawing to the canvas
    canvas.endDraw();
    // Display the canvas in the sketch window
    image(canvas, 0, 0);
    // Stream the canvas content through Syphon
    server.sendImage(canvas);
}
```
{% endcode %}

###
