Contenidos

  • Repaso
  • Ciclos for
  • Condicional if
  • Cómo subir tu sketch a Github

Repaso - Sesión 2

Ya aprendimos:

  • Variables: Declaración y asignación.
    • var x = 10;
  • Operaciones: x++;
  • Orden de precedencia
  • Variables internas de p5.js:
    • mouseX, mouseY, width, height
  • Color RGB

Bucle for

						
							var y = 100;
							var d = 130;

							function setup(){
								createCanvas(480,120);
							}

							function draw(){
								background(204);
								ellipse(75, y, d, d);
								ellipse(175, y, d, d);
								ellipse(275, y, d, d);
							}
						
					

  • En el Ejemplo 2.2 dibujamos 3 elipses superpuestas

Bucle for

  • ¿Cómo dibujamos 20 elipses superpuestas?
  • ¿Escribimos 20 veces el mismo código?
  • Dibujemos 7 elipses en el ejemplo anterior

Ciclos for (for loops)

						
							var d = 130;

							function setup(){
							  createCanvas(480,240);
							}

							function draw(){
							  background(204);
							  ellipse(65, height/2, d, d);
							  ellipse(130, height/2, d, d);
							  ellipse(195, height/2, d, d);
							  ellipse(260, height/2, d, d);
							  ellipse(325, height/2, d, d);
							  ellipse(390, height/2, d, d);
							  ellipse(455, height/2, d, d);
							}
						
					

Bucle for: definición

  • Bucle: repetición controlada de un bloque de código
  • Los bucles son eficientes y útiles
  • Existen tres tipos de bucles:
    • for()
    • for in()
    • while()
  • Empezaremos por aprender el tipo for()

Bucle for: sintaxis

  • Un bucle for() está compuesto por 3 elementos:
    • Inicialización
    • Prueba
    • Actualización

Bucle for: sintaxis

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

  • Inicialización: variable i es declarada y tiene valor 0
  • Prueba: si i es menor que 7, el bucle se ejecuta
  • Actualización: i se incrementa en 1
  • Si la prueba no se cumple, termina el bucle for()

Bucle for (3.2)

						
							var d = 130;

							function setup(){
							  createCanvas(480,240);
							}

							function draw(){
							  background(204);
							  for (var i = 0; i < 7; i++) {
							    ellipse(65*(1+i), height/2, d, d);
							  }
							}
						
					

Bucles for anidados (3.3)

						
							var d = 90;
							var numX = 8;
							var numY = 5;

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

							function draw(){
							  background(204);
							  for (var i = 0; i <= numX; i++) {
							    for (var j = 0; j <= numY; j++) {
							        ellipse(i*width/numX, j*height/numY, d, d);
							    }
							  }
							}
						
					

Bucles for anidados (3.3)

  • Con dos bucles for() anidados podemos iterar sobre dos dimensiones
  • Usemos colores aleatorios a las elipses con la ayuda dos nuevas funciones:
    • random(a,b): arroja un valor aleatorio equiprobable entre los valores a y b
    • frameRate(x): define la cantidad de veces por segundo que la función draw() es ejecutada

Bucles for anidados (3.3)

						
							var d = 90;     //Diametro de los circulos
							var numX = 8;   //Cantidad de circulos en el eje horizontal
							var numY = 5;   //Cantidad de circulos en el eje vertical
							var rojo;       //Variable asociada al color rojo
							var verde;      //Variable asociada al color verde
							var azul;       //Variable asociada al color azul

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

							function draw(){
							  frameRate(7);
							  background(100);
							  for (var i = 0; i <= numX; i++) {
							    for (var j = 0; j <= numY; j++) {
							      rojo = random(0,255);
							      verde = random(0,255);
							      azul = random(0,255);

							      fill(rojo, verde, azul, 150);
							      ellipse(i*width/numX, j*height/numY, d, d);
							    }
							  }
							}
						
					

Condicional if

  • Decide si se ejecuta o no un bloque de código
  • Ejemplos, siendo a y b variables booleanas:
    • if (a > b): si a es mayor que b, ejecuta
    • if (a == b): si a es igual a b, ejecuta

