Introducción a los Computadores

Los computadores son máquinas construidas para realizar cálculos de manera automática. Los primeros computadores eran lentos y de baja capacidad, construidos con elementos electromecánicos y con tubos de vacio. Luego, con el surgimiento de los transistores y la tecnologías de estado sólido (es decir los chips electrónicos), los computadores se hicieron más pequeños, potentes y eficientes. Hoy en día el celular que llevan en sus bolsillos es millones de veces más potente que los primero computadores.

El computador tiene tres componentes escenciales: Procesador, Memoria y los dispositivos de entrada y salida.

  • El procesador es el que se encarga de realizar los cálculos.
  • La memoria almacena los resultados.
  • Los dispositivos de entrada y salida me sirven para leer datos, mostrar resultados al usuario, y enviar mensajes. Ejemplos de dispositivos de entrada y salida son: la pantalla, el teclado, el mouse y la tarjeta de red que me permite enviar y recibir datos sobre internet.

Lenguajes de programación

Los lenguajes de programación son lenguajes con sintaxis y gramáticas definidas, que permiten a los programadores darle instrucciones a los computadores.

En este tutorial utilizaremos un lenguaje de programación denominado JavaScript. Hay muchos otros lenguajes que puedes aprender, como Java, Phyton, C++ entre otros.

La sintaxis del lenguaje es muy simple. Por ejemplo, para invocar una función que muestra un cuadro de texto con una alerta, puedo escribir:


alert("Revisa el clima antes de salir");


La instrucción anterior invoca la función alert(mensaje) y le pasa como valor del parámetro mensaje la cadena de caracteres "Revisa el clima antes de salir". No olvide escribir un ; al final de cada instrucción.

Librerías de funciones

Generalmente los lenguajes proveen conjuntos de funciones que permiten hacer acciones sofisticadas como dibujar gráficos, crear música y enviar mensajes de correo. Estas funcionalidades se agrupan en librerías. Para este tutorial utilizaremos la librería de gráficos y sonidos denominada P5.js.

Esta librería provee funciones para dibujar círculos, triángulos, rectángulos y otras que exploraremos más adelante. Un ejemplo de como invocar una de estas funciones para pintar un círculo es el siguiente:


ellipse(50, 50, 100, 100);

La sintaxis de la función es la siguiente ellipse(x, y, ancho, alto);. Donde los parámetros x y y representan el centro de la elipse, y los parámetros ancho y alto representan el ancho y el alto de la elipse. Si los parámetros de ancho y alto son iguales se dibujará un círculo. Los valores se dan en pixeles, un pixel es un punto en la pantalla (más sobre esto en la siguiente sección).

Otras funciones disponibles son:

  • createCanvas(ancho, alto); crea un lienzo para realizar los dibujos con el ancho y alto especificados en ancho y alto. En el lienzo, las cordenadas en el eje x se miden desde la esquina superior izquierda hacia la derecha y las cordenadas en el eje y se miden desde la esquina superior izquierda hacia abajo.
  • line(x1, y1, x2, y2); dibuja una línea entre los puntos (x1, y1) y (x2, y2).
  • rect(x,y, ancho, alto); dibuja un rectángulo con la esquina superior izquierda en (x, y) y con ancho y alto especificado en los parámetros ancho, alto.
  • triangle(x1,y1,x2,y2,x3,y3); dibuja un triángulo entre los puntos puntos (x1, y1), (x2, y2) y (x3, y3).
  • background(rojo, verde, azul); cambia el color del lienzo con un color que es la combinación de los niveles de rojo, verde y azul especificados en los parámetros respectivos. Cada parámetro puede ser una varlor de 0 a 255.

Definiendo funciones

Ahora vamos a realizar programas. Para poder utilizar las funciones de la libarería gráfica usted debe escribir sus instrucciones al interior de dos funciones definidas por usted: setup y draw.

Estas funciones son invocadas de la siguiente manera cada vez que usted oprime el boton ejecutar:

  • La función setup se invoca al principio, una sola vez, despues de oprimir el boton Ejecutar.
  • La función draw se invoca idefinidamente de manera continua (muchas veces por segundo), despues de ejecutar la función setup. Cuando realizemos animaciones usted verá la utilidad de que esta función se repita de manera idefinida.

Una función se define usando la palabra reservada function de la siguiente manera:

function [Nombre de la función] ( [Lista de parámetros] ) { [Lista de instrucciones separadas por ;] }

Por ejemplo, si deseo dibujar un círculo puedo escribir el siguiente programa:

function setup() {
    createCanvas(600, 400);
}

function draw() {
    ellipse(300, 300, 100, 100);
}

Observe que las dos funciones definidas no tienen parámetros, es decir que cuando las invocan no necesitan ningún valor en el paréntesis.

Cuando se ejecuta este programa, primero se ejecutan una sola vez las instrucciones definidas en la función setup y luego se ejecutan indefinidamente las instrucciones definidas en la función draw. Así, primero se crea un lienzo de 600x400 pixeles y luego se dibuja un círculo con centro en las cordenadas (300,300) y de ancho 100 y alto 100 (recuerde que todos los números se refieren a pixeles).

Mi primer programa

Ahora intenta realizar lo siguiente en el programa a continuación:
  • Lee el programa e intente explicarlo.
  • Mueva los círculos de posición.
  • Cambie el tamaño de los círculos.
  • Dibuje una línea, un rectángulo y un triangulo.

Recuerda: siempre puedes restaurar el programa original oprimiendo el botón Restaurar.



Código de ejemplo