1 of 48

Introducción a la Programación

  • 1º Bachillerato - TIC

2 of 48

Qué es un programa

  • Conjunto de instrucciones y datos que realizan una determinada tarea
  • Software del ordenador

2

3 of 48

Cómo se hace un programa

  • Analizar la tarea a realizar
    • Entender qué datos se necesitan (entradas) y qué resultados se quieren obtener (salidas)
  • Diseñar el programa
    • Identificar los pasos necesarios (algoritmo), diseño de la interfaz, etc.
  • Codificar el programa
    • Traducir el algoritmo a un determinado lenguaje de programación
    • Incluye compilación: traducir el programa a código que el ordenador entiende
  • Probar el programa
    • Evaluar los resultados obtenidos, volviendo a puntos anteriores si es necesario

3

4 of 48

Tipos de lenguaje de programación

  • De alto nivel
    • Cercanos al lenguaje natural
    • Fáciles de entender y escribir
    • Python, Java, C, C++, Processing ...

​

​

  • De bajo nivel
    • Cercanos al lenguaje de los ordenadores
    • Complicados de entender y escribir
    • Lenguaje ensamblador

4

5 of 48

Primeros pasos en p5.js

  • 1º Bachillerato - TIC

6 of 48

Qué es p5.js

  • Biblioteca (conjunto de instrucciones y funcionalidades) de JavaScript
    • JavaScript es uno de los lenguajes de programación web más empleados actualmente
  • Para utilizarlo, basta con usar un editor online
  • Muy utilizado para programas visuales e interactivos(artes gráficas, simulaciones, etc)

https://p5js.org/

6

7 of 48

Consideraciones iniciales

7

  • p5.j5 es sensible a mayúsculas y minúsculas
    • A no es lo mismo que a

​

  • Cada instrucción acaba en “;”

​

  • Podemos comentar una línea de texto anteponiendo //
    • //Los comentarios sirven para mejorar la legibilidad

​

  • Podemos comentar varias línea de texto poniéndolo entre /**/
    • /*Los comentarios son
    • ignorados por el programa*/

​

  • Un programa en p5.js siempre tiene, al menos, dos funciones
    • function setup(){}: Contiene el conjunto de instrucciones que se ejecutan una vez, al inicio del programa
    • function draw(){}: Contiene el conjunto de instrucciones que se ejecutan tras setup, de forma cíclica hasta que paramos la ejecución del programa

8 of 48

Conceptos previos

8

  • Canvas
    • Es el lienzo resultado de un programa, donde se sitúan el resto de elementos visuales
    • Tiene un tamaño en píxeles (ancho x alto)
    • Cada punto dentro dentro del lienzo se define por sus coordenadas (x,y)

​

9 of 48

Conceptos previos

9

  • Colores
    • Un color se obtiene como combinación de los colores primarios
    • Rojo - Verde - Azul: Código RGB

​

​

​

​

​

​

​

    • Opcionalmente hay un cuarto parámetro (opacidad)
    • Si la cantidad es lo mismo en los tres colores se puede indicar sólo una vez. (100,100,100) es lo mismo que (100)

​

10 of 48

Instrucciones gráficas (I)

10

  • createCanvas (ancho, alto);
    • Establece un lienzo de ancho * alto píxeles

​

  • background (r, g, b);
    • Establece el color de fondo a ‘r’ cantidad de rojo, ‘g’ cantidad de verde y ‘b’ cantidad de azul

​

  • line (x1,y1, x2, y2);
    • Dibuja una línea desde el punto (x1, y1) hasta el punto (x2, y2)

​

(x1,y1)

(x2,y2)

11 of 48

Instrucciones gráficas (I)

11

12 of 48

Sketch 0

12

13 of 48

Sketch 0 - Pruebas

13

  • Realiza cada uno de los siguientes cambios y ejecuta tras cada cambio el programa para comprobar el resultado:
    • Sustituye createCanvas por CreateCanvas
    • Quita uno de los parámetros de la instrucción line
    • Añade, antes de la instrucción line, la siguiente:

stroke (255,0,0);

    • Corta todo el código que hay en la función de setup y ponlo en draw

14 of 48

Sketch 1

14

​

  • stroke (r, g, b)
    • Establece el color del trazo (contorno) de las figuras

​

  • Realiza un programa que, sobre un lienzo de 400x300 en blanco, dibuje una línea horizontal verde y debajo (la separación que quieras) otra de color azul

​

15 of 48

Sketch 1 (Solución)

15

16 of 48

Sketches 1.1, 1.2, 1.3

16

  • Realiza cada uno de los siguientes cambios y ejecuta tras cada cambio el programa para comprobar el resultado:
    • Pon la primera instrucción de stroke debajo de la primera instrucción de linea
    • Pon la instrucción background la última
    • Vuelve al sketch original (deshaz los cambios) y añade la siguiente instrucción después de la primera línea:

​

strokeWeight (10);

​

17 of 48

