9_d0t_centered

How many ways can you connect 9 dots

by Simon Aharonian

HTML

<style>
    #svgelem {
      position: relative;
      left: 35%;
      transform: translateX(-90px);
      transform: translateY(250px);
    }

    .f1 {
      fill: black
    }

    .st4 {
      fill: none;
      stroke: #010101;
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-miterlimit: 10;
    }

  </style>


  <svg id="svgelem" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">

    <g id="grid" class="f1">
      <circle id="a" cx="30" cy="30" r="2.5" />
      <circle id="b" cx="60" cy="30" r="2.5" />
      <circle id="c" cx="90" cy="30" r="2.5" />
      <circle id="d" cx="30" cy="60" r="2.5" />
      <circle id="e" cx="60" cy="60" r="2.5" />
      <circle id="f" cx="90" cy="60" r="2.5" />
      <circle id="g" cx="30" cy="90" r="2.5" />
      <circle id="h" cx="60" cy="90" r="2.5" />
      <circle id="i" cx="90" cy="90" r="2.5" />
    </g>



    <g id="svg_2" class="st4">

      <line x1="30" y1="30" x2="30" y2="60" />
      <line x1="60" y1="30" x2="60" y2="60" />
      <line x1="90" y1="30" x2="90" y2="60" />
      <line x1="30" y1="60" x2="30" y2="90" />
      <line x1="60" y1="60" x2="60" y2="90" />
      <line x1="90" y1="60" x2="90" y2="90" />
      <line x1="30" y1="90" x2="60" y2="90" />
      <line x1="30" y1="60" x2="60" y2="60" />
      <line x1="30" y1="30" x2="60" y2="30" />
      <line x1="60" y1="90" x2="90" y2="90" />
      <line x1="60" y1="60" x2="90" y2="60" />
      <line x1="60" y1="30" x2="90" y2="30" />
      <line x1="90" y1="60" x2="60" y2="90" />
      <line x1="60" y1="60" x2="90" y2="90" />
      <line x1="30" y1="60" x2="60" y2="30" />
      <line x1="60" y1="60" x2="30" y2="30" />
      <line x1="30" y1="60" x2="60" y2="90" />
      <line x1="30" y1="90" x2="60" y2="60" />
      <line x1="60" y1="30" x2="90" y2="60" />
      <line x1="60" y1="60" x2="90" y2="30" />
      <line x1="60" y1="30" x2="30" y2="90" />
      <line x1="90" y1="30" x2="60" y2="90" />
     ...

CSS

#svg_2 {
    visibility: hidden;
}

JavaScript

var MAX_NUMBER = 8;


$("svg").click(function() {
  randomLinesByNumber(MAX_NUMBER);
    
    //randomLines();
});

/*setInterval(function(){
	//randomLines();
  var lines = $('#svg_2 line');
  var rand = Math.floor((Math.random() * lines.length) + 1);//
  randomLinesByNumber(MAX_NUMBER);
}, 100);
*/

$('#svg_2').css('visibility','visible');
//randomLinesByNumber(MAX_NUMBER);

function randomLinesByNumber(num){
	var lines = $('#svg_2 line');

  
    for(var i = 0; i < lines.length; i++){
    	var line = lines[i];
    	$(line).hide();
  	}
  
  var newItems = getRandomArrayElements(lines, MAX_NUMBER);
  
      for(var i = 0; i < newItems.length; i++){
    	$(newItems[i]).show();
  	}
  
  console.log(getRandomArrayElements(lines, MAX_NUMBER));

  
}

function randomLines(){
  var lines = $('#svg_2 line');




  for(var i = 0; i < lines.length; i++){
    var line = lines[i];
    var rand = Math.floor((Math.random() * lines.length) + 1);
    var lineCount = Math.floor((Math.random() * 9) + 1);
    console.log(line)
    if(rand % lineCount == 0){
      $(line).show()
    }else{
      $(line).hide()
    }

  }
}

function getRandomArrayElements(arr, count) {
    var shuffled = arr.slice(0), i = arr.length, min = i - count, temp, index;
    while (i-- > min) {
        index = Math.floor((i + 1) * Math.random());
        temp = shuffled[index];
        shuffled[index] = shuffled[i];
        shuffled[i] = temp;
    }
    return shuffled.slice(min);
}