Contenidos

  • Repaso
  • Funciones
  • Arreglos
  • Medios

Repaso - Sesión 3

						
							for (var i = 0; i < 7; i++) {
							  //código
							}
						
					

Ya aprendimos:

  • Sintaxis y uso de los bucles for
  • Condicional if() / else if() / else
  • Operadores relacionales
  • Operadores lógicos
  • Subir proyectos a GitHub

Funciones

  • Bloque de código que ejecuta una tarea
  • Pueden requerir argumentos
  • Pueden retornar valores

Funciones: sintaxis

						
							function nombreFuncion(argumentoFuncion){
								//instruccion1;
								//instruccion2;
								///etc

								return valorRetorno;
							}
						
					

  • La palabra clave function declara la función
  • La palabra clave return retorna el resultado

Funciones: uso y buenas prácticas

  • Usos:
    • Ordenar y dar estructura al código
    • Modularizar el código
  • Buenas prácticas:
    • Nombres simples y claros, como getFecha()
    • Diseño top-down: 1. escribe tu código pensando en funciones, 2. escribe cada función

Funciones (4.1)

						
							var alto = 130;
							var ancho = 200;
							var colorRect;

							function setup(){
							  createCanvas(800,500);
							  background(255,150,0,200);
							}

							function draw(){
							  if(mouseX > width/2 - ancho/2 && mouseX < width/2 + ancho/2 && mouseY < height/2 + alto/2 &&  mouseY > height/2 - alto/2 ){
							    colorRect = color(0);
							  }
							  else {
							    colorRect = color(100,100,180);
							  }
							  noStroke();
							  fill(colorRect);
							  rectMode(CENTER);
							  rect(width/2,height/2,ancho,alto);
							}
						
					

  • Reescribamos el ejemplo 3.7 usando funciones

Funciones (4.1)

						
							function draw(){
							  if(mouseX > width/2 - ancho/2 && mouseX < width/2 + ancho/2 && mouseY < height/2 + alto/2 &&  mouseY > height/2 - alto/2 ){
							    colorRect = color(0);
							  }
							  else {
							    colorRect = color(100,100,180);
							  }
							  noStroke();
							  fill(colorRect);
							  rectMode(CENTER);
							  rect(width/2,height/2,ancho,alto);
							}
						
					

  • draw() verifica si el cursor está en el rectángulo
  • Después actualiza el rectángulo

Funciones (4.1)

						
							function checkInside(){
							  if(mouseX > width/2 - ancho/2 && mouseX < width/2 + ancho/2 && mouseY < height/2 + alto/2 &&  mouseY > height/2 - alto/2 ){
							    colorRect = color(0);
							  }
							  else {
							    colorRect = color(100,100,180);
							  }
							}

							function updateRect(){
							  noStroke();
							  fill(colorRect);
							  rectMode(CENTER);
							  rect(width/2,height/2,ancho,alto);
							}
						
					

Funciones (4.1)

						
							var alto = 130;
							var ancho = 200;
							var colorRect;

							function setup(){
							  createCanvas(800,500);
							  background(255,150,0,200);
							}

							function draw(){
							  checkInside();
							  updateRect();
							}

							function checkInside(){//verifica si el cursor está dentro o fuera del rectángulo
							  if(mouseX > width/2 - ancho/2 && mouseX < width/2 + ancho/2 && mouseY < height/2 + alto/2 &&  mouseY > height/2 - alto/2 ){
							    colorRect = color(0);
							  }
							  else {
							    colorRect = color(100,100,180);
							  }
							}

							function updateRect(){ //actualiza el rectángulo
							  noStroke();
							  fill(colorRect);
							  rectMode(CENTER);
							  rect(width/2,height/2,ancho,alto);
							}
						
					

Arreglos: definición y sintaxis

  • Conjunto ordenado de elementos con un nombre
  • Los elementos están indexados en 0
  • Para declarar un arreglo x:
    • var x = [];

