Primeros pasos

PortadaIntroducionProgramacion-01

¡Bienvenido a los tutoriales de introducción a la programación!

Este es el primero de una serie de tutoriales que tienen como objetivo explicar los conceptos básicos de la programación de la manera más simple posible, para esto ocuparemos Processing, el cuál es un lenguaje de programación muy simple y que funciona de una manera gráfica.

La programación tiene como objetivo dar instrucciones o describir objetos (en su mayoría virtuales).

Processing3Logo

Processing nos sirve para crear objetos gráficos como círculos, cuadrados, triángulos, nos permite modificar su tamaño, su posición y muchas cosas más, es un lenguaje de programación increíblemente simple pero no por eso significa que no se puedan hacer cosas interesantes.

A continuación tienen un ejemplo de Bees & Bombs de lo que se puede hacer con processing:

fuente: http://beesandbombs.tumblr.com/

¡Asombroso! ¿no creen? El desarrollo de aplicaciones es muy interesante porque hacemos el papel de creadores, nosotros decidimos que hacer, dónde, cómo y cuándo lo hará. Lo único que hay que saber es cómo dar las instrucciones correctas. Entonces vamos a comenzar:

El primer paso es descargar el entorno de desarrollo, será nuestra herramienta para poder crear nuestras aplicaciones.

Descargar Processing

También necesitarás Java, si no tienes instalado Java da click en el botón de abajo, te enviaremos a una página en la que te explicamos como instalar java, si ya lo tienes instalado puedes seguir con este tutorial.

Instalar Java

Processing está disponible para distintos sistemas operativos, en sus versiones de 32 y 64 bits, y además ¡es gratuito! Les pide una donación voluntaria que es muy agradecida si ustedes la dan pero no es obligatoria.

DescargaProcessing

Nosotros vamos a ocupar la versión de Windows de 64 bits. Al descargarla la descomprimimos.

Descomprimiendo-Processing

Buscamos el archivo ejecutable processing.exe en la carpeta que acabamos de descomprimir y damos doble click sobre él para iniciar.

Abrir-Processing

Te ponemos algunas etiquetas que describen las tres secciones esenciales del programa, labarra de herramientas, el editor de código, y el monitor:

secciones-processing

En la barra de herramientas podemos encontrar botones que van a realizar algunas funciones relacionadas con nuestro programa:

BarraHerramientasEtiquetada

En el editor de código podremos escribir las instrucciones que buscamos que nuestra computadora realice:EditorCodigoProcessing

Y el monitor nos muestra el estado de nuestra aplicación, nos dirá si se está ejecutando correctamente, o si existe algún error.MonitorProcessing

Recordemos, la idea es que nosotros escribamos una lista de órdenes y nuestra computadora ejecute dichas órdenes, vamos a probar algo rápidamente. Escribiremos un programa muy simple para entender como funciona nuestro entorno de desarrollo.

En el editor de código escribiremos lo siguiente:

ellipse(50,50,80,80);

Hay que ser cuidadosos, debemos escribir exactamente igual el código, basta con que cambies una sola letra diferente para que no funcione nuestro código.

Luego presionaremos el botón Ejecutar, si nuestro código está escrito correctamente aparecerá una nueva ventana y se debe ver algo como lo siguiente:PrimerProgramaEn caso de que lo hayamos escrito mal en la pestaña de Errores del Monitor nos mostrará un mensaje de error como el siguiente, si tienes algún error en tu código sólo revisa que todo esté correctamente escrito:ErrorProcessing¡Muy bien! Hemos creado nuestra primera aplicación, nuestro primer programa, la nueva ventana que apareció en el momento en que ejecutamos nuestra aplicación se llama canvas, el canvas es nuestro lienzo, el espacio en el que podemos dibujar.

Ya hemos puesto nuestra primera instrucción con la cuál podemos crear un elipse, por ahora no entraremos en detalles, en esta sesión solamente estaremos experimentando, vamos a crear muy rápidamente un programa para dibujar, quizá tengas muchas dudas, no te preocupes, las iremos resolviendo poco a poco.

Cierra la ventana del círculo o presiona el botón Detener para detener la ejecución del programa. Copia el siguiente código en tu editor de código y ejecútalo.

[codepen_embed height=”800″ theme_id=”0″ slug_hash=”oYRgEL” default_tab=”js,result” user=”emmanuelrojas”]See the Pen HolaP5JS by Emmanuel Rojas Briseño (@emmanuelrojas) on CodePen.[/codepen_embed]

void setup(){
size(1000,400);
background(0,0,150);
fill(255);
stroke(255);
}

void draw(){
if(mousePressed){
rect(mouseX,mouseY,25,25);
}
}

Al ejecutar el código te abrirá una nueva ventana de color azul oscuro, al hacer click en cualquier espacio se dibujará un rectángulo, si lo mantienes presionado y mueves el cursor irá creando más rectángulos, ¡estás dibujando!

FuncionaProcessing

Vamos a guardar nuestro programa, puedes poner el nombre que quieras aunque te recomendamos HolaMundo.

Para guardar el programa vamos al menú Archivo y elegimos la opción Guardar, te abrirá una ventana para elegir la carpeta en la cuál quieres guardar tu archivo y te permitirá elegir un nombre.GuardarProgramaPor esta sesión es todo, en la siguiente sesión revisaremos más a detalle el código por ahora nos conformaremos diciendo que funciona, poco a poco iremos aprendiendo más instrucciones, más funciones que podemos realizar. Sigue con la próxima sesión, ¡aún hay mucho por aprender!

Siguiente tutorial

Fuentes:

https://processing.org/tutorials/