The examples written here are examples and not exhaustive. We would want you to define your own flows during the project and to proposed which ones are priority to the web editor experience to secure.

Riso printing is so cool! Exciting! Are you using p5.riso?

Please post a local thread as PCD @ Chicago 2026 in the Community category (make sure to use the pcd tag). I’ll add it to the event on the map so it’s easier for ppl to join!

event description

The Center for Concrete and Abstract Machine and Peripheral Study is hosting a Chicago-based meeting of Processing Community Day in October 2026. We’ll be celebrating 25 years of Processing with workshops, talks, and presentations at Co-Prosperity in Bridgeport.

The programming is still firming up, but participants will learn how to use p5.js to create images to print on Co-Pro’s risograph :0

#!/usr/bin/env node

// @ts-check

// https://Discourse.Processing.org/t/
// control-variables-and-method-created-while-a-program-is-running/47995/26

"use strict";

class Sealer {
  /**
   * @protected
   * @throws {TypeError}
   */
  constructor() {
    if (Sealer._sealInstance(this)) throw TypeError(
      "Sealer is an abstract utility super class and cannot be instantiated!");
  }

  /**
   * Seals `instance` if its *constructor* is the invoking class itself.
   * Prevents further property additions after constructor completes.
   *
   * @protected
   *
   * @param {Sealer} instance - object to be conditionally sealed
   *
   * @returns {boolean} whether `instance` got sealed or not 
   */
  static _sealInstance(instance) {
    const isBottomClass = instance.constructor == this;
    isBottomClass && Object.preventExtensions(instance);
    return isBottomClass;
  }
}

class A extends Sealer {
  /**
   * Creates a new being with the given name.
   *
   * @param {string} name - the name for the being
   */
  constructor(name) {
    super();

    /** the name for the being */ this.name = name;

    A._sealInstance(this); // Seal it only if this instance is exactly type A!
  }
}

class B extends A {
  /**
   * Creates a new animal with name, type and favorite food.
   *
   * @param {string} name - the name for the animal
   * @param {string} animal - kind of animal
   * @param {string} food - favorite food of the animal
   */
  constructor(name, animal, food) {
    super(name);

    // Redundant re-assignment to change prop name's IntelliSense description:
    /** the name for the animal */ this.name = this.name;

    /** kind of animal */ this.animal = animal;
    /** favorite food of the animal */ this.food = food;

    B._sealInstance(this); // Seal it only if this instance is exactly type B!
  }
}

class Pet extends B {
  /**
   * Creates a new pet with name, type and favorite food.
   *
   * @param {string} name - the name for the pet
   * @param {string} animal - kind of pet
   * @param {string} food - favorite food of the pet
   */
  constructor(name, animal, food) {
    super(name, animal, food);

    Pet._sealInstance(this); // Seal it only if this instance is type Pet!
  }

  feed() {
    const { name, animal, food } = this;
    console.info(name, "the", animal, "eats the delicious", food);
  }

  pet() {
    const { name, animal } = this;
    console.info(name, "the", animal, "loves to be petted!");
  }
}

const a = new A("Thor");

try {
  a.weapon = "hammer"; // Prop 'weapon' does not exist on type 'A' ts(2339)
} catch (err) {
  console.warn("Class A is sealed & prohibits additional properties!\n", err);
}

console.log(a.name); // "Thor"
console.table(a);

const b = new B("Pengo", "penguin", "fish");

// 1. IntelliSense recognizes props "name", "animal" & "food" as strings:
console.log('\n', b.name, b.animal, b.food, '\n'); // "Pengo" "penguin" "fish"

// 2. Sealed object safety works! Property "color" is rejected by the linter:
try {
  b.color = "gray"; // Property 'color' does not exist on type 'B' ts(2339)
} catch (err) {
  console.warn("Class B is sealed & prohibits additional properties!\n", err);
}

// 3. Runtime works:
// The object is sealed, and no class fields were generated to crash it.
console.table(b);

const { name: pet, animal, food } = b;
const c = new Pet(pet, animal, food);

try {
  c.sleep = function () { // Prop 'sleep' doesn't exist on type 'Pet' ts(2339)
    const { name, animal } = this;
    console.info(name, "the", animal, "is dreaming right now!");
  };
} catch (err) {
  console.warn("Class Pet is sealed & prohibits additional props!\n", err);
}