Arreglos: noche estrellada (Ejemplo 4.2)

						
							//Arreglos
							var x = [];
							var y = [];
							var diam = [];
							var numEstrellas = 100;

							function setup(){
							  createCanvas(800,500);
							  background(30);
							  for (var i = 0; i < numEstrellas; i++) {
							    x[i] = random(0,width);
							    y[i] = random(0,height);
							    diam[i] = random(1,7);
							  }

							}

							function draw(){
							  for (var i = 0; i < numEstrellas; i++) {
							    noStroke();
							    fill(240);
							    ellipse(x[i],y[i],diam[i],diam[i]);
							  }
							}
						
					

  • Usamos for y arreglos

Arreglos: Seguidor del cursor (Ejemplo 4.3)

							
								var num = 30;
								var x = [];
								var y = [];

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

								  for (var i = 0; i < num; i++) {
								    x[i] = 0;
								    y[i] = 0;
								  }
								}

								function draw(){
								  background(0);
								  frameRate(100);
								  for (var i = num-1; i >0 ; i--) {
								    x[i] = x[i-1];
								    y[i] = y[i-1];
								  }
								  x[0] = mouseX;
								  y[0] = mouseY;

								  for (var i = 0; i < num; i++) {
								    fill(255 - i*4);
								    ellipse(x[i], y[i], 40, 40);
								  }
								}
							
						

Imágenes en p5.js

  • para cargar imágenes en un sketch de p5.js:
    • 1. Crear una variable que almacene la imagen
      2. Cargar la imagen en preload(), usando loadImage() y la variable creada
      3. Poner la imagen en el lienzo usando image()

Imágenes en p5.js (4.4)

							
								var foto;

								function preload(){	//preload() es ejecutado antes de setup()
								  foto = loadImage("coded.png");
								}

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

								function draw(){
								  image(foto,0,0);
								}
							
						

Imágenes en p5.js

  • Los protocolos de seguridad de los navegadores no permiten cargar archivos externos, como la imagen
  • Veremos dos opciones:

Imágenes en p5.js: responsividad

  • Modificación de parámetros de una imagen: tamaño, transparencia
  • image(foto,x1,y1,x2,y2) dibuja el archivo entre un par ordenado y otro

Trabajar con imágenes: responsividad (4.5)

							
								var foto;

								function preload(){
								  foto = loadImage("coded.png");
								}

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

								function draw(){
								  background(255);
								  image(foto,0,0,mouseX,mouseY);
								}
							
						

Trabajar con imágenes: responsividad (4.6)

							
								var foto;

								function preload(){
								  foto = loadImage("pinera.gif");
								}

								function setup(){
								  createCanvas(800,700);
								}

								function draw(){
								  background(204);
								  image(foto,mouseX-foto.width/2,mouseY-foto.height/2);

								}
							
						

Trabajo con texto (4.7)

							
								function setup(){
								  createCanvas(600,100);
								  textFont("Arial");
								}

								function draw(){
								  background(220);
								  textSize(32);
								  text("Taller de p5.js para cabros bacanes",0,50);
								}
							
						

  • textFont("Arial") carga la fuente del texto
  • textSize(32) define el tamaño del texto
  • text("bla bla bla") escribe el texto

Trabajo con video en p5.js

  • p5.js también permite trabajar con video
  • Permite capturar y mostrar desde tu cámara

Trabajo con video en p5.js (4.8)

						
							var camara;

							function setup(){
							  createCanvas(800,500);
							  camara = createCapture(VIDEO);
							  camara.hide();
							}

							function draw(){
							  image(camara,0,0);
							}
						
					

  • Invertir los colores: filter(INVERT);
  • Teñir la imagen: tint(color);

Proyecto Final

  • Actividad entretenida para terminar el curso
  • Queremos que hagas tu propio proyecto
    • Tu primera obra de arte, tu primer videojuego
  • Durante la semana piensa qué te gustaría hacer
  • Puedes trabaja solo o colaborando
  • ¡Los proyectos serán expuestos en nuestra web!

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.