HISE Logo Forum
    • Categories
    • Register
    • Login

    Reverb visualizer

    Scheduled Pinned Locked Moved General Questions
    16 Posts 6 Posters 420 Views
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • d.healeyD
      d.healey @tiesvdam
      last edited by

      @tiesvdam What do you want it to look like?

      Libre Wave - Freedom respecting instruments and effects
      My Patreon - HISE tutorials
      YouTube Channel - Public HISE tutorials

      T 1 Reply Last reply Reply Quote 0
      • T
        tiesvdam @d.healey
        last edited by

        @d-healey Scherm­afbeelding 2024-12-20 om 13.15.04.png

        d.healeyD T 2 Replies Last reply Reply Quote 0
        • d.healeyD
          d.healey @tiesvdam
          last edited by d.healey

          @tiesvdam Well you can draw things like that using a panel or laf https://forum.hise.audio/topic/3507/paint-routine-for-natan/21?_=1734697067877

          You're going to have to give more details though about how you want it to function.

          Libre Wave - Freedom respecting instruments and effects
          My Patreon - HISE tutorials
          YouTube Channel - Public HISE tutorials

          1 Reply Last reply Reply Quote 0
          • T
            tiesvdam @tiesvdam
            last edited by

            @tiesvdam I have 3 buttons:

            One button for the gain of the reverb. I want the reverb visualizer to have thicker lines as the gain increases.
            One button for the size of the reverb. I want the visualizer to become wider as the size increases.
            One button for the width of the reverb. I want the lines in the visualizer to spread further apart as the width increases.
            I hope this is possible!

            d.healeyD mmprodM 2 Replies Last reply Reply Quote 0
            • d.healeyD
              d.healey @tiesvdam
              last edited by

              @tiesvdam said in Reverb visualizer:

              I hope this is possible!

              Yes all possible, using a panel/paint routine.

              Libre Wave - Freedom respecting instruments and effects
              My Patreon - HISE tutorials
              YouTube Channel - Public HISE tutorials

              1 Reply Last reply Reply Quote 0
              • mmprodM
                mmprod @tiesvdam
                last edited by

                @tiesvdam I think @oskarsh has some similar visuals in his Reach reverb plug-in. You could take a look at that

                For God so loved the world that he gave his one and only Son, that whoever believes in him shall not perish but have eternal life.
                John 3:16

                1 Reply Last reply Reply Quote 1
                • ustkU
                  ustk @tiesvdam
                  last edited by

                  @tiesvdam Done something similar here that you can take inspiration from:

                  Link Preview Image
                  Display ScriptNode Reverb in GUI

                  @DabDab Here's a (very naive) example HiseSnippet 1194.3ocsV0sSabDEdVvaa71lpFo9.LhqVabc7OPvQTTbv.ATJDqXZ9QHDZ7ti8NxqmY6tiiwJk2gdatquF8Mn22K5qQeCZOyr6hWCFBX0t...

                  favicon

                  Forum (forum.hise.audio)

                  Can't help pressing F5 in the forum...

                  T 1 Reply Last reply Reply Quote 0
                  • T
                    tiesvdam @ustk
                    last edited by

                    @ustk

                    Thanks for the tip

                    i have the following problem: When i use de script in my own project and i change a few things the floating title stays empty. What I'm doing wrong? (i only have 1 know for my reverb)

                    This is my edited script:

                    const var pnl = Content.getComponent("pnl");

                    const var knbs = [Content.getComponent("Knob1")];

                    pnl.setPaintRoutine(function(g)
                    {
                    g.fillAll(Colours.black);
                    g.setColour(Colours.antiquewhite);

                    var nbRect = 5;
                    var nbGaps = nbRect*2;
                    var gapW = this.getWidth() / (nbGaps + nbGaps * (1.0 - knbs[0].getValue()));
                    

                    });

                    inline function onKnob1Control(component, value) { pnl.repaint(); };

                    for (k in knbs) k.setControlCallback(onKnob1Control);

                    ustkU HISEnbergH 2 Replies Last reply Reply Quote 0
                    • ustkU
                      ustk @tiesvdam
                      last edited by

                      @tiesvdam you set variables but don't draw anything. You're missing that part:

                      	for (i=1;i<=nbRect;i++)
                      	{
                      		var s = knbs[2].getValue() * 0.9 + 0.1;
                      		var w = gapW * i * s;
                      		var h = gapH * i * s;
                      		var x = this.getWidth()/2.0 - w;
                      		var y = this.getHeight()/2.0 - h;
                      		
                      		g.drawRect([x,y,w*2,h*2], 1.0);
                      	}
                      

                      Can't help pressing F5 in the forum...

                      T 1 Reply Last reply Reply Quote 0
                      • HISEnbergH
                        HISEnberg @tiesvdam
                        last edited by

                        @tiesvdam

                        I had a bit of a different methodology, but I created an animation for this sort of thing a while back. I adapted it to fit your needs, let me know what you think :)

                        HiseSnippet 1391.3ocsWs0aaaCElJMpqwacaEX+.HxKSI0MQN1NMCYEqs4RaPWRMpay5vvP.sDsEQjHEjnqSVQ+usG2Om81db6bnjrniSuYf4GRL44124vyM2KSEvyyUYDmFu7xTNw4qb6eoTGsWDSHIGsOw4abOHNVjlyyO6YR0.xiuLkkmyCINN23IHSNqrLw74u+oGyhYx.d8UDxoJQ.+mEIBc8s8d3yDwwGxB4uTjXwcmGdTfRtmJVMF.zMb8IorfyYi3mvP1Vxk7TVdDwYc2sC9gt9C39c6tSm16zoy1c1tq+P+1CGry1cFz99cZG1oaqf1DmadPnPqx5qYZdNnzGqBurejZhrv.mJxECh43gVj9fkKtlrWjHNrWUzImPbVtWcr5FEwpuy8XQnX580wru0PfVKgcPyYoODjZ8Y.IGKHsbAjtia+fLQptlBhmuz8HolmMjAuM1PofWxR+yMc2SAbH0ajvNmeXFbXpDda462j112escazXyMoGIEZAKV7GbpNhSqxNn8XRdbC3ALWSeCKi1SFOk1CnU5eDWumJIUIgCdqZwypf5sNtQNGnyhiUS1C96.HQHe0lzUOAjDYs1NOSNneZFmE9dsxTNPAsjTNNwBgc2kBd2orLACB+zgpLi+ALMfmQUCo7RdszPtNScN+WDg5HPCac8ZHVHwPkH3bI7jXhgGNVFnEJIUqngYrIS0Mc.Cdan.kbChaHjFwGVI.xcEn8FsF8sMnvmXU.KlNoDG1gQHRXfmG350bFwEihzyy5SM2OKuAbLS30.yE5eSvOmi7uBjKUpgtgAvQeBWW5ITHWBx5oCyTIzygNIeeNDBiGyszUAmGVv3CpeYQncJxKhrJUCoEAiigZHSPNgcgHYbBMGyKYxPZnHWiMinC35Ibtr94q1dfPufEJFiO+GyzQajHjdFurYo2r1Uc2bMOE3tVxMmIMZ8Y7gZvtO9Hi3bFTfYHdBPc96REzezVSvE28tUOu0lOqBtFbrNJ8cosphJyEYTPCTg9x5rJgLjegMuuLRjCOrwvCIabNmJzXN4Pn2LcRDD0fyf+DDA9lA9gifuAEC3gTSE+r.rxhkAzLlbD2q0F9z6Q8xphXSidq0j5uAzcAX3J9v9VUESueD1UnX9fWw+x2XhPG8n3zHV8MQBMuYERVqLYtPdqxGueqJy9dkg0lSSlquYprW4SourNcqlVe+2aZ2Rnzxuqw6LE88gZgogMH6OEFW.QW0XMTge0de8PhunflmcQOFmPsgCioUsFmqMgRNs3A6Iloh8BpZH1rntasFuswJ1VMiaPDVi8tca7QakV7VXzcEL7l2rHbsP0IJM+4ROisgvB8pjFN7ZoUprXd10RFWiH6CInWQWbaOGYDFaN6r3a9oMKNnH1XwnRhiEedJu77gp3PbFK984mbSJCt3L7RDBrpMSv+5xI38iEg7LhHDGeOMpRLNf8NWjWcz9LMqRUfVAKkxyzBzgb1m+FXArhkCVwced94ZUJrK0z2ThyWTX3aWs5.ldZr6scsROHWXuV2k1GlcJMDEcwozDSiThiqyeA7TzNs5Dwx7teR986w5+Y7C07K.sbK2RFIyuTDrNlJDaHN6NZ31qkDfjkYVLBW9QlCcOrizeFKt4+AWb6SEh2wsmPGDc8XboqAiPRv+GXrbc2a6dvvg7.cM.W18vWun619QLeQquQvPjLA716dx3j9P28.NXcIjflioRKgYREm8wyXDnOWFZN7uvmRhsvyNkDaUQjjvBxTmETT.hKTeKyM.ljlevwJtGimostZUGgj.62eVPvrpZNA2ZQEr8hJXmEUvtKpfaunBd+EUvc93Bh+7qGMVqRJJaHji6cfoKoiyARb4bS1J4+nZFgsJ
                        
                        Content.makeFrontInterface(200, 300);
                        
                        // Initialize the Ellipses Panel
                        const var PnlEllipses = Content.getComponent("PnlEllipses");
                        PnlEllipses.set("allowCallbacks", "None");
                        const var KnbSpread = Content.getComponent("KnbSpread");
                        
                        const var numEllipses = 5; // Variable for the number of ellipses
                        const var strokeWidth = 2; // Variable for the line thickness
                        
                        // Function to draw ellipses based on spread
                        inline function drawEllipses(g) {
                            local width = PnlEllipses.getWidth();
                            local height = PnlEllipses.getHeight();
                            local centerX = width / 2;
                            local centerY = height / 2;
                        
                            // Get spread factor from knob's value
                            local spreadFactor = KnbSpread.getValue();
                        
                            // Calculate the maximum size and distance between ellipses
                            local maxRadius = Math.min(width, height) / 2;
                            local step = maxRadius / numEllipses * spreadFactor;
                        
                            // Draw the ellipses
                            for (i = 0; i < numEllipses; i++) {
                                local radius = step * (i + 1);
                        
                                // Calculate opacity based on index
                                // This will cause it to fade when it reaches the edges of the panel
                                local opacity = Math.range(1.0 - (radius / maxRadius), 0.0, 1.0);
                        
                                // Draw ellipse
                                g.setColour(Colours.withAlpha(Colours.white, opacity));
                                g.drawEllipse([centerX - radius, centerY - radius, 
                                               radius * 2, radius * 2], strokeWidth);
                            }
                        }
                        
                        // Set the panel's paint routine
                        PnlEllipses.setPaintRoutine(drawEllipses);
                        
                        
                        // Knob Callback
                        inline function onKnbSpreadControl(component, value)
                        {
                        	PnlEllipses.repaint();
                        };
                        Content.getComponent("KnbSpread").setControlCallback(onKnbSpreadControl);
                        
                        
                        
                        1 Reply Last reply Reply Quote 1
                        • T
                          tiesvdam @ustk
                          last edited by

                          @ustk This looks perfect, the only problem is when i connect the button with a effect in my Script the graph doesn't react on the button no more. Can you help me?

                          ustkU 1 Reply Last reply Reply Quote 0
                          • ustkU
                            ustk @tiesvdam
                            last edited by

                            @tiesvdam When you connect a component through he property editor, it has entire priority over the script callback and deactivate it. So just do everything in the script and don't use the property connection, that should do it.

                            Can't help pressing F5 in the forum...

                            T 1 Reply Last reply Reply Quote 0
                            • T
                              tiesvdam @ustk
                              last edited by

                              @ustk ok sound clear. I understrand. What part do i need to change. I'm a noob, sorry xD

                              ulrikU 1 Reply Last reply Reply Quote 0
                              • ulrikU
                                ulrik @tiesvdam
                                last edited by ulrik

                                @tiesvdam the property editor will show up as soon as you select the component
                                Make sure it's not connected to any "processorId"
                                Because if it is, it will overide your script and it will not work
                                Skärmavbild 2025-01-02 kl. 13.52.06.png

                                Hise Develop branch
                                MacOs 15.3.1, Xcode 16.2
                                http://musikboden.se

                                T 1 Reply Last reply Reply Quote 0
                                • T
                                  tiesvdam @ulrik
                                  last edited by

                                  @ulrik Okay sounds clear, but what is the right way to connect it in this scripting?

                                  // Initialize the Ellipses Panel
                                  const var PnlEllipses = Content.getComponent("PnlEllipses");
                                  PnlEllipses.set("allowCallbacks", "None");
                                  const var KnbSpread = Content.getComponent("KnbSpread");

                                  const var numEllipses = 5; // Variable for the number of ellipses
                                  const var strokeWidth = 2; // Variable for the line thickness

                                  // Function to draw ellipses based on spread
                                  inline function drawEllipses(g) {
                                  local width = PnlEllipses.getWidth();
                                  local height = PnlEllipses.getHeight();
                                  local centerX = width / 2;
                                  local centerY = height / 2;

                                  // Get spread factor from knob's value
                                  local spreadFactor = KnbSpread.getValue();
                                  
                                  // Calculate the maximum size and distance between ellipses
                                  local maxRadius = Math.min(width, height) / 2;
                                  local step = maxRadius / numEllipses * spreadFactor;
                                  
                                  // Draw the ellipses
                                  for (i = 0; i < numEllipses; i++) {
                                      local radius = step * (i + 1);
                                  
                                      // Calculate opacity based on index
                                      // This will cause it to fade when it reaches the edges of the panel
                                      local opacity = Math.range(1.0 - (radius / maxRadius), 0.0, 1.0);
                                  
                                      // Draw ellipse
                                      g.setColour(Colours.withAlpha(Colours.white, opacity));
                                      g.drawEllipse([centerX - radius, centerY - radius, 
                                                     radius * 2, radius * 2], strokeWidth);
                                  }
                                  

                                  }

                                  // Set the panel's paint routine
                                  PnlEllipses.setPaintRoutine(drawEllipses);

                                  // Knob Callback
                                  inline function onKnbSpreadControl(component, value)
                                  {
                                  PnlEllipses.repaint();
                                  };
                                  Content.getComponent("KnbSpread").setControlCallback(onKnbSpreadControl);

                                  1 Reply Last reply Reply Quote 0
                                  • First post
                                    Last post

                                  27

                                  Online

                                  1.8k

                                  Users

                                  12.1k

                                  Topics

                                  105.2k

                                  Posts