console.table(c);
c.feed(); c.pet();

I recently contributed to the dev-2.0 branch by filing issue 8621 (replacing raw console.log calls with FES across Data, DOM, Events, and Image modules) and PR 8622 for the same.

While auditing the codebase, I noticed there are ~20+ raw console.log calls in the WebGL modules on dev-2.0 that appear to be leftover debug statements leaking to the user console.

These are in:

ShapeBuilder.js — tesselation error/debug callbacks (L441, L446-447)

p5.Shader.js — inspectHooks() dumps shader info to console (L146-166)

p5.RendererGL.js — multiple debug logs (L253, L295, L308, L354, L541)

p5.Camera.js — debug logs (L209, L216)

webgl/text.js — debug logs (L677, L687)

webgl/utils.js — debug logs (L279, L316)

3d_primitives.js — multiple debug logs (L1701, L2246, L2330, L2394, L2435, L2476, L2544)

Would it be appropriate to file an issue to clean these up? Some could be replaced with p5._friendlyError(), and others (pure debug leftovers) could be removed entirely.

One question: p5.Shader.inspectHooks() seems like an intentional debug utility — should that be left as-is, or should it also be updated?

Happy to open an issue and a PR for this if the approach sounds good.

is there a way to add the static _sealInstance() method to the Object class ?

You see what I mean ! lol

quark:

I know I can be a little pedantic when it comes to syntax and semantics

What you call pedantic is really precision! Never change.

In coding and technical work, precision and correctness matter because small differences in syntax and semantics can change meaning and behavior.

:)

After exploring the translation tracker workflow, I had a few ideas that might improve the contributor experience:

1. Translation Progress Dashboard – A small dashboard showing translation completion across languages and sections of the documentation.

2. Automatic Stub Generation – When a new English example is added, automatically create placeholder translation files for other languages.

3. Improved Issue–PR Workflow – Automatically close translation issues when the corresponding PR is merged.

4. Better Contributor Onboarding – A CLI script or documentation to help new translators set up the environment quickly.

I’m currently exploring the codebase under .github/actions/translation-tracker and testing how the commit comparison works.

Would love to hear your thoughts on which of these directions might be most useful for the project.

Thanks!

Mi nombre es Nicolás. Soy diseñador en Santiago de Chile y enseño programación creativa a estudiantes universitarios. En 2019 participé en el Processing Community Day como coorganizador y además impartí un workshop.

Estoy muy interesado en organizar nuevamente un PCD en Santiago o en alguna otra ciudad de Chile.

Hello,

My name is Nicolás. I’m a designer based in Santiago, Chile, and I teach creative coding to university students. In 2019, I participated in Processing Community Day as a co-organizer and also led a workshop.

I’m very interested in organizing a PCD again in Santiago or in another city in Chile.

Let’s organize a Processing Community Day in Denver

I added a very simple compass image to visualize the actual mouse movement.
I had some code buried away in the forum that I used to make it.
It helped me! The mouse movement was needing attention on my end.

This is your code with the image added.
I moved all of your PGraphic to a function (not included).

You can modify to have mouse move along the compass and update!
Example:
Vector / Examples / Processing.org

You text and code is much cleaner in your last example! I noticed.

Have fun!

Looking forward to the organizer’s kit!

Also, my website is www.leileixia.com if that is of any of yours interest!

Starting a place to check how we can make one or multiple PCD events in The Netherlands.

Let me know if anyone have any plans.

If you’re interested in organizing a PCD in Amsterdam, let’s get in touch!

I am a creative technologist and also part time lecturer in creative computing at Bath Spa University, which maybe could provide a venue.

Thank you for the clarification on commit dates, that makes complete sense, i’ll drop the hash-based sync tracking then.

Regarding displaying translation data on the website UI, i think a more feasible approach would be a lightweight GitHub Pages based status page, which will be generated automatically from the manifest JSON files the tracker produces.

This would:

1. give contributors clear visibility on what needs translation for every language.
2. avoid touching the main website entirely
3. make auto-update every time the tracker runs

Would this direction make sense, or do you see any limitations with this approach?

Also noted on the README updates, I’ll make sure my proposal doesn’t overlap with that!

I’ll share more information in this thread after the info session and when we have got the ball rolling here.

philtkp:

