6º CONTACTO

                            SERPIENTE

En este programa vamos hacer que se mueva un objeto simulando que fuera una "serpiente". Se crea un círculo y este va hacer el que haga nuestra serpiente.
Para ello vamos a utilizar los comando nostroke, fill, ellipse y size.
Estos son los comandos nuevos que hasta ahora no lo hemos utilizado:
- Nostroke: Este comando se utiliza para no dibujar el contorno de las figuras.
- Fill: Este comando se utiliza para establecer un color a la figura. Siempre hay que poner tres números. Ej(255,45,67).

 
Hemos creado un círculo al principio. Este es el programa:

void setup() {
 size(400,400);
}
void draw() {
nostroke();
fill(255, 10, 100);
ellipse(100, 100, 30, 30);
}

Con la ayuda de otro programa hemos hecho que nuestro círculo se moviera. Hemos cambiado el color del círculo.

Aquí os dejo el programa:
 void setup() {
  size(400, 400);
}

void draw() {
  noStroke();           
  fill(155,120, 170);        
  ellipse(mouseX, mouseY, 30, 30);
}
 Hay que decir que hay programas más complejos, pero no lo vamos a utilizar por ahora, ya que todavía estamos con lo básico. Más adelante lo ire haciendo.

EJEMPLOS
Ahora hemos utilizado los comando mouseX y mouseY, para que el círculo se moviera. Además hemos cambiado el color.

Aquí os dejo el programa que he utilizado:
 void setup() {
 size(400,400);
}
void draw() {
nostroke();
fill(255, 10, 100);
ellipse(50, 50, mouseX, mouseY);
}
 Hemos añadio otro círculo, ya tenemos dos, uno ha empezado por la derecha y otro por la izquierda con diferentes coordenadas.

Aquí os dejo el programa:
void setup() {
  size(400, 400);
}

void draw() {
  noStroke();            
  fill(155,120, 170);         
  ellipse(mouseX, mouseY, 30, 30);
  ellipse( 30, 30, mouseX, mouseY);
}
 

5º CONTACTO

                          SETUP Y DRAW

En este quinto contacto hemos utilizado los comando SETUP y DRAW. 

-SETUP: Se ejecuta una única vez cuando el programa empieza. Sólo necesitamos establecer el tamaño de la ventana una vez, al principio del programa.

-DRAW:Se ejecuta una y otra vez. Se ejecuta línea por línea, de arriba a abajo hasta la última línea, donde vuelve a empezar desde el principio.

 

Aquí os dejo el programa que he utilizado:

void setup() {

size(300, 300);

}

void draw() {

line(0 ,0, width, height);

}

En este programa se establece el tamaño de la ventana y dibuja una línea de tras de otra. Como esto no se puede apreciar que esto está pasando una tras otra, se utiliza otros comando para hacerlo más visible.

-mouseX: La coordenada X del puntero del ratón. 

-mouseY: La coordenada Y del puntero del ratón.

Aquí si mueves el ratón para un lado o otro se va a formar líneas más largas o más cortas con diferentes ángulo, por decirlo de alguna manera. Aquí os dejo el programa que he utilizado:

void setup() {

size(300,300);

}

 

void draw() {

line(0, 0, mouseX, mouseY);

}

 Si pongo el comando background , la línea se mueve de un lado a otro pero no se copia( por así decirlo) la línea una detrás de otra. Aquí os dejo el programa:
 

void setup() {

size(300,300);

}

 

void draw() {

background(255);

line(0, 0, mouseX, mouseY);

}

 

 

 EJEMPLOS:
 .-En este programa he puesto otra línea, mientras una se movía de un lado para el otro, la otra se movía en vertical.

 

void setup() {
size(300,300);
}
 void draw() {
background(255);
line(0, 0, mouseX, mouseY);
line(10,10, mouseY, mouseY);
}

 .-He modificado algunos comandos y he cambiado el color a la pantalla.Aquí he utilizado los comando height y width, además de los comando mouseX y mouseY.

 
 void setup() {
size(300,300);
}

void draw() {
background(8,156,89);
line(0, 0, width, mouseY);
line(10,10, mouseY, height);
}
 

 

4º CONTACTO

                                                          TIPOS DE DATOS

