jueves, junio 13, 2013

Canvas - Dibujando poligonos con Javascript (Herencia y pseudo polimorfismo)

En el ejemplo anterior definimos de una manera muy basica varios poligonos, bueno decidi buscar la manera de pintarlos en un lienzo (canvas) y aqui el resultado (ojo necesitas un browser que soporte HTML 5)

Lo primero el HTML


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Figure Example</title>
</head>
<body>

    <canvas id="myCanvas" width="300" height="300" style="border: solid 1px black"></canvas>


    <script type="text/javascript" src="figure.js"></script>

</body>
</html>

Note q al javascript le hemos dado el nombre de figure.js

Seguidamente el codigo con el canvas, es bastante sencillo para mas detalles busque la documentacion de cada metodo.



/**
 * User: jsanca
 * Date: 6/12/13
 * Time: 11:10 PM
 */

// Defines a point
function Point (x, y) {

    this.x = x;
    this.y = y;
} // Point


// Basic definition of a Figure, just a point in nowhere.
function Figure (point, name) {

    this.point = point;
    this.name = name;

    this.render = function (context) {

        console.log("figure: " + this.name + " " +this.point);
    }
} // Figure.

// the points defines some of the sides
function Square (point1, point2, name) {

    Figure.call(this, point1, name);
    this.point2 = point2;

    this.side = function () {

        var side =
            (this.point2.x == this.point.x)?
                this.point2.y - this.point.y:
                this.point2.x - this.point.x;

        return Math.abs(side);
    }

    this.area = function () {

        var side = this.side();

        return Math.pow(side, 2);
    }

    this.render = function (context) {

        // render out the square.
        var side = this.side();

        context.fillStyle = "rgb(0,0,255)";
        context.fillRect (this.point.x, this.point.y, side, side);

        console.log("square: " + this.name + ", area = " + this.area());
    }
} // Square.

Square.prototype.parent = Figure.prototype;
Square.prototype.constructor = Square;

// the points defines the point angles
function Triangle (point1, point2, point3, name) {

    Figure.call(this, point1, name);
    this.point2 = point2;
    this.point3 = point3;

    this.area = function () {

        var base = 0;
        var verticalHeight = 0;

        if (this.point2.x == this.point.x) {

            base = this.point2.y - this.point.y;
            verticalHeight = this.point.x - this.point3.x;
        } else {

            base = this.point2.x - this.point.x;
            verticalHeight = this.point.y - this.point3.y;
        }


        return 0.5 * Math.abs(base) * Math.abs(verticalHeight);
    }

    this.render = function (context) {

        console.log("triangle: " + this.name + ", area = " + this.area());

        // the triangle tooks a base point and them move to the rest of the angle point
        context.fillStyle = "rgb(255,0,0)";

        context.beginPath();
        context.moveTo(this.point.x,this.point.y);
        context.lineTo(this.point2.x,this.point2.y);
        context.lineTo(this.point3.x,this.point3.y);

        context.fill();
    }
} // Triangle.

Triangle.prototype.parent = Figure.prototype;
Triangle.prototype.constructor = Triangle;

// the points you pass are the diagonal of the rectangle.
function Rectangle (point1, point2, name) {

    Figure.call(this, point1, name);
    this.point2 = point2;

    this.width = function () {

        return Math.abs(this.point2.x - this.point.x);
    }

    this.height = function () {

        return Math.abs(this.point2.y - this.point.y);
    }


    this.area = function () {

        return this.width() * this.height();
    }

    this.render = function (context) {

        console.log("rectangle: " + this.name + ", area = " + this.area());

        context.fillStyle = "rgb(0,255, 0)";
        context.fillRect (this.point.x, this.point.y, this.width(), this.height());

    }
} // Rectangle.

Rectangle.prototype.parent = Figure.prototype;
Rectangle.prototype.constructor = Rectangle;

// the points defines the radius
function Circle (point1, point2, name) {

    Figure.call(this, point1, name);
    this.point2 = point2;

    this.radius = function () {

        var radius =
            (this.point2.x == this.point.x)?
                this.point2.y - this.point.y:
                this.point2.x - this.point.x;

        return Math.abs(radius);
    }

    this.circumference = function () {

        var radius = this.radius();

        return 2 * Math.PI * radius;
    }

    this.area = function () {

        var radius = this.radius();

        return Math.PI * Math.pow(radius, 2);
    }

    this.render = function (context) {

        var radius = this.radius();

        console.log("circle: " + this.name + ", area = " + this.area() + ", circumference = " + this.circumference() + ", radius = " + radius);

        context.fillStyle = "rgb(255,255, 0)";

        context.beginPath();
        context.arc(this.point.x, this.point.y, radius , 0,2 * Math.PI);
        context.stroke();
    }
} // Circle.

Circle.prototype.parent = Figure.prototype;
Circle.prototype.constructor = Circle;

console.log("Running");
var figuresArray = new Array(
    new Square  (new Point(10,10), new Point(10,30), "Cuadrado 1"),
    new Square  (new Point(10,50), new Point(20,50), "Cuadrado 2"),
    new Triangle(new Point(10,10), new Point(10,20), new Point(0,15), "Mi Triangulito"),
    new Triangle(new Point(100,100), new Point(60,160), new Point(160,160), "Triangulo grande"),
    new Rectangle(new Point(80,50), new Point(90,80), "Mi Rectangulo"),
    new Circle(new Point(200,200), new Point(200,225), "Mi Circulo")
);

