Flex Envelope - No UI control for Hold

HISEnberg

@Christoph-Hart Nice this feels much better, thank you for prioritizing it!

My only immediate comment would be to add a small amount of padding on the borders. It's quite difficult to drag one of the points (for example the release) when it is close to the edges. Not really a big deal, probably there is a way to get around in HISE script as well.

HISEnberg

Here is a LAF I was working on for anyone who is interested. It would be nice to be able change the square handles for controlling the lengths, but otherwise this new FLEX Envelope is quite sexy.

HiseSnippet 3363.3oc2arriabbbnjFEy0OfsShkSN0fHFgxZEEI2m1BFh6KJsN6CJwUR1XAgbuyzjryNbZlYFpcWKH.cJWctjDja4CHGxmfAxgjiw.9ZB7kb1F4GPoptmG8vkuVFoH4PIsKmpqp5pptd0cOplmvh46K7LxLydmzkYj40LqehaP60ZS4tFattQlrlUcXGuEsowpmzk56yrMxj472DGNS1KXH+7c2XUpC00hk.xv3dBtEaKdGdPBzZU9EbGmpTa1d7NZXOekMsDtqIbD8.Q47lEM5RsNj1hsCEQ6blF2h521Hy6aVjcvA1MOXtOfUtToxevBEWXoCJCfliYQK2bo4KUboEVp7G.B4E2vlGH7pGPCX9FYtvpB6Sp2VbjqZBtG2mefCCenjQcXlUfqJbrQUDgZrVaticsHajugQFyZIVryqrX+Hys417X3IVt2TN.IgBcCXlykV7NeJwqjt3UTS7FfHkQSjtfRjdKy5Vd7tAIifxyqZtoa.yqIEVmzEEEtFm6OcIy0D.FtAE5POjU0CdHlh7KVr3rj4KV7xWelYf0J+.xCodjlAO.cOHeDIhzVrf0Dc5JbgGxmKb7b.UID4Pa9flooxxiA1gsDVTmsDhCWw0tJi4jGmLWvEvGbGXDjSqbq0qemaQcscXdy7nryj8ZWirJ3qzxSzy0lbDOnMokG2dlrQyRAOVKtOnFU64ZEvEt4yY6QORxr119dITmaVRyHbZMKQbvu7xyj8Qyjk.eZUvmEbSOpMGD2pfSb98Kdb0pkn3elkTT82zP.FTfBJ19y0.3L0wm0.TnP10D3wcXVA4ivBG5w3Oj5TMJnHGcMxbj5AdhCY9DPmAMSI.Dj5IWEq1ywAY3nUvC.l3tE8DlW9.udrHQUS+UAn4Kd7bvmUVoZ0D0AmObJjpSW3KJ0G+1JfxMKY4BEGEGWXgyLGmezbrZ0yLGKOJNp9kegiZyCXmAlV5zLk4ZqrywCf+.W1uY5EXDrLLCxXBYJ7BfPFctueoFjqjFxbMHuOoXgEuNYDNtKTTYaRKq6Wrwr8y9YCYy.9T73hEaJ+L.1DKwC1yeDVrzwAq0y6gLRWAGrIskg89jI2wWRcMj3Q45iVX4LTm+4LvBu70Sf2l5zLDbBJWiTtuUzgD6j1ib9462iDMEa33v65yxuOZDrhEXvJRtZxzeUxbJyjFFkNMFCbwJQvuBYwYS+n15xo8JGUluEWb0UibfFlTOZId1Q3YA4QWYoUVasAw+qLR9qOJtTzXJr1iQtSrfZeswYOWzyOYAx5jVbPWYtqKyKzWdtq2G7aALDfmfShOdZUY4kqJ+bFLqwSvf0Esgimdsu1HcBgMcs4Oja2i5P7Ys5f4J8.OWlG2skp7OEhxgbF9XmU.ar4VTLrexyZTWw2wkxviY2yhYi4r.K29wU6ktnKqU9uT+.JipcoES0gfDRiTKZ7lDU2ARE5xJfOJIpYzYWFZxVM4VG2gw2kVZP7c.k8z3apRoOV8KFTEXLpPoEldU3wo5dR3yw0snkegGjLnM2mzEqgB+dkMmb2gHlMN+gNTuCiCvJM+fKhngTRDlr.TOv9bZjtBYaPiK3ycyugKTiggMXe2tAv1mxeYnR+x3ONEeBilS3Y+Ur.azt8.UlzxQbDzPNj1eJKkgrZUmdLImFZJAYpoccwkQUNgDw7pj4Ca.PCmRC.mAWaKVEkgXodb701.YeaX6ZI8UyTB8DW46T5U5z1mRkN6095aFtxnmgyR0uoV107O0+diSYak9EhdANfe6TVV7YtPhMjuvojz6iM0SrDdLRadq1Nv+BRhoP3CnvIBNLRKFigU1rZ0wV17TpZD+GhplLbzrm7s9JZtE8.1YX+h6wNd7MLSsswRteDobQMaR.P5fqH1W0uhEwHbES5uVYL3R3gNLWwFWmLgejBR7pJpGZKFUE3QRrhGm5.ZWoxW95StS4JfKgKyF4nrNDpmyFqsyRx4gtL4zL6gG8Ax6SctFQKDwKP6.YgOhQbYLaRf.VFgterBfZVLBL6sZQOvA9F2uKjpFQnWWar6Fb7CcEG3SfZcRFgP7kGnCt3b2MK.MLQDdP+QHY1Bhu.lnetiComOiPIG3In1VTzY.nkFHYBHIzf.pUajFJfahL.EPocX.1pCjnO4.bAfPdexQsYtHvSjrCVXIVvl2ZwrKf5axIAs1taWa2c1Xm8pC9KfyU1Uvo8vOj.V9AefRJDxcYHAZ1aIbrATGJt33JLWmYQOYTnJQPga8dPmib2QHCgXnP+NLGF0mMBzCwPSRjaK8CIiTXj3nnQoyQDMJ6hFQgyZHUiTxN0TsE6gLmwLURbxA4Ddbe9vGzi6XK8HbfbLDQSceFveBO3QnuL3aHNZ9e5NF0V4Nqr8F6swcPGi8anBnDd46BTp40.Se1DTKzsme67ciCpjc7A+cDyC5XupVHvGQB6xRcfjZCkGcO4f+VNLvc8zzkCscTuV9eHYeRNNdRh4h0Z7AYbQtF54jCiv3AjPSQGgcuzQXfsCGPdVoLWvdK5B0Q6SlKnXzdhskzWKh774pt0FeBL4IFHPPPhCOHEOY1pPgIcrrUzpcT.MjdIVtBikKPtOKZwTRzGWe2cTIgfDjX1K4twRyNOVSFrcMK77L8UKPgHCqtP5HHepGERCRCH9m3FPON6.zWa6svpWv9Cym3J.5VnBb2MU4D0qfwsgdCmUoMp5XYwIe+tMv7y2CAmWMXbB7GOC7IhAfAXGQ.aW27WdlGIGjz+PMaNvwvXHOgiC164.FFuGDuQQXd2dcNf4EK6gHZj4Bou.AygeAB52ugkJjVCQg6lt7fc6xbG1sdXDlGvvHS1PoBPMPdUCuQ3UMT2gC0XL31FYdESUFBCoDGdIO+w+4WHpXLATeQSLscJZqb0+5uahn8GXJSclhXxW+o+9Ih3rlgoCSS92szuchH+0M0xKlhEO4i+Me6MlLIHrxRJx+rr+6u9FmEIPlNOMKB9p+0DwhWyLo1SZNboFSlP7Fl5EURwCi26u8Wtgwc2bcZ.Eu2pPuJvSqKyKfiNwYVm8PtEScKVYAgw+v.QWiLyDW9AjwfvqcSM2UcDTrWm83fytxJF14kwwwWv3SpT4jjaarPkCZEcWiYuH.3oHTXC.cRf9zm9zeZZnkCA+DDL13WJVH+bD2Nnc77T4IUZyvtBSDiCqDpzJM7MMiuRKXalcaaHMMY90lOZFBIWbH3l14fxNpr43.a5ZyNF.UT9TUH4h3n6K7NTdKY.b4AtKGK47u2S.YfvqnEFubwBJRuqOjQisNjBx0GR5fE0hHelGig8wF8YFez9w5Wmah09y5ToCMYrs9GU5vsgpOQmpRh45KpzMQiwDAnFaDW1YS8ICpUxPTjWirMqIsmiJKdhP7ypnq.YGWBGMw2VS7q7rT7CmpTB+jYkixrkHIeo2zHkFe53kxn4Z71XPFlLwOI2pVL4iddYlSlsmgpP576Zpw8zSs3MdoKMiTR36XtivqC0A14tcMlmEHKzVLC+dMaxOFKK+dFCaA8atwfc++taLoKMQEcRzIxQmQcJgIO2zmu4Fms0IU8mgjT5I8l70IEidgqWoJMOjz.ShZkhOuv0p9ZWXHYGlD8pON87TyN8KbyaZJ27EdQC5u+O3aIU3.Hu0eoavWrFnnavI5QrOydoflTQ7sLqwCrZOXY7bCPFg91ddHiguJUut4FMaBaFLQ.ufY0O44y6Mk9zeI0z+pl2m9Pl78eSN4+X4yvFS6PtItaSz1UZDuFb+8I80fq6D+ZvsqU.HB6Act42U3yJoy45rN78fHL+TP6ihxCjhTPWmEzyMl0Ulate3Wp.kBKzTTELEZS1qTIBXYcf0ntZH8oeI7bY8FP1lerd3zFt3AKVmAZt8t9VfgAsy5gE0vK049Xu0kzILAbYcv2h5YCqgVobZO+ndY.KMkuLfW7ktWFvuGjZJ06qX1HYrNuSWG1FgmwkTFeanPkLAbDzzgdaKbEcaKb4oVnuCKvi2pEKk+y.UnvMRjhVUSiQft8etxVbWF0aaYsjoxVT5L+taNv0q2MrWDBluf782RJm++qKoLHW621rlv4DkiZUtCzrRzaUs7gQUNwvnpG6W0i4ZEYsp7sUVnxsiNQs+vm+ZUR6Z9tUtcOnYmzV2U4cENTu+a8NFim7ElP2i2wLVodY2OFWMd4VF+IlgKtDznRdwmO+shZjJ9bsjxYX+5SY56PcbnpRpL4xyYVdJKZmcr57LzNO3ncqpcBqoy9KO129y6quucsi1UeahZm2p11rzNC0TaRQ6bQelEINo9Nug4se414F6X53WtEwKYBMrVlHK3QdwTw6Nhd3oeuMEBbf1pM2oWm5vtGrXfT55xbvaFJy4v6vQ8bQ7Y0dAbskO7T3S3fkvmyDNXonA+exbzgZ4Idfk5BFvzJuhDBn2tx+K.k0ba7YRozWo.9A1AO+AVVoY0oHr7zR3bSKgyOsDtvzR3hSKgKMsDt73ID22yJ8BDcTwFFFaWaC08bjQs0OYXhw+APh6k1o

