I am sharing concepts and it is not always plug and play.
There are many approaches to this.
One approach with code I provided:
float pitch;
float roll;
void setup()
{
size(400, 400);
background(0);
}
void draw()
{
background(0);
pitch = constrain(mouseY, 100, 300);
roll = radians(mouseX%360); // MUST be radians!
// Isolate this within a push() and pop() May not be needed but future ready!
pushMatrix();
// What the heck!
// Split this into steps (comment out) and see what is happening.
translate(width/2, height/2); //0 Trnaslate to center now (0, 0)
rotate(roll); //1 Rotate about the center (0, 0)
translate(-width/2, -height/2); //2 Translate back
fill(128);
rect(100, 100, 200, 200);
fill(255);
rect(pitch, 100, 5, 200);
circle(width/2, height/2, 10);
popMatrix();
}
These can be a real challenge to understand when rotating something with a center other than 0, 0 origin.
Break it into steps by commenting out the transforms and seeing what they do .
Try all commented and then 0, 01, 012 uncommented …
It may be easier to make a PGraphic and then center the image with imageMode.
I’ve been down this road a few times with a BNO055 and also a GY gyro and acc, and a separate magnetometer. For the magnetometer only attempt, I borrowed a set of .PNG that were super realistic looking. The creator of the .PNG was someone in Poland. I even had some calibration code that made it very accurate for my location. It’s a challenging exercise for sure.
//int pitch;
//int yaw;
//int roll;
float rx, ry;
void setup()
{
size(800, 800);
background(0);
}
void draw()
{
background(0);
// translate(0, 0); //No effect here. Already at 0, 0 (upper left of sketch)
// Difficult to understand.
//int a = (int) map((mouseY%360)+295, 0, 400, 0, 360); // +295 to center horizon
// Simplified and added phaseshift (ps) below of 90. 270 also works. Any value works!
int a = (int) map(mouseY, 0, height, 0, 360);
println(a);
int ps = 90; // try other values!
int mx = ((a%360) + 360 + ps) % 360; // 0..359, safe for larger angles
int t = mx%180; // 360/2 = 180 the halfway mark that rolls over
float split = 20+t*2;
//println(split);
pushMatrix(); //0 start // The push() pop() pair not needed in this example. No harm leaving.
// *****************************
// This does nothing in the code!
// You need elements (shapes, text, image, etc.) to transform between push() and pop()
pushMatrix(); //1 start
translate(width/2, height/2);
rotate(radians(mouseX%360));
popMatrix(); //1 end
// *****************************
float rxo = 20 + rx;
float ryo = 20 + ry;
float rxc = 360/2 +rxo; // See below for rect() dimensions and origin.
float ryc = 360/2 +ryo; // ...
// Move the coordinate system to the rectangle's centre.
// The rectangle's centre is used as the fixed rotation point (pivot).
// Rotate around the rectangle's centre (pivot).
// Move the coordinate system back.
//pushMatrix(); //1 start
translate(rxc, ryc);
rotate(radians(mouseX%360));
translate(-rxc, -ryc);
// Simplified shape (no colour)
stroke(255);
strokeWeight(2);
noFill();
rect(rxo, ryo, 360, 360);
line (rxo, split+ ryo, 360+rxo, split+ryo);
popMatrix(); //0 end
}
void keyPressed()
{
rx = random(0, width-360);
ry = random(0, height-360);
}
rx = 0 and ry = 0 initially and can be ignored!
I added this to demonstrate this working at any location.
It may be easier with rectMode(CENTER) and working with the coordinate system centered translate(width/2, height/2)
I would replace my lines in a loop example with a rect.
I originally had a single line and just expanded it before implementing a rect().
If you add a background() there you can see it between the lines! Increase the strokeWeight()
I’ve been looking at the code, and I think I’m starting to see the light. I’m glad that it’s only things like this that keep me up at night these days. Thank you for the explanation. I changed line() to rect() and some of the numbers. I’m happy with what I see.
CODE
//int pitch;
//int yaw;
//int roll;
float rx, ry;
void setup()
{
size(800, 800);
background(0);
}
void draw()
{
background(0);
// translate(0, 0); //No effect here. Already at 0, 0 (upper left of sketch)
// Difficult to understand.
//int a = (int) map((mouseY%360)+295, 0, 400, 0, 360); // +295 to center horizon
// Simplified and added phaseshift (ps) below of 90. 270 also works. Any value works!
int a = (int) map(mouseY, 0, height, 0, 360);
int ps = 225; // try other values!
int mx = ((a%360) + 360 + ps) % 360; // 0..359, safe for larger angles
int t = mx%180; // 360/2 = 180 the halfway mark that rolls over
float split = 20+t*4;
//println(split);
println("A:", a +" SPLIT:", split);
pushMatrix(); //0 start // The push() pop() pair not needed in this example. No harm leaving.
float rxo = 20 + rx;
float ryo = 20 + ry;
float rxc = 360/2 +rxo; // See below for rect() dimensions and origin.
float ryc = 360/2 +ryo; // ...
// Move the coordinate system to the rectangle's centre.
// The rectangle's centre is used as the fixed rotation point (pivot).
// Rotate around the rectangle's centre (pivot).
// Move the coordinate system back.
//pushMatrix(); //1 start
translate(rxc, ryc);
rotate(radians(mouseX%360));
translate(-rxc, -ryc);
// Simplified shape (no colour)
stroke(255);
strokeWeight(2);
noFill();
rect(rxo, ryo, 360, 360);
strokeWeight(2);
rect (rxo-20, height/2-split, 360+20 + rxo, height/2);
println("ryo:", ryo +" SPLIT:", split + " total: ", (split+ryo));
popMatrix(); //0 end
}
void keyPressed()
{
rx = random(0, width-360);
ry = random(0, height-360);
}
PGraphics pg;
void setup()
{
size(800, 800);
background(0);
pg = createGraphics(360, 360);
}
void draw()
{
background(0);
// translate(0, 0); //No effect here. Already at 0, 0 (upper left of sketch)
// Difficult to understand.
//int a = (int) map((mouseY%360)+295, 0, 400, 0, 360); // +295 to center horizon
// Simplified and added phaseshift (ps) below of 90. 270 also works. Any value works!
int a = (int) map(mouseY, 0, height, 0, 360);
int ps = 45; // try other values!
int mx = ((a%360) + 360 + ps) % 360; // 0..359, safe for larger angles
int t = mx%180; // 360/2 = 180 the halfway mark that rolls over
float split = t*4; // Removed the +20
// Changing this showed errors later and you can see fix:
float rxo = 180;
float ryo = 180;
float rxc = 360/2 +rxo; // See below for rect() dimensions and origin.
float ryc = 360/2 +ryo; // ...
// Move the coordinate system to the rectangle's centre.
// The rectangle's centre is used as the fixed rotation point (pivot).
// Rotate around the rectangle's centre (pivot).
// Move the coordinate system back.
//pushMatrix(); //1 start
// I did not include this:
//pgMake();
//image(pg, 0, 0);
if (true)
{
translate(rxc, ryc);
rotate(radians(mouseX%360));
translate(-rxc, -ryc);
// Simplified shape (no colour)
stroke(255);
strokeWeight(2);
noFill();
fill(255, 0, 0);
stroke(255, 0, 0);
rect(rxo, ryo, 360, 360);
stroke(0, 255, 0);
fill(0, 255, 0);
//rect (rxo, height/2-split, 360 + rxo, height/2); // Step 1
//rect (rxo, height/2-split, 360, height/2); // Step 2
// This is no longer coupled to the sketch window size:
rect (rxo, ryo + 360-split, 360, 360); // Step 3
// Mask with overlay:
fill(0);
stroke(255, 255, 0 , 128);
rect (rxo-20, ryo-2, 360+40, 0-rxo);
rect (rxo-20, ryo+360+2, 360+40, height-(ryo+360)-4);
//println("ryo:", ryo +" SPLIT:", split + " total: ", ryo + 360-split);
}
//popMatrix(); //0 end
}
After adding the black rectangles to cover the two ends I decided to make an equivalent PGraphics (not included) and the ends were not seen!
