Rotation around center of mass is weird.

Chazrox

Im drawing a star and trying to rotate it around its center of mass without including the gradient in the rotation. At lower point counts its alot more obvious whats going on. For some reason at higher point counts its stable. hmmmm

If anyone else wants to give it a go.. Thank you!

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;

    // ============ COLOUR CONTROL ============
    // -- Star Body 3 --
    var cStarBody3Top = 0xff888888;
    var cStarBody3Bot = 0xff333333;

    // -- starBody3 --
    var starBody3Size = stableSize * 0.8;
    var starBody3Star = Content.createPath();
    starBody3Star.addStar(
        [0.5, 0.5],
        3,
        0.42,
        0.5,
        endOffset
    );
    starBody3Star.roundCorners(1);
    var starBody3Area = [cx - starBody3Size * 0.5, cy - starBody3Size * 0.5, starBody3Size, starBody3Size];
    g.setGradientFill([cStarBody3Top, cx, cy - starBody3Size * 0.5 + starBody3Size * 0.5 - starBody3Size * 0.5, cStarBody3Bot, cx, cy + starBody3Size * 0.5 + starBody3Size * 0.5 - starBody3Size * 0.5, false]);
    g.fillPath(starBody3Star, starBody3Area);

});

I Cant figure out why the shape warbles when

ustk

@Chazrox you need to use starBody3Star.getBounds(multiplier) as drawing area. Complex shapes manage their own area, that is dynamic so it can hold the entire shape without being distorted.
A star doesn't fit in the same square as you rotate it. It needs to grow, shrink, and translate dynamically.
In your code you force it to draw in a fix square, so the shape adapts...

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.

Screenshot 2026-06-27 at 8.21.28 AM.png

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();
});

Rotation around center of mass is weird.

13

2.4k

13.8k

120.3k