Image Position Relationships

Programming Questions

glasnostg..

in Programming Questions • 6 months ago

Hi,

I'm having trouble understanding how to make classes that are related to each other. I'm attempting to make a sketch that has hands that open and close based on your proximity to a sonar sensor. I have each finger broken up into three segments, and so far I can only produce the base of the hands and the rotating lower segments of each finger. Can anyone help me with relating them so that I can control where the middle and tips of the fingers rotate and how they rotate?

SoundRespond mySoundRespond;
import ddf.minim.*;
PImage LBase;
PImage LThumb;
PImage LPinkyLower;
PImage LRingLower;
PImage LMiddleLower;
PImage LPointerLower;
PImage LPinkyMiddle;
PImage LRingMiddle;
PImage LMiddleMiddle;
PImage LPointerMiddle;
PImage LPinkyTip;
PImage LRingTip;
PImage LMiddleTip;
PImage LPointerTip;
PImage LBaseWhite;
PImage LThumbWhite;
PImage LPinkyLowerWhite;
PImage LRingLowerWhite;
PImage LMiddleLowerWhite;
PImage LPointerLowerWhite;
PImage LPinkyMiddleWhite;
PImage LRingMiddleWhite;
PImage LMiddleMiddleWhite;
PImage LPointerMiddleWhite;
PImage LPinkyTipWhite;
PImage LRingTipWhite;
PImage LMiddleTipWhite;
PImage LPointerTipWhite;
PImage LBaseDark;
PImage LThumbDark;
PImage LPinkyLowerDark;
PImage LRingLowerDark;
PImage LMiddleLowerDark;
PImage LPointerLowerDark;
PImage LPinkyMiddleDark;
PImage LRingMiddleDark;
PImage LMiddleMiddleDark;
PImage LPointerMiddleDark;
PImage LPinkyTipDark;
PImage LRingTipDark;
PImage LMiddleTipDark;
PImage LPointerTipDark;
PImage RBase;
PImage RThumb;
PImage RPinkyLower;
PImage RRingLower;
PImage RMiddleLower;
PImage RPointerLower;
PImage RPinkyMiddle;
PImage RRingMiddle;
PImage RMiddleMiddle;
PImage RPointerMiddle;
PImage RPinkyTip;
PImage RRingTip;
PImage RMiddleTip;
PImage RPointerTip;
PImage RBaseWhite;
PImage RThumbWhite;
PImage RPinkyLowerWhite;
PImage RRingLowerWhite;
PImage RMiddleLowerWhite;
PImage RPointerLowerWhite;
PImage RPinkyMiddleWhite;
PImage RRingMiddleWhite;
PImage RMiddleMiddleWhite;
PImage RPointerMiddleWhite;
PImage RPinkyTipWhite;
PImage RRingTipWhite;
PImage RMiddleTipWhite;
PImage RPointerTipWhite;
PImage RBaseDark;
PImage RThumbDark;
PImage RPinkyLowerDark;
PImage RRingLowerDark;
PImage RMiddleLowerDark;
PImage RPointerLowerDark;
PImage RPinkyMiddleDark;
PImage RRingMiddleDark;
PImage RMiddleMiddleDark;
PImage RPointerMiddleDark;
PImage RPinkyTipDark;
PImage RRingTipDark;
PImage RMiddleTipDark;
PImage RPointerTipDark;
PImage sprite;
float theta;
float soundChange;
float soundChange2;
float prox;
ParticleSystem ps;
void setup() {
size(1400, 900, P2D);
mySoundRespond = new SoundRespond(this);
sprite = loadImage("sprite.png");
ps = new ParticleSystem(10000);
hint(DISABLE_DEPTH_MASK);
LBaseDark = loadImage ("L_Base_Dark.png");
LBaseWhite = loadImage ("L_Base_White.png");
LBase = loadImage ("L_Base.png");
LMiddleLowerDark = loadImage ("L_Middle_Lower_Dark.png");
LMiddleLowerWhite = loadImage ("L_Middle_Lower_White.png");
LMiddleLower = loadImage ("L_Middle_Lower.png");
LMiddleMiddle = loadImage ("L_Middle_Middle.png");
LMiddleTip = loadImage ("L_Middle_Tip.png");
LPinkyLowerDark = loadImage ("L_Pinky_Lower_Dark.png");
LPinkyLowerWhite = loadImage ("L_Pinky_Lower_White.png");
LPinkyLower = loadImage ("L_Pinky_Lower.png");
LPinkyMiddle = loadImage ("L_Pinky_Middle.png");
LPinkyTip = loadImage ("L_Pinky_Tip.png");
LPointerLowerDark = loadImage ("L_Pointer_Lower_Dark.png");
LPointerLowerWhite = loadImage ("L_Pointer_Lower_White.png");
LPointerLower = loadImage ("L_Pointer_Lower.png");
LPointerMiddle = loadImage ("L_Pointer_Middle.png");
LPointerTip = loadImage ("L_Pointer_Tip.png");
LRingLowerDark = loadImage ("L_Ring_Lower_Dark.png");
LRingLowerWhite = loadImage ("L_Ring_Lower_White.png");
LRingLower = loadImage ("L_Ring_Lower.png");
LRingMiddle = loadImage ("L_Ring_Middle.png");
LRingTip = loadImage ("L_Ring_Tip.png");
LThumbDark = loadImage ("L_Thumb_Dark.png");
LThumbWhite = loadImage ("L_Thumb_White.png");
LThumb = loadImage ("L_Thumb.png");
RBaseDark = loadImage ("R_Base_Dark.png");
RBaseWhite = loadImage ("R_Base_White.png");
RBase = loadImage ("R_Base.png");
RMiddleLowerDark = loadImage ("R_Middle_Lower_Dark.png");
RMiddleLowerWhite = loadImage ("R_Middle_Lower_White.png");
RMiddleLower = loadImage ("R_Middle_Lower.png");
RMiddleMiddle = loadImage ("R_Middle_Middle.png");
RMiddleTip = loadImage ("R_Middle_Tip.png");
RPinkyLowerDark = loadImage ("R_Pinky_Lower_Dark.png");
RPinkyLowerWhite = loadImage ("R_Pinky_Lower_White.png");
RPinkyLower = loadImage ("R_Pinky_Lower.png");
RPinkyMiddle = loadImage ("R_Pinky_Middle.png");
RPinkyTip = loadImage ("R_Pinky_Tip.png");
RPointerLowerDark = loadImage ("R_Pointer_Lower_Dark.png");
RPointerLowerWhite = loadImage ("R_Pointer_Lower_White.png");
RPointerLower = loadImage ("R_Pointer_Lower.png");
RPointerMiddle = loadImage ("R_Pointer_Middle.png");
RPointerTip = loadImage ("R_Pointer_Tip.png");
RRingLowerDark = loadImage ("R_Ring_Lower_Dark.png");
RRingLowerWhite = loadImage ("R_Ring_Lower_White.png");
RRingLower = loadImage ("R_Ring_Lower.png");
RRingMiddle = loadImage ("R_Ring_Middle.png");
RRingTip = loadImage ("R_Ring_Tip.png");
RThumbDark = loadImage ("R_Thumb_Dark.png");
RThumbWhite = loadImage ("R_Thumb_White.png");
RThumb = loadImage ("R_Thumb.png");
smooth();
}
void draw() {
background(0);
soundChange = mySoundRespond.adding(1000);
soundChange2 = mySoundRespond.adding(5);
ps.update();
ps.display();
ps.setEmitter(width/2, height/2);
float a = (mouseY/ (float) width) * 90f;
theta = radians(a);
prox = mouseY/3.6;
float Reg = (350-prox);
//LEFT PINKY LOWER/////////////////////////////////////////////////////////////////////////
pushMatrix();
tint(Reg);
translate (122, 401);
rotate (theta);
image (LPinkyLower, -(LPinkyLower.width/2), -(LPinkyLower.height-30));
tint (255, prox);
image (LPinkyLowerDark, -(LPinkyLower.width/2), -(LPinkyLower.height-30));
tint (255, soundChange);
image (LPinkyLowerWhite, -(LPinkyLower.width/2), -(LPinkyLower.height-30));
popMatrix();
//LEFT RING LOWER////////////////////////////////////////////////////////////////////////////
pushMatrix();
translate (119, 395);
tint (Reg);
rotate (theta/1.3);
image (LRingLower, -(LRingLower.width/2), -(LRingLower.height-30));
tint (255, prox);
image (LRingLowerDark, -(LRingLower.width/2), -(LRingLower.height-30));
tint (255, soundChange);
image (LRingLowerWhite, -(LRingLower.width/2), -(LRingLower.height-30));
popMatrix();
//LEFT MIDDLE LOWER//////////////////////////////////////////////////////////////////////
pushMatrix();
tint(Reg);
translate (115, 390);
rotate (theta/1.7);
image (LMiddleLower, -(LMiddleLower.width/2), -(LMiddleLower.height-30));
tint (255, prox);
image (LMiddleLowerDark, -(LMiddleLower.width/2), -(LMiddleLower.height-30));
tint (255, soundChange);
image (LMiddleLowerWhite, -(LMiddleLower.width/2), -(LMiddleLower.height-30));
popMatrix();
//BASES////////////////////////////////////////////////////////////////////////////////////////
pushMatrix();
tint(Reg);
image (RBase, width-446, height-575);
image (LBase, 30, height-575);
tint(255, prox);
image (RBaseDark, width-446, height-575);
image (LBaseDark, 30, height-575);
tint(255, soundChange);
image (RBaseWhite, width-446, height-575);
image (LBaseWhite, 30, height-575);
popMatrix();
//RIGHT PINKY LOWER///////////////////////////////////////////////////////////////////////////////////
pushMatrix();
translate (1205, 401);
rotate (-(theta));
tint(Reg);
image (RPinkyLower, -(RPinkyLower.width/2), -(RPinkyLower.height-30));
tint(255, prox);
image (RPinkyLowerDark, -(RPinkyLower.width/2), -(RPinkyLower.height-30));
tint(255, soundChange);
image (RPinkyLowerWhite, -(RPinkyLower.width/2), -(RPinkyLower.height-30));
popMatrix();
//RIGHT RING LOWER/////////////////////////////////////////////////////////////////////////////////////
pushMatrix();
tint(Reg);
translate (1220, 395);
rotate (-(theta/1.3));
image (RRingLower, -(RRingLower.width/2), -(RRingLower.height-30));
tint (255, prox);
image (RRingLowerDark, -(RRingLower.width/2), -(RRingLower.height-30));
tint(255, soundChange);
image (RRingLowerWhite, -(RRingLower.width/2), -(RRingLower.height-30));
popMatrix();
//RIGHT MIDDLE LOWER////////////////////////////////////////////////////////////////////////////////////
pushMatrix();
tint(Reg);
translate (1195, 420);
rotate (-(theta/1.7));
image (RMiddleLower, -(RMiddleLower.width-70), -(RMiddleLower.height-20));
tint(255, prox);
image (RMiddleLowerDark, -(RMiddleLower.width-70), -(RMiddleLower.height-20));
tint(255, soundChange);
image (RMiddleLowerWhite, -(RMiddleLower.width-70), -(RMiddleLower.height-20));
popMatrix();
//THUMBS ///////////////////////////////////////////////////////////////////////////////////////////////////
pushMatrix();
tint(Reg);
translate (315, 540);
rotate (theta/10);
image (LThumb, -(LThumb.width/2), -(LThumb.height-50));
tint(255, prox);
image (LThumbDark, -(LThumbDark.width/2), -(LThumbDark.height-50));
tint(255, soundChange);
image (LThumbWhite, -(LThumbDark.width/2), -(LThumbDark.height-50));
popMatrix();
pushMatrix();
tint(Reg);
translate(1020, 558);
rotate (-(theta/10));
image (RThumb, -(RThumb.width/2), -(RThumb.height-50));
tint(255, prox);
image (RThumbDark, -(RThumbDark.width/2), -(RThumbDark.height-50));
tint(255, soundChange);
image (RThumbWhite, -(RThumbDark.width/2), -(RThumbDark.height-50));
popMatrix();
//POINTER LOWER//////////////////////////////////////////////////////////////////////////////////////////
pushMatrix();
tint(Reg);
translate (110, 385);
rotate (theta/2);
image (LPointerLower, -(LPointerLower.width/2), -(LPointerLower.height-60));
tint(255, prox);
image (LPointerLowerDark, -(LPointerLower.width/2), -(LPointerLower.height-60));
tint(255, soundChange);
image (LPointerLowerWhite, -(LPointerLower.width/2), -(LPointerLower.height-60));
popMatrix();
pushMatrix();
translate (1194, 400);
tint(Reg);
rotate (-(theta/2));
image (RPointerLower, -(RPointerLower.width-50), -(RPointerLower.height-40));
tint(255, prox);
image (RPointerLowerDark, -(RPointerLower.width-50), -(RPointerLower.height-40));
tint(255, soundChange);
image (RPointerLowerWhite, -(RPointerLower.width-50), -(RPointerLower.height-40));
popMatrix();
}

