Rotation around center of mass is weird.

[ustk]

@Chazrox

HiseSnippet 1490.3ocsW0raaaDDdosYSrZSPCPO0SK7IYGIZJZKGaXDDG+iZMh+qVNAsHvHcE4RoslZWAxUwRsn.8cnuL8XN1mhh9.zC8RO2N6RJxk1JNIFM7fD2Y9lc9lY2Y4rmDK7oIIhXjUkyFOfhr9L61i4xd6ziv3n82EYce6CIIRZLNUz1iGPRRnAHKqY+Jk.q4mCoe96mrMIhv8oEhPnWHX9zCX8YxBoC15YrnnVj.5Yr9FnWcq88E7cDQhg.el01EMf3eAoK8HhB1L1nuljzCYsj8F999gqtZnWC+Uar55q0YiF9g9c771v8QAdzfNq0gR2X8Pj0mrW.SJhaKIRZBxZtsEAia2SbIO0Aufkv5DQUCZfZCdNUbKQTfJDURQ6ziEEbxjDUBBlkSJRayll19B6CYArb4EouOWq.WXgYBzZlxza1RzqgI8bMn2TnjkAklKkROvtseLafrPihOep89bX0Lj.qSlTIEKZle8N16H.DboSexEzVwvfbKptlqaML7yhaVoBrVkHwulDieFWzoA9w3IF1kJ2QzeffCCptfV6BfEkMv6FMvagxt3vwJoGPBMrxOlBosCD9jnCDhKdJOnEkFUELT6RmDp7ZJymmLTduSTUpjOxIl1kopEZMj6KYBd0EBhIWdpPRhG2NhEPiWnFNbhxt0vhN+vhU9oJX3QEEDf8fHGBv7MykFS3coYZ5SFgqm9FiW.IQRf8AsY+nBG4kdmiWBWsgiKf0C9cIrqSilKVfWLRiy8b7CwU03qaLGKhWF6Y.drFbi2Kv9pYFl9GZxoxHTSGLmucDIWBHJqz00wsT3FKONLDVa.jdNMKTIgjcT6KozAZMpX2.cANJOHeBpaNeOzbJfrnJW+ZRzPZQdWEx5EEX0WMeKuL9wFO3cN9fie9oveGc1oGePIcSvWuNFJpiwpBZ7JvvhziRtR7JmITwf6nvv00OaNELaKjYXVQ+Tvn55EoTTlyetvrcKF4Y01j02bJHUL8p0UmPj8plskpDRGRPf5+pZUpmW55zrFL2MOuVtrUJd00YUOyQMKFjuJokj4srHrrSiEC4A6Hh4z3jpMLQ1UUBm9Uipo+k3Dw51S1MlN1DHKLc0lE.KY3ImKoUMupNdedK1HZvSgveRfSiRnl.1cLeh5eVe1PkJSJ2wWaJLJ7yiEkFHU+R+Q35WYoZIcpQU97VzTR3UFddVbNeWmP3iq5EuRIvZk4.Pd.p9zKpurZIc5kRUDNkvKOA.A27SNRq7JEbX91pEqjpSNpy4RVfr2RtNq0bQGITYkDAavBtt9FOpYM7zjt3lps74lh6LFN9q9kKtrGTMiuPUJyjXeX2aLMnx72TZ3pgdQ3lGpB9QBI8XdZTB4A7UUEFNUcpJnXQTDMdppUs6DeSFVkOreGJPR8AR4.gOoWtOA62deBlsw3mVPa.Tv2myjGOfxeaM2fxNE.5oXlLVAPk5NJteVGEoepCwfFGtistLBoIbVqbu4ep9WOA8darWIi+yu429imfd996RjDUeMYzAn3.ZrjohdqcouF5pLsKm4s2klbgTL.RR48P.888NY7nhFO+tsFWLfskdemofdT0wIlRPe.txyvUuIdptx152ggSbS5HSWb2TWbuLWb.oCMR6g6Zqe2LZ9EhgK156KbwnRtnELRRGAu+k15yrvDcoeROx.JlDPFHSPgPxWc5hYO5eH7xLz2Z3sjWZFUSSuajWWuCXn2aQvP3.ixMjqt1RlBn5qTWvpNc4IL4Xyq07+VW5uuT7A1mvj98lNGmYJbTUr9QfiY2s4d16EFBGUVPv4ra8sebtHC5TwPIi28PhLlAadrOZX+1vmz8of24b36wpMIynJORG6pFqx.sgdIzC9W3ISYC0XqLkMlnD0m3GKdke5ATpaOcWsDfSb8MMmGtxKLFW9XM8Se3xbux2u7TcMC8tsFtxs0vUusF171Z3Z2VCezs0v0e2Fptq8SGJE8SKaPnCOYO8WRrr1iq5CVuaE8efZb2RJ

[ustk]

@Chazrox It's even more obvious with 3 branches:

I love this one because it reminds me of the Wankel engine

[Chazrox]

@ustk Thank you! You're a beast.

@ustk said in Rotation around center of mass is weird.:

the Wankel engine

hahaha

[Chazrox]

@ustk I get error : unknown function 'translated'. Is this a new function I dont have??

[David Healey]

@Chazrox said in Rotation around center of mass is weird.:

I get error : unknown function 'translated'. Is this a new function I dont have??

It's part of the rectangle class.

https://docs.hise.dev/scripting/scripting-api/rectangle/index.html

[Chazrox]

