from IPython.display import HTML, Javascript
HTML("""<canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas>""")

"""
Explanation: Balle rebondissante
C'est un exemple extrait d'un tutorial pour montrer comment faire du javascript depuis un notebook. Le code source est sur fiddle, le tutoriel est accessible sur Mozilla Developer Network.
On commence par ajouter du code HTML pour recevoir le résultat du javascript. Tout se passera dans cette fenêtre même s'il faudra exécuter la cellule qui suit celle-ci pour y voir quelque chose.
End of explanation
"""


Javascript("""
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var raf;

var ball = {
  x: 100,
  y: 100,
  vx: 5,
  vy: 2,
  radius: 25,
  color: 'blue',
  draw: function() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.fillStyle = this.color;
    ctx.fill();
  }
};

function draw() {
  ctx.clearRect(0,0, canvas.width, canvas.height);
  ball.draw();
  ball.x += ball.vx;
  ball.y += ball.vy;
  ball.vy *= .99;
  ball.vy += .25;

  if (ball.y + ball.vy > canvas.height ||
      ball.y + ball.vy < 0) {
    ball.vy = -ball.vy;
  }
  if (ball.x + ball.vx > canvas.width ||
      ball.x + ball.vx < 0) {
    ball.vx = -ball.vx;
  }

  raf = window.requestAnimationFrame(draw);
}

canvas.addEventListener('mouseover', function(e) {
  raf = window.requestAnimationFrame(draw);
});

canvas.addEventListener('mouseout', function(e) {
  window.cancelAnimationFrame(raf);
});

ball.draw();
""")

"""
Explanation: Le code Javscript qui suit va être ajouté à celui du notebook. Il s'active dès que le curseur passe au-dessus du cadre qui précède.
End of explanation
"""


from pyquickhelper.helpgen import NbImage
NbImage("balle.png", width=200)

"""
Explanation: Vous devriez voir quelque chose comme ceci :
End of explanation
"""