going try it on some of the one’s i have here, mpu9250, GY80, gy521, BNO055

I remember my first experience with the BNO055!
The yaw, pitch and roll were a firmware bug and I had to use quaternions and convert to Euler angles!
That was a challenge I overcame.

You topic has inspired me to revisit some of my projects.

:)

int heading = 360-(degree)%360; to get it to go from N to S with the proper heading. I wish i was able to step thru the code. but I haven’t been able to get the debug part of it to work for me. I’ll look at this code.Thanks for the help!

here’s my code so far

 // LINEAR COMPASS
PGraphics hdg;

float degree1;
int degree = 0;
int heading = 0;

//
// ---------------------------------------------------------------
//
void setup()
{
// init
size(800, 600);
hdg = createGraphics(360,50);
} // func

void draw()
{
degree1=map(mouseX, 0, width, 0, 4*360);
degree=int(degree1%360);

hdg.beginDraw();
hdg.background(255);

// black rect (the whole compass)
hdg.noFill();
hdg.stroke(0); //Black
hdg.rect(0, 0, 359, 49);

// yellow rect (the display)
hdg.fill(255,255,2);
hdg.rect(0, 25, 359, 24);

// yellow triangle

hdg.stroke(0);// black
hdg.fill(255, 255, 2); // yellow

hdg.triangle(180-5, 18, 180+5, 18, 180, 24);

int heading = 360-(degree)%360;

// DISPLAY DEGREES
//if (heading >= 360) heading = 0;
hdg.stroke(0);// black
hdg.fill(0); //  black
hdg.textAlign(CENTER);
hdg.textSize(16);
hdg.text(heading,180, 15);

// DRAW BLACK DEGREE MARKS
hdg.stroke(0); // black
int lengthLine = 0;
for (int i=0; i < 360; i+=5)
{
if (i%90==0) {
lengthLine=9;
}
else if(i%45==0){
lengthLine=6;
}
else
{
lengthLine=3;
}
hdg.line((degree+i)%360, 26, (degree+i)%360, 26+lengthLine);
hdg.fill(0);

}
hdg.textSize(14);
hdg.text(“S”, (degree+360)%360, 47);
hdg.text(“N”, (degree+180)%360, 47);
hdg.text(“E”, (degree+270)%360, 47);
hdg.text(“W”, (degree+450)%360, 47);
hdg.textSize(10);
hdg.text(“NW”, (degree+495)%360, 45);
hdg.text(“NE”, (degree+225)%360, 45);
hdg.text(“SE”, (degree+315)%360, 45);
hdg.text(“SW”, (degree+405)%360, 45);
// red line in display
hdg.stroke(255, 2, 2); // red
hdg.line(180, 26, 180, 48);

hdg.endDraw();
image(hdg, 240, 275);

// print(" ",degree);
println(heading,-degree1%360);
}

philtkp:

MPU(I2C)

Hello,

Which MPU(I2C) are you using?

I made some adjustments to your last code to sort out some of the issues:

It now moves N > E > S > W as angle increases.

Sometimes it helps to simplify the code, start from scratch and\or rethink it rather than patch it.

Even some time away helps!

:)

88 characters now!
Looped it backwards for this version.

setup=_=>{for(j=256;j--;)r=random([0,m=6.25]),x=j&15,line(x*m+r,y=(j>>4)*m,x*m+m-r,y+m)}

Note:

// Default screen size is 100x100
// Grid is 16x16
// Spacing is 100/16 = 6.25
// You can modify the 6.25 but it was left as is for correct spacing.
// m=6 makes each grid cell 6 pixels wide and tall, so the 16×16 tile maze becomes 96×96 instead of 100x100 total size.

r=random([0,m=6.25]), //100/16 = 6.25

:)

You’re right there is a reporting system for p5.js, that we are planning to integrate into Processing4. It is the intention of the contributor who developed the reporting system to add that to Processing4, so it’s already sort of on the roadmap.

Thanks @kit for the template, I now have the clearer idea of how to approach writing it .
I have been exploring the Processing repositories and discussions while trying to understand the codebase. Recently I started looking into the eyedropper tool, since while using the website I noticed how useful this feature would be, especially when working with colours from the canvas.
Excited to keep learning from the discussions here and contribute where I can.

philtkp:

on this one i wont mind seeing the sketch. I’ve never tried to use images.