@David-Healey I see it in my api list but its not working in this snippet for me.

[David Healey]

@Chazrox

[Chazrox]

@David-Healey Goooot it. Thank you sir. I didnt read enough. Will do better. ha.

[Chazrox]

@ustk Working and looking great! Thank you big time!

This is the shape i've been after for a while because I want to make analog knob shapes. This helps so much. Thank you.

Thank you @Christoph-Hart for the new api as well! Sick.

[Chazrox]

@David-Healey Im embedding this exact warning in my knob designer so people will know this if they dont.

[Chazrox]

EDIT: See fix below!

@ustk Now im having trouble getting a mask layer to clip the noise to the shape and rotate. Can you help me with this too please? Claude cannot figure this out for to save the world. lol

MyKnobLaf.registerFunction("drawRotarySlider", function(g, obj)
{
var a = obj.area;
var range = obj.max - obj.min;
var stableSize = a[2] * (1.0 - 2.0 * 0.15);
var ox = a[0] + (a[2] - stableSize) / 2;
var oy = a[1] + (a[2] - stableSize) / 2;
var cx = ox + stableSize / 2;
var cy = oy + stableSize / 2;
var sw = stableSize / 200.0;
var startOffset = 2.5;
var totalSweep = 2.0 * startOffset;
var endOffset = -startOffset + totalSweep * (obj.value - obj.min) / range;

var cStarTop = 0xff888888;
var cStarBot = 0xff333333;
var cStarOutline = 0x4d000000;

var starW = stableSize * 0.65;
var starX = cx - starW * 0.5;
var starY = cy - starW * 0.5;
var starBounds = [starX, starY, starW, starW];

// One path, rotation baked in — no g.rotate anywhere
var starPath = Content.createPath();
starPath.addStar([0.5, 0.5], 8, 0.44, 0.5, endOffset);
starPath.roundCorners(1);

// PASS 1: Fixed gradient rect masked to rotating star shape
g.beginLayer(false);
g.setGradientFill([cStarTop, cx, starY, cStarBot, cx, starY + starW, false]);
g.fillRect(starBounds);
g.applyMask(starPath, starBounds, false);
g.endLayer();

// PASS 2: Noise + shadow — mask baked, noise rotates
g.beginLayer(false);
g.drawDropShadow(starBounds, Colours.withAlpha(Colours.black, 0.6), 8);
g.applyMask(starPath, starBounds, false);
g.rotate(endOffset, [cx, cy]);
g.addNoise({"alpha": 0.2, "monochromatic": true, "area": starBounds});
g.rotate(-endOffset, [cx, cy]);
g.endLayer();

// PASS 3: Outline
g.beginLayer(false);
g.setColour(cStarOutline);
g.drawPath(starPath, starBounds, 3.0 * sw);
g.endLayer();


});

The masks are rotating and matching up but the whole shape in general now is doing that dynamically changing thing....

[Chazrox]

Heres the fix:

MyKnobLaf.registerFunction("drawRotarySlider", function(g, obj)
{
    var a = obj.area;
    var range = obj.max - obj.min;
    var stableSize = a[2] * (1.0 - 2.0 * 0.15);
    var ox = a[0] + (a[2] - stableSize) / 2;
    var oy = a[1] + (a[2] - stableSize) / 2;
    var cx = ox + stableSize / 2;
    var cy = oy + stableSize / 2;
    var sw = stableSize / 200.0;
    var startOffset = 2.5;
    var totalSweep = 2.0 * startOffset;
    var endOffset = -startOffset + totalSweep * (obj.value - obj.min) / range;


    var cStarBody3Top = 0xffFF0000;
    var cStarBody3Bot = 0xff00FBFF;
    var cStarBody3Outline = 0xfa000000;


    var starBody3Size = stableSize * 0.76;
    var starBody3X = cx - starBody3Size * 0.5;
    var starBody3Y = cy - starBody3Size * 0.5;

    var starBody3Static = Content.createPath();
    starBody3Static.addStar([0.5, 0.5], 3, 0.13, 0.5, 0);
    starBody3Static.roundCorners(1);
    var starBody3StaticBounds = starBody3Static.getBounds(starBody3Size).translated(starBody3X, starBody3Y);

    var starBody3Star = Content.createPath();
    starBody3Star.addStar([0.5, 0.5], 6, 0.05, 0.6, endOffset);
    starBody3Star.roundCorners(1);
    var starBody3RotBounds = starBody3Star.getBounds(starBody3Size).translated(starBody3X, starBody3Y);

	// PASS 1: gradient fill
	g.beginLayer(false);
	g.setGradientFill([cStarBody3Top, cx, starBody3Y, cStarBody3Bot, cx, starBody3Y + starBody3Size, false]);	
	g.fillPath(starBody3Star, starBody3RotBounds);	
	g.endLayer();

    // PASS 2: noise — use full obj.area so noise fills behind mask cleanly
    g.beginLayer(false);
    g.applyMask(starBody3Star, starBody3RotBounds, false);
    g.rotate(endOffset, [cx, cy]);
    g.addNoise({"alpha": 0.3, "monochromatic": true, "area": [a[0], a[1], a[2] * 2, a[3] * 2]});
    g.rotate(-endOffset, [cx, cy]);
    g.endLayer();

    // PASS 3: outline
    g.beginLayer(false);
    g.setColour(cStarBody3Outline);
    g.drawPath(starBody3Star, starBody3RotBounds, 3.06 * sw);
    g.endLayer();
});