¿Quiénes somos?

  • Camila Colussi: artista visual. Parte del colectivo de artistas Los Electros.
  • Guillermo Montecinos: ingeniero eléctrico, músico, programador.

Sobre Coded Escuela

Sobre Coded Escuela

  • Programación creativa
  • Espacio seguro
  • Nuestros valores
  • Código abierto

Objetivos

  • Formar una comunidad colaborativa de hackers, artistas, amigos
  • Respetarnos y protegernos
  • Aprender a programar JavaScript
  • Crear aplicaciones visuales, creativas y sonoras utilizando la biblioteca p5.js

Sesión 1

Contenidos

  • ¿Qué significa programar?
  • ¿Por qué programar?
  • Fundamentos de HTML
  • Fundamentos de JavaScript
    • Sintaxis
    • Lógica
  • p5.js
    • Funciones básicas

Motivación

  • ¿Qué entendemos por programación?
  • ¿Por qué nos interesa programar?
  • ¿Conocen ejemplos de programación + arte?

Motivación

¿Qué significa programar?

  • Escribir instrucciones para que un dispositivo realice las tareas que quieras
  • Dispositivos: computador, celular, Arduino, TV, microondas, etc.
  • Los computadores calculan, no deducen

¿Qué significa programar?

  • Algoritmo: secuencia de instrucciones a ser ejecutadas. Receta de cocina para el computador.
  • Código: texto que el computador puede entender.

Ejemplo de código

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

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

Este código está escrito JavaScript, un lenguaje de programación

¿Por qué programar?

  • Programar para crear nuestras propias herramientas
  • Programar con fines productivos y artísticos
  • Programar para ser partícipes de la tecnología, no solo espectadores

¿Por qué programar?

Porque sí

(Esta es la página de la artista Nicole He)

p5.js

  • Biblioteca JavaScript, gratuita, de código abierto
  • p5js.org
  • "p5.js es una comunidad interesada en la exploración y creación de arte y diseño con tecnología".

Herramientas necesarias para programar

Primer ejemplo: dibujar un rectángulo (1.1)

							
								function setup(){
								  createCanvas(200,200);
								}
								function draw(){
								  rect(100,100,50,50);
								}
							
						

Analicemos el ejemplo anterior:

  • Escribimos código en HTML (página web)
  • Creamos un canvas (lienzo) en la página web
  • Dibujamos en el lienzo

Nuestra página web se ve así:

							
	  						
							  
							  
							  
							
						

  • Script: programa escrito en JavaScript
  • El comando HTML script permite cargar archivos
  • script carga p5.js y ejemplo_1_1.js
  • Skecth (bosquejo): programa escrito con p5.js

Nuestro bosquejo

							
								function setup(){
								  createCanvas(200,200);
								}
								function draw(){
								  rect(100,100,50,50);
								}
							
						

  • Con createCanvas(); creamos el lienzo
  • Con rect(); dibujamos un rectángulo

Orden de ejecución

							
								function setup(){
								  createCanvas(200,200);
								}
								function draw(){
								  rect(100,100,50,50);
								}
							
						

  • Ejecución línea a línea, de arriba hacia abajo
  • setup() se ejecuta al principio, una vez
  • draw() corre en bucle, después de setup()
  • setup() y draw() son funciones

Orden de ejecución: función setup()

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

  • En setup() definimos las condiciones iniciales
  • Aquí creamos un lienzo con createCanvas()

Orden de ejecución: función draw()

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

  • draw() se ejecuta en bucle, después de setup()
  • Dibujamos un rectángulo en el lienzo con rect();
  • rect(50,50,20,20);define sus características

Sintaxis

							
								function setup(){
								  createCanvas(200,200);
								}
								function draw(){
								  rect(100,100,50,50);
								}
							
						

  • Bloque de código: contenido entre llaves{}
  • Línea de código: delimitada por punto y coma (;):

Figuras básicas: rectángulo

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

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

Segundo ejemplo: dibujar una elipse (1.2)

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

							function draw(){
							  ellipse(150,100,90,90);
							}
						
					
    - formas elementales:
      - elipse
      - línea

Funciones: sintaxis

  • "Conjunto de líneas de código que realizan una tarea específica y que puede retornar un valor. Puede tomar parámetros que modifican su funcionamiento." Fuente
  • La sintaxis de las funciones de p5.js está en la referencia

Funciones: argumentos

  • funciones que requieren argumento:
    • createCanvas(300,200)
    • ellipse(100,100,50,50)
  • funciones que no requieren argumento:
    • setup()
    • draw()

Funciones: createCanvas()

  • Crea un lienzo (canvas) para dibujar
  • Sintaxis: createCanvas(ancho, alto)

Funciones: createCanvas()

  • mostrar un esquema de un canvas
  • Es una matriz 2D, con filas y columnas
  • Cada pixel corresponde a un par ordenado (x,y)

Funciones: revisión del ejemplo 1.2

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

							function draw(){
							  ellipse(150,100,90,90);
							}
						
					

  • No hemos definido el color del lienzo
  • ¿Cómo pintamos el lienzo completo?

Funciones: color del lienzo

						
							function setup(){
							  createCanvas(300,200);
							  background(150);
							}

							function draw(){
							  ellipse(150,100,90,90);
							}
						
					

  • La función background(color) pinta el lienzo
  • background(150) pinta el lienzo de color gris
  • ¿Cómo definimos el color del lienzo?

¡a experimentar!

Referencias