<commit_before><!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>DAI particle</title>
  <style type='text/css'>
  #container {
    position:relative;
  }
  #bg {
    position:absolute;
    left:0px;
    top:0px;
    height: 150px;
    width: 300px;
    z-index: 1;
  }
  #billiard {
    position:absolute;
    left:0px;
    top:0px;
    height: 150px;
    width: 300px;
    z-index: 2;
  }
  </style>
<script type='text/javascript'>

var bilctx,
    bgctx;
var width,
    height;

var x = 100, y = 100;
var angle = 2*Math.PI*Math.random();
var dx = Math.cos(angle), dy = Math.sin(angle);

function init() {
  bilctx = billiard.getContext('2d');
  bgctx  = bg.getContext('2d');

  width = billiard.width;
  height = billiard.height;

  var img = new Image();
  img.onload = function() {
    img.width = width;
    img.height = height;
    bgctx.drawImage(img, 0, 0, bg.width, bg.height);
  }
  img.src = 'DAI.png';

  setInterval(draw, 10);
}

function draw() {
    //bilctx.clearRect(0,0, 500, 400);
    bilctx.beginPath();
    bilctx.fillStyle="#ff0";
    
    // Draw the particle as a cricle of radius 2
    bilctx.arc(x,y,1,0,Math.PI*2,true); 
    bilctx.closePath();
    bilctx.fill();
    
    // Boundary Logic
    var thr = 0.2;
    if( getPixelLuminace(x+dx, y) < thr ) dx=-dx; 
    if( getPixelLuminace(x, y+dy) < thr ) dy=-dy; 
    
    // Update the position
    x+=dx;
    y+=dy;
}

function getPixelLuminace(x,y) {
  var data = bgctx.getImageData(Math.round(x), Math.round(y), 1, 1).data;
  return  rgbToL(data[0], data[1], data[2]);
}

// Adapted from: http://stackoverflow.com/questions/2353211/hsl-to-rgb-color-conversion
// Takes RGB color data and gives back the luminace.
// Assumes r, g, and b are contained in the set [0, 255] and l in [0, 1]
function rgbToL(r, g, b) {
    r /= 255, g /= 255, b /= 255;
    var max = Math.max(r, g, b), min = Math.min(r, g, b);
    return (max + min) / 2;
}

</script>
</head>

<body onLoad="init();">
  <div id="container">
  <canvas id="bg">
  </canvas> 
  <canvas id="billiard">
  </canvas> 
  </div>
</body>

</html>
<commit_msg>Restart simulation on cliked point<commit_after><!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>DAI particle</title>
  <style type='text/css'>
  #container {
    position:relative;
  }
  #bg {
    position:absolute;
    left:0px;
    top:0px;
    height: 150px;
    width: 300px;
    z-index: 1;
  }
  #billiard {
    position:absolute;
    left:0px;
    top:0px;
    height: 150px;
    width: 300px;
    z-index: 2;
  }
  </style>
<script type='text/javascript'>

var bilctx,
    bgctx;
var width,
    height;

var x = 100, y = 100;
var angle = 2*Math.PI*Math.random();
var dx = Math.cos(angle), dy = Math.sin(angle);

function init() {
  bilctx = billiard.getContext('2d');
  bgctx  = bg.getContext('2d');

  width = billiard.width;
  height = billiard.height;

  var img = new Image();
  img.onload = function() {
    img.width = width;
    img.height = height;
    bgctx.drawImage(img, 0, 0, bg.width, bg.height);
  }
  img.src = 'DAI.png';

  setInterval(draw, 10);
}

function draw() {
    bilctx.beginPath();
    bilctx.fillStyle="#ff0";
    
    // Draw the particle as a cricle of radius 2
    bilctx.arc(x,y,1,0,Math.PI*2,true); 
    bilctx.closePath();
    bilctx.fill();
    
    // Boundary Logic
    var thr = 0.2;
    if( getPixelLuminace(x+dx, y) < thr ) dx=-dx; 
    if( getPixelLuminace(x, y+dy) < thr ) dy=-dy; 
    
    // Update the position
    x+=dx;
    y+=dy;
}

function getPixelLuminace(x,y) {
  var data = bgctx.getImageData(Math.round(x), Math.round(y), 1, 1).data;
  return  rgbToL(data[0], data[1], data[2]);
}

// Adapted from: http://stackoverflow.com/questions/2353211/hsl-to-rgb-color-conversion
// Takes RGB color data and gives back the luminace.
// Assumes r, g, and b are contained in the set [0, 255] and l in [0, 1]
function rgbToL(r, g, b) {
    r /= 255, g /= 255, b /= 255;
    var max = Math.max(r, g, b), min = Math.min(r, g, b);
    return (max + min) / 2;
}

function setBall(event) {
  event = event || window.event;
  
  bilctx.clearRect(0,0, width, height);
  x = event.pageX - billiard.offsetLeft;
  y = event.pageY - billiard.offsetTop;
  angle = 2*Math.PI*Math.random();
  dx = Math.cos(angle); 
  dy = Math.sin(angle);
}

</script>
</head>

<body onLoad="init();" onclick="setBall();">
  <div id="container">
  <canvas id="bg">
  </canvas> 
  <canvas id="billiard">
  </canvas> 
  </div>
</body>

</html>

{'fraction_non_alphanumeric': 0.175311884438608, 'fraction_numerical': 0.03173560954256949, 'mean_word_length': 2.8926746166950594, 'pattern_counts': {'":': 0, '<': 47, '<?xml version=': 0, '>': 43, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5635840', 'n_tokens_mistral': 1946, 'n_tokens_neox': 1806, 'n_words': 428}