Aquí os voy a definir los tipos de datos más comunes.

• int: Número entero, p.ej., 2, 99 o 532.
• float: Número decimal, p.ej., 2.76, 8.211 o 900.3.
• boolean: Puede ser verdadero o falso.
• char: Un caracter, p.ej. ‘r’, ‘2’ o ‘%’.
• String: Una secuencia de caráteres, p.ej. “hola”, “¡Me encanta programar!”.

Sirve para definir una variable y así poder utilizarlas luego. También incluye algunas variables para hacerla más accesible dentro de tus programas. Como width y height. Estas variables devuelven la anchura y la altura de la ventana del programa.

Aquí os dejo el programa que he utilizado para hacer lo de la foto.

size(400, 200);

ellipse(width/2, height/2, width, height);







Os preguntaréis que comandos son size y ellipse. Ahora os lo defino:

 -Size: Es un comando que se utiliza para  establecer el tamaño de la ventana.

-Ellipse: Es un comando que se utiliza para dibujar un elipse con las coordenadas que les indiques. El tamaño se establece con los diámetros. Si las coordenadas son las mismas esto sera un círculo.

 - Width: Es la anchura de la pantalla.                                                 -Height: Es la altura de la pantalla.                                                  

Aquí he hecho un óvalo recortado, cambiando las coordenadas del Size y también del Ellipce.

Aquí he hecho un circulo poniendo todas las coordenadas iguales.

3º CONTACTO

                                                   VARIABLES

En este día vamos hacer dos líneas pero esta vez con variables. Es el mismo proceso pero aquí hay que utilizar las variables. Es el proceso que se utiliza más.
Las variables con como un contenedor con diferentes tipos de datos. Tienes que definir cada tipo de variable, el nombre y su valor.
Voy a poner un ejemplo para que los entendáis mejor: Digamos que tenemos dos contenedores uno para galletas y otro para palabras. En cada contenedor metes lo que quieras , por ejemplo en el contenedor de las galletas metes galletas, y en el del contenedor de palabras metemos la palabra arduino. A cada contenedor le tenemos que poner un nombre.

Ahora os dejo el programa y una foto con lo que hace.

int value1 = 0;

int value2 = 100;

line(value1, value1, value2, value2);

line(value1, value2, value2, value1);




-He hecho varios ejemplos:

Aquí he puesto una línea horizontal y otra 

vertical.

Aquí he definido otra variable, y he hecho otra línea.

-Este proceso puede añadirle todo lo que ya 

sabemos, por ejemplo ponerle un color a las 

líneas o ponerle el fondo.

2º CONTACTO

                                LÍNEA
Ahora vamos ha hacer dos líneas y le vamos a poner un color a cada una , además se van a cruzar. Utilizamos los comandos:

-Background: Es un comando que va desde 0 hasta 255, cada uno de esos números es una tonalidad diferente.
-Line: Es el comando que habíamos utilizado para crear una línea.
-Stroke: Es un comando que utilizamos para poner el color a la línea.

Aquí os dejo la programación que he utilizado. 

1 2 3 4

background(255); line(0, 0, 100, 100); stroke(0, 0, 255); line(0, 100, 100, 0);

Hecho varios ejemplos:

Aquí he cambiado la forma de las líneas y he pintado una.

Aquí he hecho una línea más, y he pintado dos líneas.

1º CONTACTO

                           LÍNEA

En el primer dia , he leido todo lo que se puede saber sobre PROCESSING. Es un programa en el que puedes hacer un simple linea o poner colores a tu pantalla o incluso hacer una serpiente, etc...He empezado hacer una línea con la ayuda del comando line. Ahora os enseñar el resultado:

  
Como podemos ver hemos utilizado el comando line(0,0,100,100); y su resultado ha sido un línea vertical. 
Hemos echo varios ejemplos más de poner la línea más corta o más larga.

 Aquí podemos ver como la línea se ha echo más chica, con tan solo cambiar las cordenadas. Siempre hay que dar cordenadas del 1 al 100.

 Aquí podemos ver que he cambiado la dirección de la línea.
Estos son los datos que he utilizado, te los dejo para que tu puedas hacer tu propia línea:
line(0,0,100,100);
line(20,20,50,50);
line(100,20,50,50);