Arrays in Processing 3 (Java)

Hola, éste es un video...

whoops!

...no me lastimaré a mí mismo durante

el curso de éste video

empezaré de nuevo

Hola, éste es un video sobre arreglos

en Java/Processing

y voy a usar Processing 3!

el cual es mi nueva canción

mi nuevo álbum Processing 3

Entonces, ¿qué es un arreglo?

¿Por qué querrías usar uno?

¿Cómo funciona?

¿Y qué clase de cosas puedes hacer con él?

Ese es el tópico de éste nuevo video

Entonces, quizás estas familiarizado

con la idea de las variables

int num = 7

entonces, tienes una variable cuyo nombre es "num"

el type es "int", entero (integer)

y el valor es 7

pero, ¿qué pasa si quieres muchos números?

quieres tener 1 y 2 y 3 y 4,

tendrías que hacer todas estas variables.

Bueno, un arreglo es una forma de tener
en una sola variable

una lista de valores individuales

y esos valores pueden ser:

números,

o pedazos de textos,

puede ser un arreglo de imágenes.

Una lista de algo que sea un pedazo de dato

y tener una lista de ese algo.

Y por otro lado,

están los objetos...

Un arreglo es un objeto,

pero no hablaré de objetos en éste video,

los cuales son bastante poderosos.

En el link de abajo recordaré colocar
videos sobre objetos

Entonces, ¿cómo se hace ésta lista?

Bueno, con una variable siempre
necesitas un nombre y un type

Así, con un arreglo...

Un arreglo es una variable pero
es una lista...

Yo veo las variables como valores únicos

y un arreglo es una lista de valores.

Como sea, en éste arreglo

el cual yo llamé "nums"

también necesitas ponerle un nombre:
"nums" y un type: "int"

pero,

hay que añadir esta sintaxis:
corchete y corchete

busca en tu teclado y encuentra
los botones del corchete

si no los has usado antes,
los necesitarás bastante con los arreglos

entonces, ahora tengo un arreglo
de números

y puedo iniciarlo.

En vez de un solo valor,

puede usar llaves:
7, 5, -32, 90

ahora puedes ver que tengo un arreglo

con 4 valores.

Voy a empezar un dibujo,

y añadir esto.

Voy a decir al comienzo:
int [] nums = {30, 40, 10, 5};

números arbitrarios.

y puedes ver aquí que tenemos:

así es la sintaxis del arreglo.

Hay otras formas de iniciar un arreglo,

se puede usar un loop

pero voy a llegar a eso
en un momento.

Esta es solo una forma de empezar

ésta lista de valores.

Ahora viene la pregunta:

por acá, si quisiera usar el valor "num",

para dibujar un elipse,

con un tamaño de "num",

entonces, yo quiero usar este valor,

para ser el tamaño de un círculo,

solo tomo ésta variable,

y la coloco en el ancho y el alto
de la función de elipse,

pero, ¿qué sucede si quiero usar estos
o algún valor de éste arreglo?

mmm... nums... ¿qué?

El problema es que "num" es un valor único

En éste otro hay que señalar uno
de estos valores en particular,

y la forma en la que esto se hace

es con un index.

Un index es una dirección
dentro del arreglo

como contando el arreglo,

es como: aquí esta el número uno,

el número dos,

el número tres,

o el número cuatro.

Ahhh! Pero aquí tendría un problema...

Es decir, esto me hace muy feliz!

Pero es raro cómo se cuentan
los arreglos en la programación.

Puedes pensar que esto tiene 4 elementos,

Éste es el primer elemento

y éste el segundo

Lo que te he dicho es correcto,

sin embargo,

contando en los arreglos,

esto es técnicamente index 0,

entonces, cuando cuentes los elementos
en un arreglo

empieza con 0 y no con 1

entonces, este es el elemento 0,

este es el elemento 1,

éste es el elemento 2,

y éste es el elemento 3.

El valor de index va de 0 a 3,

con un total de 4 elementos.

Entonces, para dirigir individualmente
uno de estos,

nums index 3,

y una vez más, corchetes,

los corchetes son la sintaxis de los arreglos

Voy a tener un arreglo y luego lo dirijo,

no al tercer elemento,

sino al cuarto elemento que es index 3.

Y ahora,

si miras esto,

ésta línea de código,

dibujaría un círculo con un tamaño de 7,

y ésta línea de código,

dibujaría un círculo con un tamaño de 90,

si cambio esto a 1 obtendría 5,

si lo cambio a 0 obtengo 7.

Ahora, añadamos esto en este programa.

Entonces diré:

void setup

diré que el tamaño es 400,400,

y voy a draw y diré:

el fondo a 0 y el relleno a 255,

y luego cuando digo círculo,

añado 100, 100, nums[1], nums [1],

Le daré un zoom out aquí,

y ejecutaré éste video,

y mira el resultado,

y pueden ver aquí,

