What is the correct way to trigger an event?

Hi Coders:

I try to trigger events when the camera identifies specific colors in the environment To listen to them from the doom and perform actions on an entity.
is some difficult, some like this:

 //var ct = tracking.ColorTracker
   tracking.ColorTracker.registerColor('green', function(r, g, b) {
        if (r == 0 && g == 250 && b == 0) {
            ...fire ('event');
        return false;

This is the full code now

<!doctype html>

<meta charset="utf-8">
 <title>tracking.js - draw something</title>
 <link rel="stylesheet" href="assets/demo.css">

 <script src="../build/tracking.js"></script>
 <script src="assets/splines.min.js"></script>

  <script src="assets/stats.min.js"></script>

    #video {
      height: 300px;
      position: absolute;
      width: 400px;
      padding-top: 66px;
      background: url(assets/draw_frame.png);
      width: 400px;
      height: 414px;
      border: 1px solid #ccc;
      top: 50%;
      left: 50%;
position: absolute;
      margin: -207px 0 0 -200px;

    canvas, video {
      -moz-transform: scale(-1, 1);
      -o-transform: scale(-1, 1);
      -webkit-transform: scale(-1, 1);
    filter: FlipH;
      transform: scale(-1, 1);


  <div class="demo-title">
   <p><a href="http://trackingjs.com" target="_parent">tracking.js</a>
 - use magenta color to draw and cyan to erase</p>

  <div class="demo-frame">
    <div class="demo-container">
   <div class="draw-frame">
    <video id="video" width="400" height="300" preload autoplay loop muted></video>
   <canvas id="canvas" width="400" height="300"></canvas>


    window.onload = function() {
      var video = document.getElementById('video');
 var canvas = document.getElementById('canvas');
   var context = canvas.getContext('2d');

      var drawSegments = [[]];
  var segment = 0;

      var tracker = new tracking.ColorTracker(['magenta', 'cyan']);


 tracking.track('#video', tracker, { camera: true });


tracker.on('track', function(event)
        if (event.data.length === 0 && drawSegments[segment].length > 0) {

 if (!drawSegments[segment]) {
            drawSegments[segment] = [];

        event.data.forEach(function(rect) {
if (rect.color === 'magenta') {
else if (rect.color === 'cyan') {

function draw(rect) {
        drawSegments[segment].push(rect.x + rect.width / 2, rect.y + rect.height / 2);

 function erase(rect) {
        context.clearRect(rect.x, rect.y, rect.width, rect.height);

  function isInsideRect(x, y, rect) {
        return rect.x <= x && x <= rect.x + rect.width &&
            rect.y <= y && y <= rect.y + rect.height;

 (function loop() {
          for (var i = 0, len = drawSegments.length; i < len; i++) {
              drawSpline(context, drawSegments[i], 0.5, false);

 drawSegments = [drawSegments[drawSegments.length - 1]];
          segment = 0;




Hello @Luis_Mb! I’m not an event expert, but I think you are looking for this.app.fire(event);. More information about events you can find on the page below.


I was finally able to Advance something. now lis events are firing correctly, but a scripted entity (… onEvent … do something …). does nothing yet. I am working with tracking.js, I ran all the code in glitch. I have the feeling that I am forgetting something very obvious. This is the code. Some ideas?? :thinking:. https://glitch.com/edit/#!/pcnv

Hi @Luis_Mb,

When is the ‘cyann’ event being fired? I don’t see it in the posted project. I see you’re passing dt to the function, which leads me to believe you would want this to happen every frame? If so, you would have to fire the ‘cyann’ event every frame to get the desired result.

When is the ‘cyann’ event being fired

Thanks for answering @eproasim Now i have updated the code