Sketch 2

17

  • Realiza un programa en el que se muestre tus iniciales del nombre y primer apellido, creadas mediante líneas rectas

18 of 48

Instrucciones gráficas (II)

18

  • strokeWeight (cantidad)
    • Establece el grosor del trazo
  • noStroke()
    • Elimina el trazo de las figuras

​

  • fill(r, g, b)
    • Establece el color de relleno de las figuras

​

  • ellipse (x, y, diametroX, diametroY)
    • Dibuja una elipse con centro en el punto (x,y), con un diametro horizontal de diametroX píxeles y diametro vertical de diametroY píxeles
    • Cuando diametroX y diametroY tienen el mismo valor, es un círculo

​

  • rect (x,y, ancho, alto)
    • Dibuja un rectángulo con la esquina superior izquierda en (x,y), con una anchura según ancho y con una altura según alto
    • Con la instrucción rectMode (CENTER) x,y sería el centro en vez de la esquina

diametroX

diametroY

alto

ancho

19 of 48

Sketch 3

19

  • Realiza un programa que dibuje un círculo verde sobre un círculo azul sobre un fondo morado
    • Importante: cuidado con el orden de las instrucciones

​

  • Modifica el programa anterior para que sean rectángulos

20 of 48

Sketch 3 (Solución)

20

  • Realiza un programa que dibuje un círculo verde sobre un círculo azul sobre un fondo morado

​

  • Modifica el programa anterior para que sean rectángulos

21 of 48

Variables

21

  • Es un espacio en memoria identificado con un nombre que contiene un valor
    • El nombre (identificador) lo asigna el programador. Normalmente representa lo que almacena (vidas, edad, puntos, x, y, etc.)
    • El valor puede cambiar a lo largo del programa, pero siempre debe establecerse un valor inicial antes de utilizar la variable por primera vez
    • Una variable puede utilizarse en el bloque (espacio entre llaves) donde ha sido creada.
        • Global: puede utilizarse en todo el programa si ha sido creada fuera de setup, draw o cualquier otra función.
        • Local: creada dentro de un bloque, puede utilizarse sólo en el ámbito de dicho bloque

22 of 48

Variables

22

nombreVariable

valorInicial

let nombreVariable = valorInicial;

nombreVariable = nuevoValor;

  • Para utilizar una variable primero hay que crearla y asignarle un valor inicial
  • Una variable puede tomar diferentes valores a lo largo de un programa, mediante la operación de asignación

nombreVariable

valorInicial

nuevoValor

let vida = 3;

let puntos=1000;

let nivel=1;

vida = vida-1;

puntos= puntos+ (nivel*5);

nivel=3;

23 of 48

Variables

23

  • En p5.js también existen algunas variables de sistema
    • Implícitas al programa, no las crea el programador
    • Ejemplos:
      • width: ancho de la ventana
      • height: alto de la ventana
      • mouseX: posición X del cursor
      • mouseY: posición Y del cursor
      • key: última tecla pulsada

​

24 of 48

Variables

24

  • Ejemplo

​

​

25 of 48

Variables

25

  • Ejemplo modificado

​

​

26 of 48

Sketch 4

26

  • Realiza un programa que muestre de forma cíclica un círculo en una posición y con un color de relleno al azar. Cada círculo mostrado deberá ser 10 píxeles más grande que el anterior
    • función frameRate (n): Establece el número veces por segundo que se ejecuta el código dentro de draw
    • función random (x,y): Devuelve un número al azar entre [x,y)

​

​

27 of 48

Sketch 4 - Solución

27

  • Realiza un programa que muestre de forma cíclica un círculo en una posición y con un color de relleno al azar. Cada círculo mostrado deberá ser 10 píxeles más grande que el anterior

​

​

28 of 48

Sketch 5

28

  • Realiza un programa que dibuje una elipse centrada, cuyos diámetros dependan de la posición del cursor
    • Elipse centrada —> su centro está en el centro de la ventana
    • Diámetros dependiendo del cursor —> el diámetro horizontal depende de mouseX y el diámetro vertical depende de mouseY

29 of 48

Sketch 5 (Solución)

29

  • Realiza un programa que dibuje una elipse centrada, cuyos diámetros dependan de la posición del cursor

​

30 of 48

Sketch 6

30

  • Realiza un programa que dibuje un trazo compuesto por círculos rojos (sin contorno) que van moviéndose acorde a la posición del cursor
    • Para quitar el contorno a las figuras se utiliza la instrucción noStroke();

​

31 of 48

Otras funciones

31

  • Además de las funciones setup y draw, en p5.js existen otras ya creadas, cuyo código se ejecuta con el correspondiente evento. Por ejemplo:

​

function mousePressed(){

​

/*Instrucciones que se ejecutan con cada clic de ratón*/

​

}

​

​

​