¡TADA!

Estoy como cantando hoy,
no sé por qué.

Bueno, eso no es cantar realmente,

decir "tada", pero, ¿qué importa?

El tamaño de ese círculo es, ¿qué?

¿30? ¿40?

0 es 30 y 1 es 40,

el tamaño es 40.

Veamos si cambio esto a nums index 2

Ahora mira esto, obtengo uno pequeño

Entonces, hay unas pequeñas cosas

que puedo añadirle a esto.

Bueno, no sé en qué dirección esta yendo esto,

pero voy a ir en alguna dirección.

Ésta es la dirección a la que estoy yendo ahora.

Dibujemos un círculo con todos ellos.

Entonces, hay cuatro elementos:

0, 1, 2, 3,

Ahora agreguemosle más espacio.

100, 200, 300, 400,

y haré el tamaño 500.

Ahora,

mira esto y hagamos estos números más grandes,

50, 92,

entonces, como puedes ver,

¿qué está pasando aquí?

Si acercamos un poco la pantalla

solo para ver todo esto,

tengo 4 círculos,

con valores de X diferentes:
100, 200, 300, 400

cada círculo obtiene su ancho y alto

del arreglo: index 0, 1, 2, 3,

entonces, esto esta funcionando,

esto es una buena idea,

he estado hablando de esto por 7 minutos,

pero esto funciona bien,

esto esta ayudándonos,

en vez de tener 4 variables distintas,

tengo una sola variable

con una lista de cuatro datos,

pero tenemos cuatro líneas de código,

lo cual es algo ridículo, ¿cierto?

Es decir, no es ridículo,

pero es...

El problema es que,

¿qué pasa si tengo 100 valores en un arreglo?

¿qué pasa si tengo 200 valores en un arreglo?

no quiero tener 200 líneas de código,

pero si lo notas,

hay una clase de lógica aquí,

empiezas con 0 aquí,

luego vas a 1, vas a 2, vas a 3,

esto es como una cuenta.

¿Recuerdas que hubo un momento

en el que aprendiste lo que era un for loop?

Si no lo hiciste te linkeare un video sobre
los for loops

Bueno, escribiste algo como esto

o yo he hecho esto muchas veces.

for int i es igual a cero,

i es menos que 4,

i más más.

Ahora...

¡Esto es como un terrible marcador!

...si yo pongo...

¡mucho mejor...!

...println(i);

justo aquí éste loop se ejecutariía,

y primero,

se imprimiría el valor de 0,

luego el de 1, luego el de 2,

tenemos 0, 1, 2, 3, y luego sería 4,

pero 4 no existe, entonces,

i es menor que 4, y el loop terminaría

entonces, nota que el for loop
es una estructura

que puede ser usada para contar
una variable

desde cero hasta un límito como 4.

Bueno, esta es exactamente la estructura

que necesitamos.

Entonces, si regreso a éste código,

y digo:

for int "i" es igual a cero,

"i" es menor que 4,

"i" más más

y luego, tomo esta línea de código,

y la coloco aquí,

bueno, ahora, reemplazo este index 0
con "i"

Entonces, éste loop...

me haré más espacio aquí.

... éste loop...

voy a comentar ésta área.

...éste loop está ahora haciendo el trabajo

de lo que éste código hacía antes,

en vez de escribir manualmente 0, 1, 2, 3,

éste loop le dice a "i" que use los nums

(nums 0, nums 1, nums 2, nums 3)

Ahora, ejecutemos esto y veamos qué sucede.

Bueno, funciono...

... pero se ve mal...

¿por qué se ve mal?

¡Ahhh!

Todos los valores del círculo son 100,

y yo quería que fueran 100, 200, 300, 400,

Bueno,

por aquí, recuerda que el loop está contando

"i" 0, 1, 2, 3,

¿qué pasa cuando se multiplican cada uno por 100?

me da: 0, 100, 200, 300,

ahh, pero yo quiero que sea 100, 200, 300, 400,

ya sé, ¿por qué no simplemente le sumo 100?

como puedes ver, otra cosa que podemos hacer

"i" puede ser el index en el arreglo

0, 1, 2, 3,

pero también podemos aplicar
algo de matemática

para hacer otras cosas diferentes.

Como aquí,

en vez de decir:

100,

¿qué pasaría si quisiera decir:

"i" por 100?

eso me daría 0, 100, 200 y 300

y luego si le sumo 100 a eso,

entonces tengo:

100, 200, 300, 400.

Entonces, ejecutemos esto.

Y tenemos exactamente lo que teníamos.

el ancho tendría solo estos valores.

Una cosa que debería mencionar,

Dos cosas que debería mencionar...

Voy a tratar de abarcar todo en este video.

Pero hay un par de cosas que
debo mencionar.

Una es que no me gusta tener el número 4 allí.

Esto es un valor de hard code,

¿qué tal si añado más valores al arreglo?

