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:
• Subir tu proyecto a GitHub Pages
• Utilizar el editor online de p5.js

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.