Search code examples
javascriptgrapheditortwo.js

Twojs blinking circle


I am working on a graph editor. I need to highlight a circle, and make that circle in the screen center and the set the zoom scale to 2. If the circle is already higlighted, to set it switch it and set as a normal circle. My need is a least to make the circle blink before to switch it off.

I dont see how to make the circle blink. could someone who knows about "two.js" how to do it. I know that it is in the function two.update();

    // Render loop
var temps = 0;
two.bind('update', function(){
    if  (selectedNodes.length > 0){
        if (temps > 0) {    
            temps -= 0.02;
            for(var i = 0; i < selectedNodes.length; i++){
                selectedNodes[i].circle.fill = 'yellow';
                selectedNodes[i].circle.scale = 1.3;
                selectedNodes[i].circle.stroke = "red";
                selectedNodes[i].circle.linewidth = 2;
            }
        } else {
            for(var i = 0; i < selectedNodes.length; i++){
                selectedNodes[i].circle.fill = '#FF8000';
                selectedNodes[i].circle.scale = 1;
                selectedNodes[i].circle.noStroke();
            }
        }
    }
});

and to trigger the blink

function Blink(){
    temps = 1;
}

is it the best way to have this blink (even if it blinks only one time)

here is a JsFiddle https://jsfiddle.net/hichem147/uf0b82ry/

To use it : Click on [(+) Node], then create some nodes, then click on [Select] and click on a circle, and click on [Blink] button.


Solution

  • Finally, I used setTimeout and setInterval

        function MakeCircleBlink(){
          var count = 5;
    
          if (count > 0) {
             var x = setInterval(function(){ 
                count--;
                console.log(count);
                if (count ===0) {clearInterval(x);}
                blink(); 
              }, 1000);  
    
    
          }  
        }
    
        function blink(n){
          n--;
        circle1.stroke = 'red';
        circle1.linewidth = 4;
        circle1.scale = 1.0;
    
        setTimeout(function(){ circle1.noStroke(); circle1.scale = 1;}, 500);
        }
    

    and here is a codepen showing how it works : https://codepen.io/hichem147/pen/jvjKzP?editors=0010