Contenidos

  • Repaso
  • GitHub
  • JavaScript
  • p5.js

Repaso - Sesión 1

Ya aprendimos:

  • Definición de programar
  • Fundamentos de HTML y JavaScript
  • Biblioteca p5.js y sus principales funciones
  • Ejecutar scripts de JavaScript en páginas HTML

Repaso - Sesión 1

setup(), createCanvas(), draw(), rect().

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

								function draw(){
								  rect(100,100,50,50);
								}
							
						

GitHub

  • Ingresa a github.com
  • Crea una cuenta con el botón 'sign up'
  • Recuerda tu username y password

Variables en JavaScript

  • Asignan una porción de memoria del computador
  • Pueden almacenar distintos tipos de información:
    • Números enteros (int)
    • Números decimales (float)
    • Texto (string)
    • Booleano (boolean): verdadero/falso (true/false)
  • Podemos hacer variar la información almacenada

Variables en JavaScript: declaración

  • Las variables deben tener un nombre único
  • Claridad: radio de un círculo, mejor radio que x8z
  • Legibilidad: radio de un círculo, mejor radio que r
  • Existen nombres reservados en JavaScript y p5.js, que no podemos usar

Variables en JavaScript: declaración (2.1)

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

								function draw(){
								  background(204);
								  rect(150,150,90,90);
								  ellipse(75, 100, 130, 130);
								  ellipse(175, 100, 130, 130);
								  ellipse(275, 100, 130, 130);
								}
							
						

  • El ejemplo 2.1 muestra tres elipses traslapadas
  • draw() repite una y otra vez lo mismo
  • Podemos variar en el tiempo usando variables

Variables en JavaScript: declaración

  • Existen dos etapas fundamentales para las variables: declaración y asignación
  • El nombre de la variable debe ser claro, supongamos y para la posición y del círculo
  • La declaración ocurre solo una vez, la asignación cuantas veces sea necesario

							
								var y;		//Declaración
								y = 100;	//Asignación de valor
							
						

Variables en JavaScript: declaración

  • La declaración asigna un espacio en memoria con el nombre dado, (en este caso y)
  • La asignación (en este caso el número 100) le indica a la variable y que ahora su valor es el número 100
  • Puedes declarar una variable y asignarle un valor en la misma línea de código

							
								var y = 100;	//Declaración y asignación de valor
							
						

Variables en JavaScript: buenas prácticas

  • Usa nombres cortos, claros y explicativos
  • Usa el formato camello
    • var radCirculo;
  • Usa variables locales cada vez que sea posible
  • Minimiza el uso de variables globales

Variables en JavaScript: uso

  • Usamos la variable y con valor 100 en las elipses
  • Beneficios de usar la variable y:
    • Fácil modificación de la posición y
    • Código fiel nuestra intención: elipses con igual y
    • Mayor orden y claridad
  • Creemos una nueva variable d para el diámetro

Variables en JavaScript: declaración (2.2)

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

Variables y movimiento (2.3)

							
								var x = 0;
								var d = 130;

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

								function draw(){
								  background(180);
								  ellipse(x, height/2, d ,d);
								  x = x + 2;
								}
							
						

  • La variable x incrementa en 2 en cada draw()

Operaciones matemáticas

  • En el ejemplo anterior usamos suma
  • En programación, podemos usar los siguientes símbolos matemáticos para realizar operaciones:
    • + para sumar dos valores
    • - para restar dos valores
    • * para multiplicar dos valores
    • / para dividir dos valores
    • = para asignar un valor a una variable

Operadores matemáticos

  • Existen atajos para operaciones comunes:
    • "x += 10" representa "x = x + 10"
    • "x -= 51" representa "x = x - 51"
  • Existen casos especiales para incrementos en 1:
    • "x ++" representa "x = x + 1"
    • "x --" representa "x = x - 1"

Variables y movimiento (2.3)

							
								var x = 0;
								var d = 130;

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

								function draw(){
								  background(180);
								  ellipse(x, height/2, d ,d);
								  x += 2;
								}
							
						

  • Podemos reescribir el Ejemplo 2.3 utilizando el operador de suma

Aritmética: orden de procedencia

  • Existen reglas para determinar el orden de las operaciones

						
							var gradCels;
							var gradFahr = 50;

							gradCels = 5/9 * (gradFahr - 32);
						
					

Aritmética: orden de precedencia

  • El orden de precedencia indica la prioridad de los operadores:
    • Primero, lo que está entre paréntesis
    • Segundo, las multiplicaciones y divisiones
    • Tercero, las sumas y restas
    • A igual precedencia, de izquierda a derecha

Aritmética: orden de precedencia

						
							var gradCels;
							var gradFahr = 50;

							gradCels = 5/9 * (gradFahr - 32);
						
					

  • En el ejemplo ocurre en el siguiente orden:
    • Primero, se calcula (gradFahr - 32)
    • Segundo, se calcula 5/9
    • Tercero, se calcula la multiplicación entre los resultados anteriores

Variables internas de p5.js

						
							var d = 130;

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

							function draw(){
							  background(180);
							  ellipse(mouseX, mouseY, d ,d);
							}
						
					

  • Las variables mouseX y mouseY contienen la posición x e y del ratón

Variables internas de p5.js

  • Existen dos variables espaciales que almacenan el alto y el ancho del canvas
    • height almacena alto
    • width almacena el ancho

Variables internas de p5.js

						
							var d = 130;

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

							function draw(){
							  background(180);
							  ellipse(mouseX, height/2, d ,d);
							}
						
					

  • El Ejemplo 2.5 usa las variables del lienzo y de la posición del ratón

Color: RGB

  • Modelo aditivo RGB para representar color
  • Cada color es una suma de 3 colores básicos:
    • Rojo (Red)
    • Verde (Green)
    • Azul (Blue)
  • Cada color toma valores entre 0 y 255
  • Negro = nada (R = 0, G = 0, B = 0)
  • Blanco = todo (R = 255, G = 255, B = 255)

Color: RGB

						
							var d = 130;

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

							function draw(){
							  background(230,230,255);
							  fill(210,0,0);
							  ellipse(mouseX, mouseY, d ,d);
							}
						
					
  • Pintemos de rojo la elipse y de azul claro el lienzo
  • fill() pinta el interior de las figuras

Contornos

    • stroke(color): contorno del color definido
    • noStroke(): contorno transparente
    • strokeWeight(x):contorno de ancho x pixeles

Contornos

						
							var d = 130;

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

							function draw(){
							  background(230,230,255);
							  strokeWeight(6);
							  stroke(130,0,0);
							  fill(210,0,0);
							  ellipse(mouseX, mouseY, d ,d);
							}
						
					

Otras funciones útiles

  • Figuras:
    • arc(), arco
    • ellipse(), elipse
    • line(), línea
    • point(), punto
    • quad(), cuadrilátero
    • rect(), rectángulo
    • triangle(), triángulo
  • Referencia de p5.js

¡a experimentar!

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.