Animatie

Animatie

Je kan iets herhaaldelijk laten doen, als volgt:

let rec teken_bol x y =
  let slaaptijd_in_seconden = 0.5 in
  Lwt.bind (Lwt_js.sleep slaaptijd_in_seconden) (fun () -> fill_circle x y 5; teken_bol (x + 5) (y + 5))

Roep nu op: teken_bol 0 0 en houd het canvas (het vakje rechts) in het oog.

Als je de animatie wilt kunnen stopzetten, moet je het resultaat van teken_bol 0 0 aan een variabelen toekennen:

let animatie = teken_bol 0 0

Dan kan je op een later moment de animatie stoppen als volgt:

Lwt.cancel animatie

Oefening:

• Laat een pulserende (groter en kleiner wordende) schijf zien. Minimale grootte: 10. Maximale grootte: 100. Wordt gedurende een seconde groter, dan gedurende een seconde kleiner, enz.

Oefening:

• Laat een pulserende schijf zien, die bovendien om de seconde van kleur verandert: eerst groen, dan rood, dan weer groen.

Oefening:

• Laat een pulserende schijf zien, die om de seconde van kleur verandert, en waarbij er voor de kleur door een gegeven array van kleuren geroteerd wordt.

Muis- en toetsenbordgebeurtenissen afhandelen

Opdracht:

• Tik het volgende in:

  loop [Key_pressed]
    (function {mouse_x=x;mouse_y=y;key} ->
      moveto x y; draw_char key)
  

• Plaats de muis dan over het canvas.
• Tik dan eender welke lettertoets in.
• De letter verschijnt in het canvas.

Opdracht:

• Tik het volgende in:

  loop [Mouse_motion] (function {mouse_x=x;mouse_y=y} -> fill_circle x y 5)
  

• Beweeg de muis dan over het canvas.
• Er verschijnt een cirkel op alle plaatsen waar de muis langskomt.

Combinatie animatie en invoer

Laat de stip de muis volgen:

let doel = ref (0, 0);;
let snelheid = ref 4.0;;
let rec naar_doel x y =
  let slaaptijd_in_seconden = 0.1 in
  Lwt.bind (Lwt_js.sleep slaaptijd_in_seconden) (fun () ->
    clear_graph ();
    fill_circle (int_of_float x) (int_of_float y) 5;
    let (doelx, doely) = !doel in
    let (relx, rely) = (float doelx -. x, float doely -. y) in
    let s = !snelheid in
    let afstand = sqrt (relx *. relx +. rely *. rely) in
    naar_doel (x +. relx /. afstand *. s) (y +. rely /. afstand *. s)
  );;
let animatie = naar_doel 100.0 100.0;;
loop [Mouse_motion] (function {mouse_x=x;mouse_y=y} -> doel := (x, y));;