Replies(12)

quarks

Re: Image position inheritance

6 months ago

The solution does not require inheritance of classes, in fact I would be concerned it you were using inheritance for this problem.

The solution is to stack the transformations starting with the hand base which will have an absolute position and angle. The positions and angles of the finger parts will be relative to what they are connected to e.g.

hand base << lower finger section << middle finger section << upper finger section

To draw the hand the algorithm is

pushMatrix
translate to position of hand base (absolute)
rotate angle for hand base (absolute)
draw base
// Now do the first finger
pushMatrix
translate for finger lower section (relative to hand base)
rotate angle (relative to hand base)
draw lower finger
    pushMatrix
    translate for finger middle section (relative to lower section)
    rotate angle (relative to lower section)
    draw middle section
      pushMatrix
      translate for finger upper section (relative to middle section)
      rotate angle (relative to middle section)
      draw upper section
      popMatrix
    popMatrix
popMatrix

// More fingers here

popMatrix

HTH

GoToLoop

Re: Image position inheritance

6 months ago

If it's not a loop inside draw(), I wonder if all of those pushMatrix() & popMatrix() are really necessary?

Callback draw() already starts w/ a clean slate after all! Like auto resetMatrix().

Take a peek at here if you wish -> https://forum.processing.org/topic/why-translate-doesnt-work

