FICHA 10 PROCESSING

Hola chicos y chicas, en la ficha que vamos a realizar un programa que simule el movimiento indefinido de un círculo de derecha a izquierda como la característica animación de luces del “Coche Fantástico”. 
Parametrizamos tanto el radio del círculo como la distancia entre un círculo y otro (llámale vx) para que se pueda modificar fácilmente. 
Os muestro el ejemplo de como lo he realizado:
int x = 100;
int vx = 20;
long tiempo = 0;
long t_actualizado = 0;
long t_retardo = 50;
void setup()
{
size(600,600);
background(0,0,0);
}
void draw() 
{
float ancho = random(100);

tiempo = millis();
if( tiempo > t_actualizado + t_retardo) 
{
background(0,0,0);
fill(255,0,0);
ellipse(x,300,50,50);
t_actualizado = tiempo;
x=x+vx;
if(x>=575)
vx= -20;
if(x<=25)
vx=20;
}
}

Y esta seria la imagen del resultado final😊😊:

La bola se moveria de lado a lado sin parar en un tiempo determinado a través de la función millis().

Un saludo👋👋

FICHA 9 PROCESSING

Hola chicos y chicas en la siguiente ficha vamos a realizar un programa que dibuje un circulo en el centro de la ventana y que podamos modificar su diámetro mediante las flechas UP  y DOWN.
 Os voy a mostrar como realizar este circulocrece:

int x=50;
int y=50;
void setup()
{
  size(400,400);
  background(0,0,0);
}
void draw()
{
if(keyPressed)
{
  switch(keyCode)
  {
    case 38: //tecla arriba aumenta
    y++;
    x++;
    break;
    case 40: //tecla abajo disminuye
    y--;
    x--;
    break;
  }
  if(x>=375) //limita el aumento
  x=375;
  if(x<=25) // limita la disminucion del círculo
  x=25;
  if(y>=375) // limita el aumento 
  y=375;
  if(y<=25) // limita la disminucion del círculo 
  y=25;
  
  ellipse(200,200,x,y);
}
}

Este seria el resultado final😄😄:

Como observamos este circulo crece y decrece. Nos vemos en la siguiente ficha. Un saludo👋👋

FICHA 8 PROCESSING

Hola chicos y chicas, hoy vamos a realizar la pizarra en processing.
Para ello vamos ha realizar un programa que nos permita dibujar a mano alzada en nuestro lienzo moviendo el ratón. Para ello usaremos el bloque mouseDragged y dentro de este añadir el código necesario para dibujar puntos continuamente.

Ahora necesitaremos que se pueda cambiar el color en el que se pinta en pantalla, para ello utilizaremos una serie de teclas que cambien el color del stroke que se utiliza. Para ello usaremos el bloque void keyReleased. Lo programamos de tal forma que si se pulsa la r, el lápiz sea rojo, si se pulsa la g, el lápiz sea verde, y si se pulsa la b el lápiz pinte azul.
Por último vamos a incrementar el grosor del lápiz añadiendo al bloque keyReleased las instrucciones necesarias para que si pulsamos el cursor superior o inferior, aumente o disminuya ese grosor.


Os muestro el ejemplo de la programación que hemos realizado😋😋:

void setup() 
{ 
size(400,400); 
background(#030303);
}
void draw() 
{
mouseDragged();
point(mouseX, mouseY);
keyReleased();
if(key=='r'){
stroke(250,0,0);}

if(key=='g'){
  stroke(0,250,0);
}
if(key=='b'){
  stroke(0,0,250);
}

int ancho1=20;
int ancho2=10;
if(keyCode==UP){
  strokeWeight(ancho1);
}
{
if(keyCode==DOWN){
 strokeWeight(ancho2);
}
}

}

Este seria el resultado final:

Espero que os haya gustado y nos vemos en la siguiente ficha. Un saludo👋👋

FICHA 7 PROCESSING

Hola chicos y chicas, en la ficha  vamos a realizar un programa que defina una variable tipo float que se llame calificacion. Si esa calificación es menor que 0 o mayor que 10 que imprima por pantalla “Error al introducir la calificación”. Si esa calificación es mayor que 0 y menor que 5 que imprima por pantalla “Calificación suspensa” Si esa calificación es mayor o igual que 5 y menor o igual que 10 que imprima por pantalla “Calificación aprobada”.

Para realizar este programa debemos añadir estas variables en processing😃😃:

void setup()
{
  int x=5;
if (x<0||x>10) println("Error al introducir la calificación");
if (x>0&&x<5) println("Calificación suspensa");
if (x>=5&&x<=10) println("Calificación aprobada");

}

void draw()
{
  }

Como podemos observar se introduce la variable int con la x como valor medio es decir el numero cinco. Después podemos observar la variable int que hace que se cumpla lo dicho anteriormente ( calificacion aprobada, suspensa....) y el println que realiza una impresión de los datos.

Bueno amigos nos vemos en la ficha 8. Un saludo.👋👋

FICHA 6 PROCESSING

Hola chicos y chicas en la ficha que vamos a realizar vamos a utilizar el bucle while(). Este nos permite realizar una serie de operaciones similares según que se cumpla una determinada condición. La estructura es la siguiente: 
int i = 0; //declaración de la variable contador 
while (condición que se debe cumplir) 
{ 
instrucciones a realizar; i = i + 10;//incremento de la variable contador 
}

Bueno amigos os voy a enseñar los pasos que debemos realizar para crear un conjunto de lineas horizontales sobre un fondo rojo👽👽:
void setup()
{
size(400,400);//creamos la ventana
background(255,0,10);//definimos color de fondo
int i = 0;// creamos la variable que va a hacer de contador
while (i < 400) {//evaluamos la condición
 line(30, i, 370, i);//dibuja una linea horizontal
 i = i + 10;//incrementa la variable contador en 10 unidades
} }
void draw() 
{
}

Este seria el resultado final:

Espero que os haya gustado y nos vemos en la siguiente ficha. Un saludo💪💪

FICHA 5 PROCESSING

Hola chicos y chicas, hoy os voy a mostrar como realizar círculos concéntricos utilizando el bucle for() para obtener círculos concéntricos separados una determinada distancia.😮😮😮

Aquí os muestro como lo he realizado con explicación correspondiente:
void setup()
{
size(800,800);//lienzo de 800 pixeles de ancho y alto
for(int x=20; x<=380; x=x+20)
{
  noFill();//quitamos color de fondo
  ellipse(400,400,x,x);//usamos la formula de la ellipse para crear las circunferencias
}
}
void draw()
{
  
}

Como podemos observar la mayor dificultad de este ejercicio es usar función for().
Os muestro el resultado final de como seria:👌👌

Bueno tambien os muestro como realizar el ejercicio de la matriz puntos rojos utilizando bucles for() anidados para dibujar la siguiente matriz de círculos rojos.

Aqui os muestro la explicación de este ejercicio:
void setup()
{
size(400,400);
background(#050505);

}
void draw()
{
  for(int x=20; x<=380; x=x+20)// con esta formula se recorren las columnas
{
  for(int y=20; y<=380; y=y+20)// con esta formula se recorren las filas
  {
    stroke(#FF0808);
    strokeWeight(15);
    
    point(x,y);
    
  }
}
}

Añadimos de esta manera puntos de color rojo con un grosor de 5 pixeles y en un fondo de color negro estos puntos estan utilizan los puntos x e y donde x e y tiene un valor de 20.

El resultado final seria este😎😎:

Espero que os haya gustado estos ejercicios y nos vemos en la ficha 6. Un saludo💗💗

FICHA 4 PROCESSING

Hola chicos y chicas en la siguiente ficha vamos a crear una fuente de internet y le vamos a dar color a esta fuente.
Os muestro como lo he realizado😉😉:
void setup()
{
size(650,200);// creo la ventana
textSize(32);// defino el tamaño de la fuente
fill(0,5,235);// defino el color 1
text("programacionyrobotica.com", 10, 30);
fill(25,60,795);// defino el color 2
text("programacionyrobotica.com", 10, 70);
fill(505,98,69,22);// defino el color 2 y su transparencia
text("programacionyrobotica.com", 10, 110);
}
void draw()
{
}

Este seria el resultado final:

Nos vemos en la ficha 5. Un saludo👋👋

FICHA 3 PROCESSING

Hola chicos y chicas en la practica de la ficha 3 os voy a enseñar a crear unos aros olímpicos para ello debemos añadir estas variables en nuestro programa llamado processing.
EJEMPLO AROS OLÍMPICOS.
void setup()
{
size(500,500);//lienzo de 500 pixeles de alto y ancho
background(#FFFCFC);
}
void draw()
{
strokeWeight (5);//grosor de la linea de los aros
stroke (0,0,255);//color azul del relleno de la linea del primer aro
ellipse (80,100,100,100);//primer aro olimpico
strokeWeight (5);//grosor de la linea de los aros
stroke (0,0,0);//color negro del relleno de la linea del primer aro
ellipse (195,100,100,100);//segundo aro olimpico
strokeWeight (5);//grosor de la linea de los aros
stroke (255,0,0);//color rojo del relleno de la linea del primer aro
ellipse (310, 100,100,100); //tercer aro olimpico
strokeWeight (5);//grosor de la linea de los aros
stroke (255,255,0);//color amarillo del relleno de la linea del primer aro
ellipse (138,160,100,100);//cuarto aro olimpico
strokeWeight (5);//grosor de la linea de los aros
stroke (0,255,0);//color verde del relleno de la linea del primer aro
ellipse (253,160,100,100); //quinto aro olimpico
}

COMO PODEMOS OBSERVAR OBTENDREMOS ESTE RESULTADO:

Bueno tambien os quiero mostrar como se realizada una diana en processing utilizando elipse y colores de fondo y de alguna linea que lo rodea es un procedimiento muy sencillo.
Os muestro como se realiza:
 void setup()
{
  
size(800,800);//lienzo de 800 pixeles de ancho y alto
}

void draw()
{

  
  stroke(0,0,0);//color negro de la linea
fill(#FFFCFC);//color de relleno blanco
ellipse(400,400,400,400);//primera circunferencia
fill(#FFFCFC);//color de relleno blanco
ellipse(400,400,360,360);//segunda circunferencia
fill(#030000);//color de relleno negro
stroke(#FFFCFC);//color blanco de la linea
ellipse(400,400,320,320);//tercera circunferencia
ellipse(400,400,280,280);//cuarta circunferencia
stroke(#FFFCFC);//color blanco de la linea
fill(#FFFCFC);//color de relleno blanco
stroke(0,0,0);//color negro de la linea
fill(#B0E4E8);//color de relleno azul
ellipse(400,400,240,240);//quinta circunferencia
ellipse(400,400,200,200);//sexta circunferencia
stroke(0,0,0);//color negro de la linea
fill(#F22536);//color de relleno rojo
ellipse(400,400,160,160);//septima circunferencia
ellipse(400,400,120,120);//octava circunferencia
stroke(0,0,0);//color negro de la linea
fill(#EEFF08);//color de relleno amarillo
ellipse(400,400,80,80);//novena circunferencia
ellipse(400,400,40,40);//decima circunferencia
ellipse(400,400,0,0);//undecima circunferencia

}


Y esta es la imagen del resultado:

ESPERO QUE OS HAYA GUSTADO Y NOS VEMOS EN LA SIGUIENTE FICHA. UN SALUDO👋😉

FICHA 2 PROCESSING

Hola a todos, en la siguiente ficha os voy a enseñar a crear un lienzo sobre el que vamos a trabajar, a este lienzo le vamos a añadir un tamaño de pixeles de ancho y alto. Os voy a mostrar un ejemplo:

















OS IRÉ ENSEÑANDO NUEVAS MÉTODOS PARA USAR EN PROCESSING.