Contenidos

  • Proyecto
  • Objetos
  • Buenos modales en programación

Proyecto

  • ¿De qué se trata?
  • ¿Cuál es tu meta?
  • ¿Cómo lo realizarás?

Objetos

  • Colección de variables y funciones relacionadas
  • Permiten hacer modelos y abstracciones

Objetos

Ejemplo: radio:

  • Variables (propiedades)
    • volumen, frecuencia, banda (AM, FM), estado(encendido/apagado)
  • Métodos
    • fijarVolumen, fijarFrecuencia, fijarBanda, fijarEstado

Objetos: función constructor

  • Función que define la estructura del objeto
  • Analogías: molde de galletas, plano de construcción

Objetos (5.1)

						
							//Ejemplo 5.1 Objetos
							//Coded Escuela - 2017

							var x;
							var y;
							var rad;
							var colorCirc;
							var vel;

							function setup(){
							  createCanvas(800,500);

							  x = width/2;
							  y = height/2;
							  rad = 30;
							  vel = 2;

                //color aleatorio
							  colorCirc = color(random(0,255), random(0,255), random(0,255), 180);
							}

							function draw(){
							  frameRate(45);
							  background(220,220,255);

							  actualizar();
							  mover();

							}

							function actualizar(){
							  noStroke();
							  fill(colorCirc);
							  ellipse(x,y,2*rad,2*rad);
							}

							function mover(){
							  x += random(-vel, vel);
							  y += random(-vel, vel);
							}
						
					

  • ¡Creemos un objeto Círculo que se pueda mover!

Objetos: nuestro primer objeto Círculo

  • El objeto Círculo tiene las siguientes propiedades:
    • x, y, rad, vel, colorCirc
  • y los siguientes métodos para cambiar su estado:
    • function actualizar()
    • function mover()

Objeto Círculo: constructor

						
							function Circulo(){
							  //Propiedades

							  //Metodos

							}
						
					

  • El constructor Circulo() contiene todas las propiedades y metodos del objeto Circulo
  • Se declara fuera de las funciones setup() draw()

Objeto Círculo: propiedades

						
							function Circulo(x,y,radio,colorInterior,velocidad) {
							  //Propiedades
							  this.x = x;
							  this.y = y;
							  this.rad = radio;
							  this.colorCirc = colorInterior;
							  this.vel = velocidad;

							  //Metodos

							}
						
					

  • Parámetros: entre paréntesis
  • Propiedades: this.nombreVar = valor

Objeto Círculo: métodos

						
							function Circulo(x,y,radio,colorInterior,velocidad) {
							  //Propiedades
							  this.x = x;
							  this.y = y;
							  this.rad = radio;
							  this.colorCirc = colorInterior;
							  this.vel = velocidad;

							  //Metodos
							  this.actualizar = function(){
							    noStroke();
							    fill(this.colorCirc);
							    ellipse(this.x,this.y,2*this.rad,2*this.rad);
							  }

							  this.mover = function(){
							    this.x += random(-this.vel, this.vel);
							    this.y += random(-this.vel, this.vel);
							  }

							}
						
					

  • Los metodos son funciones

Objeto Círculo: nuevo objeto

  • Crear variable para contener instancia del objeto
    • var nuevoCirculo;
  • Invocar constructor con new y argumentos
    • circulo = new Circulo(...);

Objeto Círculo (5.2)

						
							//Ejemplo 5.2 Objetos
							//Coded Escuela - 2017

							//Circulo
							var nuevoCirculo;

							function setup(){
							  createCanvas(800,500);
							  nuevoCirculo = new Circulo(width/2,height/2,30,color(random(0,255), random(0,255), random(0,255), 180),2);
							}

							function draw(){
							  frameRate(45);
							  background(220,220,255);

							  nuevoCirculo.actualizar();
							  nuevoCirculo.mover();

							}

							function Circulo(x,y,rad,colorCirc,vel) {
							  //Propiedades
							  this.x = x;
							  this.y = y;
							  this.rad = rad;
							  this.colorCirc = colorCirc;
							  this.vel = vel;

							  //Metodos
							  this.actualizar = function(){
							    noStroke();
							    fill(this.colorCirc);
							    ellipse(this.x,this.y,2*this.rad,2*this.rad);
							  }

							  this.mover = function(){
							    this.x += random(-this.vel, this.vel);
							    this.y += random(-this.vel, this.vel);
							  }

							}
						
					

Arreglos de objetos

  • Constructores permiten crear objetos similares
  • Ejemplo: nuestros círculos parecidos pero distintos

Arreglos de objetos

  • Para ordenar nuestros objetos, usaremos arreglos
  • Para poblar el arreglo con objetos usaremos for()

Arreglo de Objetos (5.3)

						
							//Ejemplo 5.3 Objetos
							//Coded Escuela - 2017

							//Circulo
							var circulos = [];

							//Numero circulos
							numCirc = 80;

							function setup(){
							  createCanvas(800,500);

							  for (var i = 0; i < numCirc; i++) {
							    circulos[i] = new Circulo(random(0,width),random(0,height),random(20,30),color(random(0,255), random(0,255), random(0,255), 180),2);
							  }
							}

							function draw(){
							  frameRate(45);
							  background(220,220,255);

							  for (var i = 0; i < numCirc; i++) {
							    circulos[i].actualizar();
							    circulos[i].mover();
							  }

							}

							function Circulo(x,y,rad,colorCirc,vel) {
							  //Propiedades
							  this.x = x;
							  this.y = y;
							  this.rad = rad;
							  this.colorCirc = colorCirc;
							  this.vel = vel;

							  //Metodos
							  this.actualizar = function(){
							    noStroke();
							    fill(this.colorCirc);
							    ellipse(this.x,this.y,2*this.rad,2*this.rad);
							  }

							  this.mover = function(){
							    this.x += random(-this.vel, this.vel);
							    this.y += random(-this.vel, this.vel);

							  }

							}
						
					

Buenos modales en en programación

  • Respaldar el trabajo
  • Comentar todo
  • Nombres informativos: radio > r, posX > x
  • camelCase
  • No copiar y pegar
  • Encapsular y parametrizar

Referencias

  • The Coding Train, Daniel Shiffman
  • referencia p5.js
  • "Make: Getting Started with p5.js", Lauren McCarthy, Casey Reas and Ben Fry. Maker Media, 2015.
  • Beginning JavaScript, 4th Edition. Paul Wilton and Jeremy McPeak. Wiley Publishing, 2010.