function keyPressed(){

/*Instrucciones que se ejecutan cada vez que se pulsa una tecla

}

32 of 48

Sketch 7

32

  • Realiza un programa que dibuje un cuadrado en el centro. Inicialmente tendrá 10 píxeles de lado. Esta longitud aumentará en 10 píxeles cada vez que se pulse una tecla

​

33 of 48

Sketch 7.1

33

  • Sobre el sketch anterior, realiza las siguientes modificaciones (comprobando tu programa en cada modificación):
    • Haz que el color inicial de relleno sea 100 de rojo, 0 de verde y 0 de azul.
    • Cada vez que se pulsa una tecla, además de hacerse más grande deberá ser más 5 unidades más rojo
    • Cuando se hace clic con el ratón, debe restablecerse el tamaño y color por defecto

​

​

​

34 of 48

Sketch 7.1 (Solución)

34

​

​

​

​

35 of 48

Texto

35

  • text(“texto a mostrar”, x, y)
    • Muestra por pantalla el contenido del primer parámetro, desde el punto (x, y)

​

  • textSize (p)
    • Establece el tamaño del texto a p píxeles
    • Recuerda que debe establecerse antes de escribir el texto

36 of 48

Sketch 8

36

  • Escribe tu nombre y apellidos por pantalla, cada uno con un color diferente
  • Tu nombre tiene que tener tamaño 30 y tus apellidos tamaño 20 píxeles

37 of 48

Condicionales

37

  • Condicional simple

if (condición) {

//Instrucciones que se ejecutan sólo si se cumple la condición

}

​

//Instrucciones que se ejecutan a continuación del bloque condicional

  • Condicional compuesto

if (condición) {

//Instrucciones que se ejecutan sólo si se cumple la condición

​

}

else {

//Instrucciones que se ejecutan sólo si no se cumple la condición

}

​

//Instrucciones que se ejecutan a continuación del bloque condicional

38 of 48

Condicionales

38

  • Una condición es una sentencia (más o menos compleja) que sólo puede ser: verdadera o falsa

​

  • Para formar condiciones se utilizan los operadores relacionales y lógicos

Relacionales

​

>: mayor que

<: menor que

>=: mayor o igual que

<=: menor o igual que

==: igual

!=: distinto

Lógicos

​

&&: y

||: o

39 of 48

Sketch 9

39

  • Realiza un programa que muestre un círculo sin relleno en el centro.
  • Si el cursor supera horizontalmente la mitad del lienzo, el círculo deberá rellenarse de un color

40 of 48

Sketch 9 - Solución

40

41 of 48

Sketch 10

41

  • Realiza un programa que muestre un círculo con un color de relleno diferente según lo guardado en una variable “temperatura”
    • temperatura tomará en cada ejecución un valor al azar del intervalo [-10, 30)
      • Para ello se utilizará la función random (x,y)

Color

​

​

​

Valor de temperatura

-10,..9,99

10..19,99

20..29,9

42 of 48

Sketch 10 - Solución

42

43 of 48

Sketch 11

43

  • Realiza un programa que tenga una línea vertical a mitad de lienzo, de 10 píxeles de grosor
  • Deberá mostrar el texto “Izquierda” cuando el cursor del ratón esté a la izquierda de la línea y “Derecha” cuando el cursor esté a la derecha de la línea

44 of 48

Sketch 12

44

  • Realiza un programa en el que aparezca el texto “Haz clic para cambiar el texto”. Al hacer clic, aparecerá el texto “Llevas un clic”, con el segundo clic el texto que debe aparecer es “Llevas dos clic”. A partir del tercer clic, deberá aparecer el texto “¡Para ya!”
    • Pista: Crea una variable para contabilizar el número de clics que se hacen

45 of 48

Sketch 12 - Solución

45

  • Realiza un programa en el que aparezca el texto “Haz clic para cambiar el texto”. Al hacer clic, aparecerá el texto “Llevas un clic”, con el segundo clic el texto que debe aparecer es “Llevas dos clic”. A partir del tercer clic, deberá aparecer el texto “¡Para ya!”

46 of 48

Sketch Extra 1

46

  • Realiza un programa que dibuje la cara (simplificada) de Teddy mediante elipses

​

47 of 48

Sketch Extra 2

47

  • Crea un programa en donde un círculo aparezca desde el borde izquierdo y se desplace poco a poco horizontalmente. Cuando llegue al borde derecho, debe rebotar hasta alcanzar de nuevo el borde izquierdo

48 of 48

Sketch Extra 3

48

  • Con las instrucciones y estructuras vistas en el curso, crea un programa que realice una tarea.
  • Esta tarea puede ser desde hacer que una figura se mueva al pulsar determinadas teclas, hacer que aparezca texto en diferentes colores, de una figura animada que se mueve al pulsar determinadas teclas, un juego de dibujar con el ratón, etc…
  • Puedes ver los ejemplos que aparecen en la página oficial: https://p5js.org/es/examples/ (revisando sólo las secciones que hemos visto) para hacerte una idea de la diversidad de programas que se pueden realizar con pocas instrucciones