josiahsrc / dough

This package provides some widgets you can use to create a smooshy UI.
MIT License
703 stars 28 forks source link

[suggestion] Dough 3D rotation #5

Closed Schwusch closed 4 years ago

Schwusch commented 4 years ago

I was messing around to achieve the realistic scaling mentioned in the README

drag_dough In DraggableOverlayDoughTransformer.createDoughMatrix() I made this change:

@override
  Matrix4 createDoughMatrix() {
    final adhesiveDx = delta.x * t / recipe.adhesion;
    final adhesiveDy = delta.y * t / recipe.adhesion;

    Matrix4 translate;
    if (applyDelta) {
      if (snapToTargetOnStop) {
        final dx = -delta.x * (controller.isActive ? 1 : t);
        final dy = -delta.y * (controller.isActive ? 1 : t);
        translate = Matrix4.translationValues(
              dx + adhesiveDx,
              dy + adhesiveDy,
              0,
            )
        //--- Rotate in 3 dimensions ---------------
            * (Matrix4.identity()
              ..setEntry(3, 2, 0.01)
              ..rotateY(-(dx + adhesiveDx) * 0.01)
              ..rotateX((dy + adhesiveDy) * 0.01));
        //-------------------------------------------
      } else {
        translate = Matrix4.translationValues(
          -delta.x + adhesiveDx,
          -delta.y + adhesiveDy,
          0,
        );
      }
    } else {
      translate = Matrix4.translationValues(adhesiveDx, adhesiveDy, 0);
    }

    return translate * bendWithDeltaMatrix() * expansionMatrix();
  }

Is that what you are looking for?

josiahsrc commented 4 years ago

@Schwusch This isn't exactly what the README.md was referring to, but this is definitely a super cool effect. Do you want to improve on this and create a pull request? You could add some options to the DoughRecipeData to use like bool usePerspectiveMorphing, etc. Though I think the Rotate in 3 dimensions code would be better placed in the DoughTransformer.expansion() method (this is the method that handles all scaling related stuff).

The README.md was referring to more of a dough "kneading" motion. See here (Pulled this from a youtube cooking channel):

dough

Notice how the dough "scales" or "expands" only where the chef is pushing on the dough, while the other parts of the dough that aren't being touched remain the same size. I called this non-uniform scaling. Photoshop does something similar with their liquify tool. I think that a homography or a mesh grid are a step in the right direction for this effect, but I can't think a good way to go about creating this effect :/

Schwusch commented 4 years ago

Sure, I can do a PR when I've polished it a bit. With some tweaking the effect is quite squishy!

josiahsrc commented 4 years ago

Oh wow. That looks way nice! It gives a cool effect with keeping one side small while keeping the other side a bit bigger. Nice work!

josiahsrc commented 4 years ago

@Schwusch Actually, you can scratch my earlier reply. This is totally the non-uniform scaling effect. I couldn't see it clearly from the first gif, but the one with the cookie-dough shows it very clearly. Whatever tweaks you made to get that effect are super squishy. Really great thinking here! Excited to see that PR!

josiahsrc commented 4 years ago

Just merged this feature in 29366cef1a0a38cc844ec4ac428cf9961b460bf0 Nice work!