seguiría el loop por solo 4 de ellos.

Entonces una cosa que podrías hacer es:

nums.length

esto resuelve dinámicamente

la longitud del arreglo,

entonces, si fuera a añadir otro,

como 75,

puedes ver que añadí un número extra,

el cual me dio un círculo extra,

y ahora el loop repite todo el arreglo,

siempre usando la longitud.

También puedo acercarlos un poco.

Acerquemoslo por 50.

Ahora están más apilados.

¡Aja!

¿Qué era la otra cosa que quería mostrarte?

Bueno, esto es una forma de iniciar un arreglo,

solo le doy unos números estáticos

dentro de estas llaves,

Sin embargo,

algo que me gusta hacer más seguido,

es darle al arreglo valores iniciales

que quizás pueden ser al azar

así que digamos que hay 8 valores,

y, diré que nums "i" es igual a int random
y algo entre 10 y 100.

Entonces, éste código que está completando el arreglo

con un número al azar,

el loop empieza desde 0 hasta 8,

toma un número al azar entre 10 y 100,

y luego lo coloca en el arreglo.

Pero lo gracioso de los arreglos,

es que tienes que específicar,

desde antes,

el tamaño que quieres de ese arreglo.

Ahora, hay muchas formas de expandir

y contraer, ese arreglo.

Pero hay otros videos que cubren eso.

Pero por el propósito de esta discusión,

el arreglo tiene una longitud fija.

Como vimos,

una forma de obtener esa longitud fija

es escribiendo manualmente los valores.

Pero, ¿qué pasa si no sabes los valores?

Solo quieres saber cuántos deberían haber.

Pues la sintaxis para hacer
se ve un poco boba

pero si no lo estas llenando manualmente

lo que necesitas decir es que quieres

un nuevo int con 100 espacios en el arreglo

entonces éste es tu número.

Esto se ve muy redundante,

tengo un int con un arreglo llamado nums,

el cual es un nuevo int con un arreglo y 100 espacios.

Pero hay cosas nuevas aquí,

esto está declarando tu intención en el arreglo,

y esto está creando el arreglo

en el espacio de memoria de la computadora,

para almacenar 100 valores.

Entonces, si vuelvo para acá,

puedo cambiar este código de arriba y decir:

nuevo int con 8 espacios,

nums punto length (nums.length).

Y ahora despejemos un poco
cómo dibujamos esto

diré: noFill (sin relleno),

y el contorno a 255,

y la línea de contorno a 4,

Entonces, el punto de lo que quería mostrar

es que ahora,

puedes ver aquí,

cada vez que ejecuto este dibujo

voy a tener un nuevo resultado.

Cada vez voy a crear un arreglo con 8 espacios,

cada vez voy a completar este arreglo,

con 8 números al azar,

y luego,

siempre voy a repetir éste arreglo,

y dibujaré un círculo usando cada elemento
del arreglo.

Así que aquí vamos,

lo ejecutaremos de nuevo solo para ver

estos círculos con tamaños al azar,

lo ejecutamos de nuevo,

¡y mira a esos círculos con diferentes tamaños!

Entonces, para ti,

Puedo pensar en varios ejercicios,

1. ¿Qué pasa si tu arreglo...

en vez de tener números en él,

quizás sabes sobre las cadenas,

quizás no,

pero, ¿qué tal si haces un arreglo...

con cadenas en él?

"hola" "mi" "amigo"

éste es un arreglo con tres cadenas,

tres secuencias de caracteres,

así que podrías mostrar

cada vez que ejecutas el dibujo,

uno de estos caracteres al azar,

o puedes hacer algo al clickear el mouse,

puedes ver un mensaje a la vez,

¿cómo harías eso?

ahí habrían dos ejercicios interesantes,

intentar este escenario en particular

que yo he hecho aquí,

estoy repitiendo el arreglo entero,

pero, ¿qué tal si tú solo quieres usar
un número a la vez?

o una cadena a la vez.

La otra cosa que es crucial mencionar,

es que una razón para aprender esto

es que todas estas cosas en la ventana,

que estás viendo aquí,

es un arreglo de pixeles,

un arreglo de colores,

entonces, debajo de la cubierta,

de un dibujo de processing,

de una imagen que podrías cargar,

o una imagen que podría obtener de una cámara,

todos los colores de esta imagen

están almacenados en un arreglo gigante,

y puedes hacer un loop por todo ese arreglo,

para leer todos estos colores

y manipularlos

También añadiré un link debajo

para un tutorial online de imágenes y pixeles

para que tengas una base de eso.

Muy bien, entonces,

espero que éste video haya ayudado,

use un poco de processing 3 y unos lindos círculos,

y una camisa extraña...

¿se esta mezclando con el fondo?

Sí, mira, el fondo...

A nadie le importa eso,

pero es interesante para mí,

y diré hasta luego antes de que
esa cámara se apague.

¡Adiós!