var canvas = document.getElementById('myCanvas');
var context =  (canvas.getContext)?
    canvas.getContext('2d'):null;


    figuresArray.forEach(
    function(entry) {

        console.log(entry);
        entry.render(context);
    }
);


Ejecutalo para ver el resultado :) cada figura tiene un color diferente

miércoles, junio 12, 2013

Figuras, poligonos, herencia y polimorfismo en Javascript

Actualmente estoy ayudandole alguien muy especial con el aprendizaje de Javascript y OOP. Para tal objetivo le he asignado varios problemas que debe resolver con Herencia y ese pseudo poliformismo que tiene Javascript, pues nada me he inventado la primera parte de lo que seria la definicion de figuras con Javascript tales como un Cuadrado, Triangulo, Circulo, etc; por ahora el pintado solo muestra en la consola el area y algunos datos mas de la figura, pero la idea seria usar canvas en la segunda parte para imprimir las figuras y en el tercera parte algun mecanismo para obtener la informacion de las figuras del usuarios, pues nada aqui el codigo:


/**
 * User: jsanca
 * Date: 6/12/13
 * Time: 11:10 PM
 */

// Defines a point
function Point (x, y) {

    this.x = x;
    this.y = y;
} // Point


// Basic definition of a Figure, just a point in nowhere.
function Figure (point, name) {

    this.point = point;
    this.name = name;

    this.render = function () {

        console.log("figure: " + this.name + " " +this.point);
    }
} // Figure.

// the points defines some of the sides
function Square (point1, point2, name) {

    Figure.call(this, point1, name);
    this.point2 = point2;

    this.area = function () {

        var side =
            (this.point2.x == this.point.x)?
            this.point2.y - this.point.y:
            this.point2.x - this.point.x;

        return Math.pow(Math.abs(side), 2);
    }

    this.render = function () {

        console.log("square: " + this.name + ", area = " + this.area());
    }
} // Square.

Square.prototype.parent = Figure.prototype;
Square.prototype.constructor = Square;

// the points defines the point angles
function Triangle (point1, point2, point3, name) {

    Figure.call(this, point1, name);
    this.point2 = point2;
    this.point3 = point3;

    this.area = function () {

        var base = 0;
        var verticalHeight = 0;

        if (this.point2.x == this.point.x) {

            base = this.point2.y - this.point.y;
            verticalHeight = this.point.x - this.point3.x;
        } else {

            base = this.point2.x - this.point.x;
            verticalHeight = this.point.y - this.point3.y;
        }


        return 0.5 * Math.abs(base) * Math.abs(verticalHeight);
    }

    this.render = function () {

        console.log("triangle: " + this.name + ", area = " + this.area());
    }
} // Triangle.

Triangle.prototype.parent = Figure.prototype;
Triangle.prototype.constructor = Triangle;

// the points you pass are the diagonal of the rectangle.
function Rectangle (point1, point2, name) {

    Figure.call(this, point1, name);
    this.point2 = point2;

    this.area = function () {

        var width = this.point2.x - this.point.x;
        var height = this.point2.y - this.point.y;

        return Math.abs(width) * Math.abs(height);
    }

    this.render = function () {

        console.log("rectangle: " + this.name + ", area = " + this.area());
    }
} // Rectangle.

Rectangle.prototype.parent = Figure.prototype;
Rectangle.prototype.constructor = Rectangle;

// the points defines the radius
function Circle (point1, point2, name) {

    Figure.call(this, point1, name);
    this.point2 = point2;

    this.radius = function () {

        var radius =
            (this.point2.x == this.point.x)?
                this.point2.y - this.point.y:
                this.point2.x - this.point.x;

        return Math.abs(radius);
    }

    this.circumference = function () {

        var radius = this.radius();

        return 2 * Math.PI * radius;
    }

    this.area = function () {

        var radius = this.radius();

        return Math.PI * Math.pow(radius, 2);
    }

    this.render = function () {

        console.log("circle: " + this.name + ", area = " + this.area() + ", circumference = " + this.circumference() + ", radius = " + this.radius());
    }
} // Circle.

Circle.prototype.parent = Figure.prototype;
Circle.prototype.constructor = Circle;

console.log("Running");
var figuresArray = new Array(
    new Square  (new Point(10,10), new Point(10,30), "Cuadrado 1"),
    new Square  (new Point(10,10), new Point(15,10), "Cuadrado 2"),
    new Triangle(new Point(10,10), new Point(10,20), new Point(0,15), "Mi Triangulito"),
    new Rectangle(new Point(10,10), new Point(20,30), "Mi Rectangulo"),
    new Circle(new Point(10,10), new Point(10,25), "Mi Circulo")
);

figuresArray.forEach(
    function(entry) {

        console.log(entry);
        entry.render();
    }
);




Resultado

Running
Square { point=Point, name="Cuadrado 1", more...}
square: Cuadrado 1, area = 400
Square { point=Point, name="Cuadrado 2", more...}
square: Cuadrado 2, area = 25
Triangle { point=Point, name="Mi Triangulito", more...}
triangle: Mi Triangulito, area = 50
Rectangle { point=Point, name="Mi Rectangulo", more...}
rectangle: Mi Rectangulo, area = 200
Circle { point=Point, name="Mi Circulo", more...}
circle: Mi Circulo, area = 706.8583470577034, circumference = 94.24777960769379, radius = 15