Sorry I didn’t make myself clear. The compass scale image was created using your code (with slight modifications) the only difference being it was created once and is drawn in a position to reflect the heading.

In the sketch I create a clipping zone the same size as the compass scale then I draw the image 3 times to make sure that I fill in any gaps at the left or right of the compass. This is much more efficient that recreating the compass scale for every heading because drawing an image and clipping is a very fast operation for Java.

Here is the sketch if you have any questions about it please ask.

PGraphics compassScale;
float angle = 0;

void setup() {
  size(400, 120);
  cursor(HAND);
  compassScale = createCompassScale();
}

void draw() {
  background(220);
  updateAngle();
  drawCompass((width - 360)/2, height/2 - 20, angle);
}


void updateAngle() {
  // Rate will increase rapidly as the mouse moves towards the sides of the display
  float rate = 0.02 * tan(radians(map(mouseX, 0, width, -80, 80)));
  // Create a dead zone near the centre
  if(abs(rate) < 0.002) rate = 0;
  angle += degrees(rate);
  // Force the angle into the range >=0 and <360
  while(angle < 0) angle += 360;
  while(angle >= 360) angle -= 360;
}

// Draw linear compass heading (degrees)
// posX, posY = top-left corner display position
// angle the heading in degrees (must be in range >=0 and <360
void drawCompass(float posX, float posY, float angle) {
  push();
  translate(posX, posY);
  fill(255);
  noStroke();
  rect(0, 0, 360, 40);

  // DRAW SCALE
  clip(0, 20, 360, 40);
  float mark = 180; // compass marker position
  // Draw scale under compass marker / gratuicule
  image(compassScale, mark - angle, 20);
  // Fill any gaps to the left
  image(compassScale, mark - angle - 360, 20);
  // Fill any gaps to the right
  image(compassScale, mark +360 - angle, 20);
  noClip();

  // RED GRATICULE LINE
  stroke(255, 0, 0);
  strokeWeight(1);
  line(mark, 20, mark, 38);

  // TRIANGLE MARKER
  fill(255, 255, 2);
  stroke(0);
  triangle(mark, 20, mark - 6, 13, mark + 6, 13);

  // ANGLE TEXT
  textAlign(CENTER, TOP);
  textSize(12);
  fill(0);
  noStroke();
  text(""+ floor(angle), mark - 30, 1, 60, 20);

  // COMPASS BORDER
  noFill();
  stroke(0);
  rect(0, 0, 360, 40);

  pop();
}

PGraphics createCompassScale() {
  PGraphics cs = createGraphics(360, 20);
  cs.beginDraw();
  cs.background(255, 255, 2);

  // DISPLAY DEGREES
  cs.stroke(0);// black
  cs.fill(0); //  black
  cs.textAlign(CENTER);

  // DRAW BLACK DEGREE MARKS
  cs.stroke(0); // black
  cs.strokeWeight(1.2);
  for (int i = 0; i < 360; i += 5) {
    cs.line(i, 0, i, 4);
  }
  for (int i = 0; i < 360; i += 30) {
    cs.line(i, 0, i, 8);
  }
  cs.line(0, 0, 360, 0);

  // DRAW COMPASS POINTS
  cs.textAlign(CENTER, TOP);
  cs.textSize(12);
  cs.noStroke();
  cs.fill(0);
  String pts = "NESWN";
  for (int i=0; i<pts.length(); i++) {
    cs.text(""+pts.charAt(i), i * 90 - 10, 10, 20, 12);
  }
  cs.endDraw();
  cs.save("cs.png");
  return cs;
}

I would like to propose two things for my GSoC project:

1. Add missing visual regression tests for Processing4 functions like shapes, blend modes, typography, transforms

2. Implement an HTML test report system for Processing4 — showing expected image, actual image, and diff image when a test fails — so developers can easily understand what changed

Is this a good direction for my GSoC proposal?

the only place I could find was

hdg.line((degree+i)%360, 21, (degree+i)%360, 21+lengthLine);

but it still was unable to get it to wrap

Try this in original code in the first post in the correct location.

(degree+i)%360 // Take modulus of sum

It also helps to use println() statements in your code you help understand the values.

The modulo operator can take some time to wrap your head around. No pun intended!

:)

this is where I’m at. I changed a few things to mirror some of your code. I’m closer but, still have a glitch.