Condicional if: sintaxis

						
							if(condición){
								//Bloque de código a ser ejecutado
								//si la condición es verdadera
							}
						
					

Condicional if: operadores relacionales

  • En JavaScript existen operadores que permiten evaluar la relación entre dos variables:
    • a > b, a es mayor que b
    • a < b, a es menor que b
    • a >= b, a es mayor o igual que b
    • a <= b, a es menor o igual que b
    • a == b, a es igual a b
    • a != b, a es distinto de b

Condicionales if / else if() / else (3.5)

						
							var x;
							var desfase = 10;

							function setup(){
							  createCanvas(800,500);
							  x = width/2
							}

							function draw(){
							  background(204);
							  if (mouseX > x) {
							    x += 2;
							    desfase = -10;
							  }
							  if (mouseX < x) {
							    x -= 2;
							    desfase = 10;
							  }
							  //Dibujar una flecha hacia la izquierda o derecha
								//dependiendo del desfase
							  line(x, 0, x, height);
							  line(mouseX, mouseY, mouseX + desfase, mouseY - 10);
							  line(mouseX, mouseY, mouseX + desfase, mouseY + 10);
							  line(mouseX, mouseY, mouseX + desfase * 3, mouseY);
							}
						
					

Basado en Make: Getting Started with p5.js

Condicionales if / else if() / else

  • Condicionales en serie: else-if y else
    • else if(prueba)
    • si la condición anterior es false, se prueba esta
    • else
    • si la condición anterior es false, se ejecuta esta

Condicionales if / else if() / else: sintaxis

						
							if(pruebaLogica1){
								//Este bloque se ejecuta solo si
								//pruebaLogica1 es true
							}
							else if(pruebaLogica2){
								//Este bloque se ejecuta solo si
								//pruebaLogica1 es false y
								//pruebaLogica2 es true
							}
							else if(pruebaLogica3){
								//Este bloque se ejecuta solo si
								//pruebaLogica1 y pruebaLogica2 son false y
								//pruebaLogica3 es true
							}
							else {
								//Este bloque se ejecuta solo si
								//pruebaLogica1, pruebaLogica2 y
								//pruebaLogica3 son false
							}
						
					

  • Podemos usar cuantos else if() queramos

Condicionales if / else if() / else (3.6)

						
							var diametro = 150;
							var distancia = 0;
							var colorCirculo;

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

							function draw(){
							  distancia = dist(mouseX,mouseY,width/2,height/2);
							  if(distancia < diametro/2){
							    colorCirculo = color(150,0,0);
							  }
							  else {
							    colorCirculo = color(255,255,255);
							  }

							  strokeWeight(4);
							  fill(colorCirculo);
							  ellipse(width/2,height/2,diametro,diametro);
							}
						
					

  • dist() calcula la distancia entre dos puntos

Operadores lógicos: uso y sintaxis

  • Permiten crear pruebas lógicas compuestas
  • Sintaxis:
    • AND (y): &&
    • OR (o): ||

Operadores lógicos

  • AND:
    • true && true = true
    • true && false = false
    • false && false = false
  • OR:
    • true || true = true
    • true || false = true
    • false || false = false

Condicionales if / else if() / else (3.7)

						
							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);
							}
						
					

¡ahora experimentemos!

Cómo subir tu sketch a GitHub

  • Ingresa a github.com con tu cuenta
  • Crea un nuevo repositorio con el nombre x.github.io, reemplazando x con tu usuario:
    • Usuario: codedescuela
    • Repo: codedescuela.github.io
  • Haz tu repo público, no privado
  • Marca la casilla para iniciar con un archivo README

Cómo subir tu sketch a GitHub

  • Ingresa a tu repo en github.com
  • Click en "Upload files" para subir archivos
  • Añade los archivos index.html y sketch.js
  • Click en "Commit changes" para guardar
  • En el navegador abre la página de tu repo
  • En el ejemplo: codedescuela.github.io
  • ¡Ya tienes una página 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.