offmilk How would you rotate text along a curved path?

I've built a home made pressure sensor. It provides 108 values from serial communication that are layed out in 3 circles. The testing_values_sketch_circles.js sketch currently showcases the sensor's locations perfectly.

Currently MAX_PRESSURE is set to 300.

I would like to create a transition between two scenarios, where if all 108 values from serial communication come back as 300, then the scene we're seeing would appear fully magenta.

Essentially, where ever I'm touching the pressure sensor I want to see a change from a blue background to pink, where the size of the area of the change is mapped to the pressure.

But here's the thing. the firstRadius of the innermost circle is currently 130, which means there's a big space in the middle of the sketch.

How can we turn this into more of a coordinate system, where:

• we have 2 scenes and they mix together - using something that's performant and that can handle all the real time data. Changing pixel by pixel unfortunately won't be fast enough & we eventually want to have the pink scene also include ripples or movement, so seems like shaders would be the way to go but I'm not entirely sure. There's also a p5 shaders library or something like Shaders Park. Feel free to provide other beginner friendly suggestions.
• I would like to be able to have different modes or almost states.

Something like: if (all sensors are coming back as 0) = animation is at 0%. if 50% of the snesors are coming back at 150, animation is at 50% and therefore we trigger some conditions, maybe like music TBD). If all sensors are coming back as 300, then animation is at 100%, which could trigger ending message to show on the screen. This will be decided later but the logic needs to exist.

• We make it so that every inch of this circle is mapped to a sensor, almost like a pie (regarless of the physical shape of the sensors forming 3 circles varying in size).

Sound

For noisy music, songs by Händel.

Technical issues

3D in the browser through p5.js

createCanvas(800, 800, WebGL) makes a 3D canvas. Color fill isn’t applied the same way.

Text

How to rotate

offmilk How would you rotate text along a curved path?

function setup(){
	createCanvas (400, 300, WEBGL);

function draw() {
	background (175);
	rectMode (CENTER);
	noStroke();
	fill(0, 0, 255);
	rotateZ(ang}e);
	rect (0, 0, 150, 150);
	
	angle += 0.07; 
}

Projectors

• Short throw
• Can use Creative Cast - Creative Cast