anchor.diff:            draggable: true,
         });
   
  -      //Cuadricula
  +      let part = null; //Particula
  +      let line = null; //Trayectoria
  +      let R = null; //Radio de giro
  +      let angularSpeed = null; //Velocidad en el giro
  +
  +      /*** END GLOBAL VARIABLES ***/
  +
  +      //Grid
         function addline(x1, y1, x2, y2, st, col) {
             let line = new Konva.Line({
                 points: [x1, y1, x2, y2],
  
positive.code: <!-- KONVA -->
  <div class="btn-group menu2" role="group">
    <button type="button" onclick="startAnim()" class="btn btn-default" id="btnStart">Animate</button>
    <button type="button" onclick="selectCharge()" class="btn btn-default">Seleccionar carga</button>
    <button type="button" onclick="selectMagneticField()" class="btn btn-default">Seleccionar campo magnético</button>
  </div>
  <div id="container4">
  
  </div>
  
  
  <div>
    <script type="text/javascript">
  
        //GLOBAL VARIABLES
        let stage = new Konva.Stage({
            container: 'container4',   // id of container <div>
            width: 1200,
            height: 500
        });
  
        let layer = new Konva.Layer();
        //Campo magnetico
        let Bmag = 0.622; //Teslas
        let Bdir = "punto"; //Hacia dentro de la pantalla. "punto", hacia fuera de la pantalla.
        let Fm = [0, 0]; //Fuerza magnetica
  
  
        let label = new Konva.Label({
            x: 380,
            y: 200,
  
negative.code: 
            layer.add(line);
        }
        for (let i = 0; i < 500; i = i + 10) {
            addline(0, i, 1200, i, 0.8, 'gray');
            layer.draw();
        }
        for (let i = 0; i < 1200; i = i + 10) {
            addline(i, 0, i, 500, 0.8, 'gray');
            layer.draw();
        }
        //End grid
  
  
        stage.add(layer); //Add layer to stage
  
        /*** PARTICLE CLASS **/
        class Particle {
  
            constructor(color, mass, charge, type, vx, vy) {
                this.particle = new Konva.Circle({
                    x: 150,
                    y: 250,
                    radius: 12,
                    fill: color,
                    draggable: true,
                    id: 'particle',
                    offset: {
                        x: 0,
                        y: 0
                    }
                });
                this.velocity = [vx, vy];
                this.mass = mass;
                this.charge = charge;
                this.type = type;
            }
            draw() {
                layer.add(this.particle);
                layer.draw();
            }
  
            getPart() {
                return this.particle;
            }
  
            getType() {
                return this.type;
            }
  
            getCharge() {
                return this.charge;
            }
  
            getMass() {
                return this.mass;
            }
  
            getVelocity() {
                return this.velocity;
            }
  
        }
        /*** END **/
  
        /* ANIMACIN PARTICULA */
  
        let anim = new Konva.Animation(function (frame) {
  
            part.getPart().x(part.getPart().x() + part.getVelocity()[0]); //Prueba
            /*** CURVAR SI ENTRA EN EL CAMPO MAGNETICO */
            let xi = label.x();
            let xf = label.x() + label.getWidth();
            let yi = label.y();
            let yf = label.y() + label.getHeight();
            //Radio de curvatura
            let R = ((part.getMass() * ( Math.pow(part.getVelocity()[0], 2) + Math.pow(part.getVelocity()[1], 2) )) / (part.getCharge() * Bmag));
            if (part.getVelocity()[0] > 0 && Bdir === "cruz") {
                R = (-1) * R;
            }
            if ((part.getPart().x() >= xi && part.getPart().x() <= xf) && (part.getPart().y() >= yi && part.getPart().y() <= yf)) {
                //Esta en el campo magnetico
                part.getPart().x(part.getPart().x() + part.getVelocity()[0]); //Prueba
                part.getPart().y(part.getPart().y() + part.getVelocity()[1]);
                part.getVelocity()[1] += R;
            }
            else {
                //no lo esta
                part.getPart().x(part.getPart().x() + part.getVelocity()[0]); //Prueba
                part.getPart().y(part.getPart().y() + part.getVelocity()[1]); //
            }
            if (part.getPart().x() >= 1190 || part.getPart().y() >= 490 || part.getPart().x() <= 10 || part.getPart().y() <= 10) {
                anim.stop();
            }
            line.points(line.points().concat([part.getPart().x(), part.getPart().y()]));
            layer.draw();
        });
  
        /*** FUNCTIONS ***/
        function startAnim() {
            if (part !== null && line !== null && Bmag !== null) {
                line.points([part.getPart().x(), part.getPart().y()]);
                layer.add(line);
                //Radio de curvatura
                R = ((part.getMass() * ( Math.sqrt(Math.pow(part.getVelocity()[0], 2) + Math.pow(part.getVelocity()[1], 2)) ) ) / (part.getCharge() * Bmag));
  
                anim.start();
            } else {
                window.alert("Inserte una particula y un campo magnetico.");
            }
  
        }
        function drawCampo() {
  
            //Delete previous text
            let shape = stage.find('#txt');
            if (shape !== null) shape.destroy();
  
            let txt = "";
  
            for (let i = 0; i < Bf; i++) {
                for (let j = 0; j < Bc; j++) {
                    if (j < (Bc - 1)) {
                        if (Bdir === "cruz") {
                            txt += "X     ";
                        }
                        else {
                            txt += "■    ";
                        }
                    }
                    else {
                        if (Bdir === "cruz") {
                            txt += "X";
                        }
                        else {
                            txt += "■";
                        }
                    }
                }
                txt += "\n";
            }
            label.add(new Konva.Text({
                text: txt,
                fontFamily: 'Calibri',
                fontSize: 18,
                padding: 5,
                fill: 'black',
                fontStyle: 'bold',
                id: 'txt'
            }));
            layer.add(label);
            layer.draw();
        }
        function createMagneticField() {
            let input = prompt("Magnitud:", "");
            let create = true;
  
            if ((input !== null) && (input !== "")) {
                try {
                    let magnitud = parseFloat(input);
                    if (!isNaN(magnitud)) {
                        if (magnitud <= 0) {
                            window.alert("La magnitud debe ser mayor que cero.");
                            create = false;
                        } else {
  
                            Bmag = magnitud;
                            let direccion = prompt("Escriba un punto '.' o una 'x' para representar el sentido del campo: ", "");
                            if (direccion !== null) {
                                if (direccion === "x" || direccion === "X") {
                                    Bdir = "cruz";
                                }
                                else if (direccion === ".") {
                                    Bdir = "punto";
                                } else {
                                    window.alert("Direccion no valida.");
                                    create = false;
                                }
                            }
                        }
                        if (create) {
                            drawCampo();
                        }
                    } else {
                        window.alert("Escriba una magnitud valida.");
                    }
  
                }
                catch (e) {
                    window.alert("Escriba una magnitud valida." + e);
                }
            }
  
        }
        function createCharge() {
            //Delete the previous particle
            let shape = stage.find('#particle');
            let shape2 = stage.find('#line');
            if (shape !== null) shape.destroy();
            if (shape2 !== null) shape2.destroy();
  
            let line_color = "darkred";
            let seguir = true;
  
            let input = prompt("Introduzca una de las siguientes particulas: \n1) Proton\n2) Electron\n3) Positron");
            if ((input !== null) && (input !== "")) {
                if (input === "Proton" || input === "proton" || input === "PROTON") {
                    part = new Particle("blue", mp, cargap, "proton", 0.5, 0);
                    line_color = "darkblue";
                } else if (input === "Electron" || input === "electron" || input === "ELECTRON") {
                    part = new Particle("red", mp, cargap, "electron", 0.5, 0);
  
                } else if (input === "Positron" || input === "positron" || input === "POSITRON") {
                    part = new Particle("green", mp, cargap, "positron", 0.5, 0);
                    line_color = "darkgreen";
                } else {
                    window.alert("No se ha podido crear la particula.");
                    seguir = false;
                }
  
                if (seguir) {
                    part.draw();
                    //Create trayectoria
                    line = new Konva.Line({
                        points: [part.getPart().x(), part.getPart().y()],
                        stroke: line_color,
                        strokeWidth: 1.4,
                        lineJoin: 'round',
                        lineCap: 'round',
                        tension: 0.2,
                        id: 'line'
                    });
                }
  
            }
        }
  
        layer.draw();
  