// LINEAR COMPASS
PGraphics hdg;

int compassScale = 360;
int degree = 0; 
int degree1 = degree%compassScale;
//
// ---------------------------------------------------------------
//
void setup()
{
  // init
  size(800, 600);
  hdg = createGraphics(360,40);
} // func 
 
void draw() 
{ 
 degree = (int)map(mouseX, 0, 360, 0, 2*compassScale);
 //text(degree,mouseX,mouseY, 11);
   // DISPLAY DEGREES
 hdg.stroke(0);// black
 hdg.fill(0); //  black 
 hdg.textAlign(CENTER);
 //text(degree1,180, 11); 
 

 hdg.beginDraw();
 hdg.background(255);

// black rect (the whole compass)
 hdg.noFill();
 hdg.stroke(0); //Black
 hdg.rect(0, 0, 359, 39);
  
  // yellow rect (the display)
  
 hdg.fill(255,255,2);
 hdg.rect(0, 20, 359, 19);
  
  // yellow triangle 
   
 hdg.stroke(0);// black
 hdg.fill(255, 255, 2); // yellow 
  
 hdg.triangle(180-5, 13, 180+5, 13, 180, 19);
  
  int degree1 = degree%compassScale;
  
  println(degree, degree1);
  // DISPLAY DEGREES
 hdg.stroke(0);// black
 hdg.fill(0); //  black 
 hdg.textAlign(CENTER);
 hdg.text(degree1,180, 11); 
  
 // DRAW BLACK DEGREE MARKS
 hdg.stroke(0); // black
 int lengthLine = 0;  

 for (int i=90; i < 450; i+=5) {
  if (i%90==0) { 
     lengthLine=8;
   } 
   else if (i%20==0){
     lengthLine=5;
   }
   else   
   {
     lengthLine=3;
   }
   hdg.line(-degree1%360+i, 21, -degree1%360+i, 21+lengthLine);
   hdg.fill(0);
   hdg.text("N", -degree1+180, 38);
   hdg.text("E", -degree1+270, 38);
   hdg.text("S", -degree1+360, 38);
   hdg.text("W", -degree1+450, 38);
  }
  
    // red line in display
 hdg.stroke(255, 2, 2); // red
 hdg.line(180, 21, 180, 39);
  
 hdg.endDraw();
 image(hdg, 220, 280);
 

}

Small bug:

I am sure it is a simple fix on your end.

Note:
I offset my image by 8 pixels so I did not have to split a glyph.
Not sure what smoothing does on the edges and gave the glyph some breathing room.

:)

philtkp:

I’ve never tried to use images

get() / Reference / Processing.org

Minimal example:

Your code was used to make the compass.
I then sliced it with PImage.get() and moved it around.

I offset the slices:

You still need to move modify x for correct placement and wrapping around.
I encourage you to work through this one on your own.

Note: I had an offset of 8 pixels for the glyphs. The code needs more work to align everything.

:)

And then position it according to the heading. I created a sketch using this approach and this video shows it in action.

Linear Compass created with Processsing

The code is modular so would be easy to incorporate into your own sketch. For instance in my sketch the draw method for my sketch is just this.

void draw() {
  background(220);
  updateAngle();
  drawCompass((width - 360)/2, height/2 - 20, angle);
}

the drawCompass call requires just 3 parameters, the first 2 control where it is displayed and the third the heading in degrees.

If you want the sketch code I can post it here but I fully understand if you want to create the linear compass yourself.

My name is Benoit, I am a Professor in Computer Science in Montreal, Canada and I teach a graduate course on algorithmic art at Université de Montréal ( GitHub - rethread-studio/algorithmic-art-course: Collection of resources for the algorithmic art course at the Université de Montréal · GitHub ).

I’d love to have a PCD in Montreal, at Université de Montréal or another University in Montreal.

I’ll join the info session on Monday. I’d like to learn more about the previous PCDs and maybe how to reach out to the Processing community in Montreal

Cheers,

Benoit

limzykenneth:

you can open an issue about this on GitHub so we can look into it.

issue opened on Github

So, this works !

let video;

function setup() {
  createCanvas(900, 600);
  video = createVideo("video.mp4");
  video.hide();
}

function draw() {
  background(200);
  image(video, 10, 10);
}

function mousePressed() {
  video.loop();
}