Repaso Fichas 2 - 3

    A lo largo de este repaso de las fichas 2 y 3, hemos puesto en práctica lo aprendido en las mismas. De esta manera, hemos ejecutado programas con un nivel de dificultad más alto que las actividades en las propias fichas 2 y 3. Además, hemos aprendido un par de nuevos códigos a poner en práctica.

    Cuadrado o rectángulo con bordes redondeados

    Si deseamos darle cierta curvidad a los bordes de un rectángulo, debemos escribir este código:

rect(x,y,ancho,alto,r);

x: posición inicial en el eje X.

y: posición inicial en el eje Y.

ancho: ancho del cuadrado o rectángulo.

alto: alto del cuadrado o rectángulo.

r: radio de curvatura del borde.

    Relleno vacío de una figura 

    Cuando no queremos rellenar una figura, y queremos que se vea el fondo que hay detrás, haciendo que este se vea transparente, utilizaríamos este código:

noFill();

    Figura 1 

    Para realizar esta figura, he tenido que dibujarla línea por línea, puesto que no existe ninguna instrucción que la defina. Resultando, de esta forma, el siguiente programa:

void setup()
{
  size(200,200);
  background(255,255,255);
  line(50,50,90,50);
  line(50,50,50,130);
  line(50,130,130,130);
  line(130,130,130,90);
  line(130,90,90,90);
  line(90,90,90,50);

}

 

 

 

     Figura 2

    Al igual que en el caso anterior, a la hora realizar esta figura, esta se ha tenido que ir definiendo linea por linea, puesto que no existe ninguna instrucción que la defina. Consiguiendo como resultado el siguiente programa:

void setup()
{
  size(200,200);
  background(255,255,255);
  line(70,70,70,100);
  line(70,70,100,70);
  line(100,70,100,100);
  line(100,100,130,100);
  line(130,100,130,130);
  line(130,130,100,130);
  line(100,130,100,160);
  line(100,160,70,160);
  line(70,160,70,130);
  line(70,130,40,130);
  line(40,130,40,100);
  line(40,100,70,100);
 }

 

    Bordes

    En cuanto a la siguiente práctica, en la cual se nos pedía dibujar un rectángulo con sus bordes redondeados, hemos utilizado la función de dicha figura añadiéndole un término que condiciona el radio de curvidad de sus bordes: 

void setup()
{
  size(450,250);
  rect(225,125,100,50,5);
}

 

 

    Cuadrados

    En esta otra actividad, hemos jugado con las proporciones, los colores, las figuras y las distancias. Finalmente hemos conseguido un programa con 4 cuadrados que distancian la misma distancia entres sí que con los bordes de la ventana:

void setup()

{ 

 size(500,500);

 background(128,128,128);

 stroke(255,255,255);

 rect(125,125,125,125);//blanco

 fill(200,200,200);

 stroke(200,200,200);

 rect(275,125,125,125);//gris claro

 fill(110,110,110);

 stroke(110,110,110);

 rect(125,275,125,125);//gris oscuro

 fill(0,0,0);

 stroke(0,0,0);

 rect(275,275,125,125);//negro

}

    Círculos

    De igual manera que en la actividad anterior, en este programa se ha jugado con las dimensiones, los colores, los bordes y las figuras; consiguiendo que los 4 círculos combinen un color de relleno con otro color diferente de su borde y que se choquen entre sí:

void setup ()
{
  size(350,350);
  background(128,128,128);
  stroke(0,0,0);//borde negro
  ellipse(100,100,150,150);//circulo blanco
  fill(200,200,200);
  stroke(110,110,110);//b gris oscuro
  ellipse(250,100,150,150);//circ gris claro
  fill(110,110,110);
  stroke(200,200,200);//b gris claro
  ellipse(100,250,150,150);//circ gris oscuro
  fill(0,0,0);
  stroke(255,255,255);//b blanco
  ellipse(250,250,150,150);//circ negro
} 

 

 

    Aros olímpicos

    Luego, hemos dibujado los aros olímpicos mediante el uso y empleo de los diferentes códigos que determinan los colores, grosores y rellenos de las figuras; así como el planteamiento de la figura para que las dimensiones y medidas planteadas sean proporcionales y lo más estéticas posibles.

void setup()
{
  size(500,300);
  background(255,255,255);
  strokeWeight(10);
  stroke(0,0,255);
  ellipse(85,100,150,150);
  stroke(0,0,0);
  ellipse(250,100,150,150);
  stroke(255,0,0);
  ellipse(415,100,150,150);
  stroke(255,255,0);
  noFill();
  ellipse(160,200,150,150);
  stroke(0,255,0);
  noFill();
  ellipse(325,200,150,150);
}

    Diana

    En esta última práctica, hemos realizado una diana, sacando partido al juego de diferentes colores, dimensiones y radios de los círculos y los colores de los bordes:

void setup()
{
  size(500,500);
  background(255,255,255);
  fill(255,255,0);
  fill(255,255,255);
  ellipse(250,250,350,350);
  ellipse(250,250,315,315);
  fill(0,0,0);
  stroke(255,255,255);
  ellipse(250,250,280,280);
  ellipse(250,250,245,245);
  fill(0,180,255);
  stroke(0,0,0);
  ellipse(250,250,210,210);
  ellipse(250,250,175,175);
  fill(255,0,0);
  ellipse(250,250,140,140);
  ellipse(250,250,105,105);
  fill(255,255,0);
  ellipse(250,250,70,70);
  ellipse(250,250,35,35);
  ellipse(250,250,15,15);
  point(250,250);
}