const var ft_Flex = Content.getComponent("ft_Flex");
const var laf_flex = Content.createLocalLookAndFeel();
	
	// Background 
	laf_flex.registerFunction("drawFlexAhdsrBackground", function(g, obj)
	{
	    g.setGradientFill([0xFF1a1a1a, 0, 0, 0xFF1a1a1a, 0, obj.area[3], false]);
	    g.fillRect(obj.area);
	});
	
	// Path w/ 3 Strokes and gradient fill
	laf_flex.registerFunction("drawFlexAhdsrFullPath", function(g, obj)
	{
	    g.beginLayer(true);
	    
	    g.setColour(0x3333AAFF);
	    g.drawPath(obj.path, obj.pathArea, 8.0);
	    
	    g.setColour(0x5533AAFF);
	    g.drawPath(obj.path, obj.pathArea, 4.0);
	    
	    g.setColour(0xFF33AAFF);
	    g.drawPath(obj.path, obj.pathArea, 2.0);
	    
	    g.setColour(Colours.white);
	    g.drawPath(obj.path, obj.pathArea, 1.0);
	    
	    g.endLayer();
	    
    	// Gradient fill
	    var fadeStart = obj.pathArea[1] + obj.pathArea[3] * 0.6; 
	    g.setGradientFill([0x5033AAFF, obj.pathArea[0], obj.pathArea[1], 
	                       0x00ffffff, obj.pathArea[0], fadeStart, false]);
	    g.fillPath(obj.path, obj.pathArea);
	});
	
	// Curve point handles 
	laf_flex.registerFunction("drawFlexAhdsrCurvePoint", function(g, obj)
	{
	    var pointSize = 8;
	    var halfSize = pointSize / 2;
	    
	    g.beginLayer(true);
	    g.setColour(0x4433AAFF);
	    g.fillEllipse([obj.curvePoint[0] - halfSize - 3, obj.curvePoint[1] - halfSize - 3, 
	                   pointSize + 6, pointSize + 6]);
	    g.endLayer();
	    
	    g.setGradientFill([0xFF66BBFF, obj.curvePoint[0] - halfSize, obj.curvePoint[1] - halfSize,
	                       0xFF1A7ACC, obj.curvePoint[0] + halfSize, obj.curvePoint[1] + halfSize, true]);
	    g.fillEllipse([obj.curvePoint[0] - halfSize, obj.curvePoint[1] - halfSize, pointSize, pointSize]);
	    
	    g.setColour(0xFF33AAFF);
	    g.drawEllipse([obj.curvePoint[0] - halfSize, obj.curvePoint[1] - halfSize, pointSize, pointSize], 1);
	    
	    var innerSize = 3;
	    var innerHalf = innerSize / 2;
	    g.setColour(0x88FFFFFF);
	    g.fillEllipse([obj.curvePoint[0] - innerHalf, obj.curvePoint[1] - innerHalf, innerSize, innerSize]);
	});
	
	// Individual segment rendering with active state indication
	laf_flex.registerFunction("drawFlexAhdsrSegment", function(g, obj)
	{
	    var reducedArea = [obj.area[0] + 8, obj.area[1] + 8, obj.area[2] - 16, obj.area[3] - 16];
	    
	    if (obj.active)
	    {
	        g.setColour(0x4433AAFF);
	        g.fillPath(obj.path, reducedArea);
	        
	        g.setColour(0x7733AAFF);
	        g.drawPath(obj.path, reducedArea, 2.0);
	    }
	    else
	    {
	        g.setColour(0x1533AAFF);
	        g.fillPath(obj.path, reducedArea);
	    }
	});
	
	// Position indicator, this part is AI
	laf_flex.registerFunction("drawFlexAhdsrPosition", function(g, obj)
	{
	    var markerSize = 14;
	    var halfSize = markerSize / 2;
	    var pulseSize = markerSize + Math.sin(Engine.getUptime() * 8) * 2;
	    var pulseHalf = pulseSize / 2;
	    
	    // Outer glow layer
	    g.beginLayer(true);
	    g.setColour(0x4433AAFF); // Blue glow
	    g.fillEllipse([obj.pointOnPath[0] - pulseHalf - 4, obj.pointOnPath[1] - pulseHalf - 4, 
	                   pulseSize + 8, pulseSize + 8]);
	    g.endLayer();
	    
	    // Main gradient ellipse
	    g.setGradientFill([0xFF66BBFF, obj.pointOnPath[0] - halfSize, obj.pointOnPath[1] - halfSize,
	                       0xFF1A7ACC, obj.pointOnPath[0] + halfSize, obj.pointOnPath[1] + halfSize, true]);
	    g.fillEllipse([obj.pointOnPath[0] - halfSize, obj.pointOnPath[1] - halfSize, markerSize, markerSize]);
	    
	    // Blue outline
	    g.setColour(0xFF33AAFF);
	    g.drawEllipse([obj.pointOnPath[0] - halfSize, obj.pointOnPath[1] - halfSize, markerSize, markerSize], 1.5);
	    
	    // White core highlight
	    var coreSize = 3;
	    var coreHalf = coreSize / 2;
	    g.setColour(0xFFFFFFFF);
	    g.fillEllipse([obj.pointOnPath[0] - coreHalf, obj.pointOnPath[1] - coreHalf, coreSize, coreSize]);
	});
	
	// Label
	laf_flex.registerFunction("drawFlexAhdsrText", function(g, obj)
	{
	    var padding = 20;
	    var textArea = [obj.area[0] + obj.area[2] - 100 - padding, obj.area[1] + padding, 100, 30];                                        
	   
	    // Text
	    g.setFont("Arial", 12);
	    g.setColour(0xFF33AAFF);
	    g.drawAlignedText(obj.text, textArea, "right");
	});
	
	ft_Flex.setLocalLookAndFeel(laf_flex);