glasnostg..

Re: Re: Image position inheritance

6 months ago

If I could figure out how to remove them all, I definitely would. My actual code has three layers for each segment of each finger, which all change opacity based on different values. One is sound responsive, one is proximity responsive, and one is a combination of both. I found a way to override the stack limit already too.

GoToLoop

Re: Image position inheritance

6 months ago

If you need to get back to some previous matrix set during draw(),
you definitely need pair pushMatrix() & popMatrix()!

My advise there is when you only alters canvas matrix and never need to get back to previous matrix
to draw something later!

glasnostg..

Re: Re: Image position inheritance

6 months ago

I've gotten rid of most of them by combining the three different images for each segment into one matrix, but the suggestion by Quarks isn't working and I'm not sure why.

GoToLoop

Re: Image position inheritance

6 months ago

Since you had already modified your code a lot, you need to re-publish what you got so far!

glasnostg..

Re: Re: Image position inheritance

6 months ago

I've updated it. Also, this code includes the sound response.

quarks

Re: Image position inheritance

6 months ago

The push and popMatrix calls are necessary for this technique.

The technique is a standard approach for drawing composite shapes and I have used it successfully in the G4P library and the Shapes3D library.

Will need to see some more code.

glasnostg..

Re: Re: Image position inheritance

6 months ago

I've updated the code. Could you give an example pseudo code of what you mean?

GoToLoop

Re: Image Position Relationships

6 months ago

I see on the updated code that pushMatrix() is used to save default matrix.
And popMatrix() to restore that default matrix.

So, in the current state of that code, all pushMatrix() can be removed,
and all popMatrix() replaced w/ resetMatrix()!

glasnostg..

Re: Re: Image Position Relationships

6 months ago

That resulted in too many calls to pushMatrix() and it crashed :/

quarks

Re: Image Position Relationships

6 months ago

The technique of nesting transformations is sound although the algorithm I showed above needed tweaking for articulation. To show you how to do it I have created a sketch (see screen shot below) to articulate a simple alien hand (just 3 fingers).

You can download the full sketch from here (requires Processing 2.0 because of the GUI controls).

Top Reply