
> Hay muchas metodologías y lenguajes para aprender a programar, por eso, lo primero que se encuentra una persona que quiere aprender a programar, es frente a la elección de un lenguaje o plataforma de desarrollo.

<div style="margin-bottom: 4em" />

Hoy en día con una conexión a internet tenemos acceso a una gran cantidad de información, manuales y tutoriales, pero podemos seguir con la duda de qué lenguaje elegir.

Los lenguajes de programación nacieron frente a la necesidad de solucionar un problema concreto, por lo que no todos son iguales, ni todos sirven para todo.

En varias ocasiones he visto la frustración de gente que quiere aprender a programar cuando se encuentran con el siguiente código para imprimir por consola **Hello, World!**

<div style="margin-bottom: 4em" />

```
// Imprimir Hello, World! en Java
public class Main {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
  }
}
```

Creo que la mejor manera de aprender es jugando y disfrutando, así que un lenguaje que nos muestre los resultados de una forma visual nos animará a seguir jugando y aprendiendo.

## Processing

Un lenguaje que podemos usar para exprimir nuestra creatividad es [Processing](https://processing.org/) basado en Java y originalmente diseñado para hacer accesible la programación a artistas, diseñadores, educadores y principiantes.

Processing nos ofrece un entorno de desarrollo (multiplataforma) para empezar a ver resultados desde los primeros minutos.

Este es un ejemplo de "Hello, World!" en Processing:

```
void setup() {
  size(500,400);
}

void draw() {
  background(10, 80, 100);
  ellipse(mouseX, mouseY, 80, 80);
}
```

El resultado es un círculo que podemos mover con el cursor.

![Hello, World!](https://res.cloudinary.com/nucliweb/image/upload/c_scale,dpr_auto,f_auto,q_auto,w_896/v1694435035/joanleon.dev/assets/aprender-a-programar-con-processing-y-p5js/processing.gif)

> El resultado que obtenemos es mucho más visual e interactivo.

<div style="margin-bottom: 4em" />

Viendo uno de los ejemplos que incluye Processing nos podemos hacer una idea de la potencia y lo divertido de aprender a programar con este lenguaje.

![Mirror](https://res.cloudinary.com/nucliweb/image/upload/c_scale,dpr_auto,f_auto,q_auto,w_896/v1694435035/joanleon.dev/assets/aprender-a-programar-con-processing-y-p5js/Mirror.gif)

> Mirror de [Daniel Shiffman](http://shiffman.net/)

<div style="margin-bottom: 4em" />

Hay una gran comunidad y documentación de Processing que puedes encontrar en la web oficial [processing.org](https://processing.org), puedes empezar con el tutorial [Hello Processing](http://http://hello.processing.org/).

![Hello Processing](https://res.cloudinary.com/nucliweb/image/upload/c_scale,dpr_auto,f_auto,q_auto,w_896/v1694435035/joanleon.dev/assets/aprender-a-programar-con-processing-y-p5js/Hello-Processing.png)

<div style="margin-bottom: 4em" />

## P5js

[P5.js](http://p5js.org/) es una librería Javascript que se inicia con el objetivo original de Processing, pero adaptado a la web. Creada por [Lauren McCarthy](http://lauren-mccarthy.com/) y con el soporte de Processing Fundation, nos permite programar con [Javascript](https://developer.mozilla.org/es/docs/Web/JavaScript) con la misma filosofía que Processing, pero en este caso para el navegador.

Ejemplo de "Hello, World" en P5.js

<iframe
  height="400"
  style="width: 100%;"
  scrolling="no"
  title="P5.js Hello World"
  src="https://codepen.io/nucliweb/embed/oxoOay?height=300&theme-id=11883&default-tab=js,result"
  frameborder="no"
  loading="lazy"
  allowtransparency="true"
  allowfullscreen="true"
>
  See the Pen{" "}
  <a href="https://codepen.io/nucliweb/pen/oxoOay">P5.js Hello World</a> by Joan
  Leon (<a href="https://codepen.io/nucliweb">@nucliweb</a>) on{" "}
  <a href="https://codepen.io">CodePen</a>.
</iframe>

<div style="margin-bottom: 4em" />

> Con P5.js vemos el resultado en el navegador, así que podemos usar Codepen para el ejemplo _(selecciona la pestaña JS para ver el código)_.

En este caso también contamos con una comunidad que va aumentando, una muy buena documentación y muchos ejemplos. La mayoría de ejemplos que tenemos en Processing se están portanto a P5.js, así como el tutorial [Hello p5\*](http://hello.p5js.org/)

Un ejemplo un poco más complejo es este joystick pixelado, donde con pocas líneas de código obtenemos un resultado muy visual.

<iframe
  height="488"
  style="width: 100%;"
  scrolling="no"
  title="Joystick PixelArt Effect"
  src="https://codepen.io/nucliweb/embed/ZGwxLr?height=488&theme-id=11883&default-tab=js,result"
  frameborder="no"
  loading="lazy"
  allowtransparency="true"
  allowfullscreen="true"
>
  See the Pen{" "}
  <a href="https://codepen.io/nucliweb/pen/ZGwxLr">Joystick PixelArt Effect</a>{" "}
  by Joan Leon (<a href="https://codepen.io/nucliweb">@nucliweb</a>) on{" "}
  <a href="https://codepen.io">CodePen</a>.
</iframe>

<div style="margin-bottom: 4em" />

## Conclusión

Creo que seleccionar un lenguaje donde el resultado sea muy visual e interactivo nos facilitará el aprendizaje. Lo he podido comprobar con uno de mis hijos, que al segundo día ya estaba dibujando formas y creando laberintos con líneas de código ;)