David Healey

The thing about the flex envelope in Kontakt that makes it a flex envelope, is that you can add a flexible number of points to it and adjust them. You can't do this with the HISE "flex envelope" which is really just an AHDSR with a nice UX.

Peek 2025-08-22 20-54.gif

I'd really like it if the flex envelope at least allowed us to define custom shapes for the sustain section. Or if the table envelope could loop its sustain part which would achieve the same thing.

Lindon

@d-healey also called a.multisegment or mseg envelope...

DanH

@Christoph-Hart nice thanks!

HISEnberg

@Christoph-Hart Just following up on this, is it necessary to set up the Flex Envelope with all the sliders and this broadcaster in order to save/load from a preset (i.e. was that your intention)?

Using just the floating tile doesn't seem to save the settings to the user preset. It would be nice if this were possible, but obviously we can just hide the sliders if we don't want them.

HISEnberg

Just seeing that using Engine.addModuleStateToUserPreset("MyFlex") solves this!

DanH

@HISEnberg Yep laf for the square handles would be great!!

I also find that if the attack is at Zero I can't increase it using the handles. I have to increase the attack knob before the handle works...

DanH

@DanH also the loop mode is really cool, but what is the use case for 'Trigger'?

And what's a nice way to sync the envelope to bpm?

Orvillain

Is there a way to draw a custom point shape, instead of the squares ?? I've managed to do it for the curve points, but the squares remain.

Flex Envelope - No UI control for Hold

30

2.2k

13.3k

115.6k