ENUNCIADOS – ​EJERCICIOS 20.116 PDA 20191
 

Programación para el Diseño y las Artes 

Ejercicios 

Reto 1 – Dibujos 

Dificultad: Fácil
1.1 Hello canvas

El canvas es nuestro lienzo en blanco y puede ocupar el tamaño que queramos dentro de una página html.
¡Vamos a probar!

Modifica el siguiente código para que el canvas tenga un tamaño de 1024 x 500 y cambia el color de fondo a
#A6D8DF.

function setup() {
createCanvas(500, 500); //Ancho y el alto del canvas.
background(120); //Color de fondo del canvas

/* Podemos escribir el color de las siguientes formas:

En escala de grises ---> background(0)
En RGB ---> background(0,0,0)
En hexadecimal ---> background('#000000')
*/

function draw() {
}

1
  
 
ENUNCIADOS – ​EJERCICIOS 20.116 PDA 20191
 

Dificultad: Fácil
1.2 Hello World – setup() vs. draw() – Consola

Vamos a escribir en la consola del editor on-line la frase "Hello World". (Hay una pestaña justo debajo de donde
escribes el código, que se llama “Console”, asegúrate de que está abierta)

Pista: Para ello utiliza la función de p5.js: console.log("frase que queremos mostrar en la Consola");

¿Qué diferencia hay si la escribes dentro de la función draw o setup? ¿porqué?

Dificultad: Fácil
1.3 Hello World – setup() vs. draw() – Dibujo

En este ejercicio vamos a dibujar una esfera con relleno de color negro y transparencia 0.1 (o 10%).
1º) Dibújala en la función setup(). ¿Cuántas veces crees que se dibuja la esfera? ¿por qué?

2
  
 
ENUNCIADOS – ​EJERCICIOS 20.116 PDA 20191
 

2º) Borra la esfera de la función setup() y dibújala en el draw(). ¿Cuántas veces crees que se dibuja la esfera?
¿por qué?¿Y si quitas el background del setup() y lo pones en la función draw(), antes de dibujar la esfera, qué
crees que pasa?
3º) Cambia el color de la esfera a los valores RGB (244,172,69);
4º) Comenta la línea del color RGB, y ahora aplícale a la esfera el color hexadecimal #38E4AE.

Mira cómo aplicar la transparencia en modo RGBA en la Referencia de la web p5.js ->
https://p5js.org/es/reference/#/p5/fill

function setup() {
// Creamos el canvas
createCanvas(400, 400);
background(255);
/* Color de fondo del canvas, lo ponemos aquí en el setup()
para que sólo se dibuje 1 vez
*/

/* Manipulamos la velocidad de lectura del programa para que la función

draw() se repita más lentamente */
frameRate(2);

function draw() {
}

Dificultad: Fácil
1.4 Coordenadas 1

Dibuja una línea que vaya de la coordenada x=10 y=10 a x=630 y=470
Busca en el apartado Referencia de la web de p5.js, la funcion ​line()

3
  
 
ENUNCIADOS – ​EJERCICIOS 20.116 PDA 20191
 

function setup() {
createCanvas(640, 480);
background('#f94891');
}

function draw() {
}

Dificultad: Fácil
1.5 Hello Ellipse

Empecemos a dibujar!

1º – Dibuja un círculo escribiendo esta línea dentro de la función setup() ---> ellipse(100, 200, 50, 50);
//ellipse(x,y,width,height)

2º – Duplica el círculo 100px más a la derecha y la mitad de pequeño.

function setup() {
createCanvas(500, 500);
background(200);
}

function draw() {

4
  
 
ENUNCIADOS – ​EJERCICIOS 20.116 PDA 20191
 

Dificultad: Fácil
1.6 Hello Color!

Situación inicial Resultado final

1º – Dibuja 2 círculos cómo los de la imagen. A cada uno le tendrás que aplicar el color de relleno por separado,
justo antes de dibujar cada esfera. El contorno (stroke) como es mismo para los 2, lo puedes poner sólo 1 vez
antes del color de relleno rojo (ya que al no aplicar otro color de stroke, las esferas cogerán el último aplicado)

Modifica el fill del círculo rojo y quita el stroke de las 2 esferas.

---> fill('#EE5840');
---> noStroke();

2º – Ahora borra el noStroke() y añade estas líneas a continuación del stroke, para cambiar la líneas de los
contornos.

---> strokeWeight(4); //grosor de la línea

---> stroke(0,0,0); //color línea negro

3º – Modifica sólo el primer círculo para que no tenga relleno.

function setup() {
createCanvas(500, 500);
background('#A6D8DF');
}

function draw() {

5
  
 
ENUNCIADOS – ​EJERCICIOS 20.116 PDA 20191
 

Dificultad: Medio
1.7 fill() & stroke()

Modifica el siguiente código, para que las elipses no tengan relleno, sólo stroke.
 
function setup() {
createCanvas(800, 800);
}

function draw() {
if (mouseIsPressed) {
fill(255, 63, 145);
} else {
fill(0);
}
ellipse(mouseX, mouseY, 80, 80);
}

6
  
 
ENUNCIADOS – ​EJERCICIOS 20.116 PDA 20191
 

Dificultad: Fácil
1.8 Formas Básicas I

Modifica el siguiente código para que la cara esté sonriente.

function setup() {
createCanvas(500, 500);
}

function draw() {
background("#EE5B5B");

// Cara
strokeWeight(8);
stroke("#57C4B9");
fill(255);
ellipse(250,250,250,250);

// Ojos
fill("#57C4B9");
ellipse(200,220,20,20);
ellipse(295,220,20,20);

// Boca triste
noFill();
strokeWeight(8);
stroke("#57C4B9");
arc(245, 310, 100, 80, PI, PI);
}

7
  
 
ENUNCIADOS – ​EJERCICIOS 20.116 PDA 20191
 

Dificultad: Fácil
1.9 Formas Básicas 2

Dibuja las siguientes formas primitivas repartidas por el canvas. Cambia los colores de relleno y el grosor del
stroke de cada figura. No hace falta que tus gráficos sean exactamente igual que en la imagen de referencia.

arc(), ellipse(), line(), point()

quad(), rect(), triangle()

Dificultad: Medio
1.10 PAC-MAN 1

Dibuja un comecoco (pac-man) persiguiendo tres bolitas. (ver imagen)

Pista: Utiliza arc(), ellipse() y ellipseMode(CENTER)

8
  
 
ENUNCIADOS – ​EJERCICIOS 20.116 PDA 20191
 

function setup() {
createCanvas(1024, 768);
background(0);
}

function draw() {

Dificultad: Medio
1.11 SPACE INVADERS 1

Dibuja estos 3 aliens del juego Space Invaders en la función setup().

function setup() {
createCanvas(1024, 768);
background(0);
}

function draw() {

Dificultad: Medio
1.12 Modifica el Robot

9
  
 
ENUNCIADOS – ​EJERCICIOS 20.116 PDA 20191
 

Modifica las formas y color del robot (que tenéis el código del libro de la asignatura “Make: Getting Started with
p5.js” páginas 38 y 39) para convertirlo en otro objeto, animal, persona...

Dificultad: Medio
1.13 Space Ships I - Dibujo

Dibuja una nave del juego de arcade Galaga a tu elección. Sólo necesitarás usar rectángulos.
PISTA: Hacer un esbozo en un papel reticulado, para ubicar los rectángulos en el eje x e y de coordenadas.

Dificultad: Fácil
1.14 Orden de dibujo

Dibuja las siguientes elipses para que se dibujen de más pequeña (arriba - 1a capa)
a más grande (abajo - última capa).
PISTA: Recuerda que el orden de las capas, en p5.js es inversa al de las capas de Adobe Photoshop.
NOTA: No hace falta que utilices los mismos colores que en la foto.

function setup() {
createCanvas(1024, 768);
}

function draw() {
background("#231A33");

10
  
 
ENUNCIADOS – ​EJERCICIOS 20.116 PDA 20191
 

noStroke(); // Lo ponemos sólo 1 vez, porque afectará a todas las formas que
haya debajo (mientras no haya otra función stroke())
ellipseMode(CENTER)

fill("#103F40");
ellipse(1024/2,768/2,500,500);

/... completa .../

}

Dificultad: Fácil
1.15 Transparencia

Modifica tu ejercicio 1.14 para que todas las elipses tengan el mismo color de relleno y su transparencia sea
menor si la elipse está arriba (elipse pequeña) y más transparencia si la elipse está abajo (elipse grande)

Pista: Mira en la referencia de p5.js los valores que puedes poner en la función fill() para usar transparencia con
valores RGBA.

function setup() {
createCanvas(1024, 768);
}

function draw() {
background("#231A33");
}

Dificultad: Medio
1.16 Coordenadas 2

11
  
 
ENUNCIADOS – ​EJERCICIOS 20.116 PDA 20191
 

Dibuja el logotipo diseñado por Oskar Schlemmer en 1922 para la Bauhaus. (ver foto)

Utiliza sólo las formas ellipse, rect y line. Para poner los cantos cuadrados de la línea mira cómo utilizar
la propiedad strokeCap(...) en la referencia de p5.js.

function setup() {
createCanvas(500, 500);
background(0);
// Código
}

function draw() {

Dificultad: Medio
1.17 Formas personalizadas 1

Modifica la siguiente estrella para que tenga 5 puntas.

Consejo: Dibuja las coordenadas actuales (con todos sus valores) en un papel cuadriculado.

12
  
 
ENUNCIADOS – ​EJERCICIOS 20.116 PDA 20191
 

function setup() {
createCanvas(1024, 768);
}

function draw() {
background(255);

noFill();
stroke(40);
strokeCap(ROUND); //Redondea el final de un vértice
strokeJoin(ROUND); //Redondea la unión de 2 vértices
strokeWeight(30);

beginShape(); //Empezamos a dibujar uniéndo puntos (vértices)

vertex(500, 30); // V1 - arriba
vertex(600, 230);
vertex(800, 330);// V2 - derecha
vertex(600, 430);
vertex(500, 630);// V3 - abajo
vertex(400, 430);
vertex(200, 330);// V4 - izquerda
vertex(400, 230);
endShape(CLOSE); // Terminamos de dibujar y indicamos CLOSE para que el
1er vértice y el último queden unidos
}

Dificultad: Medio
1.18 Formas personalizadas 2

Continúa la siguiente curva hasta el final del canvas.

function setup() {
createCanvas(1024, 768);
}

13
  
 
ENUNCIADOS – ​EJERCICIOS 20.116 PDA 20191
 

function draw() {
background(255);

noFill();
stroke(40);
strokeCap(ROUND);
strokeJoin(ROUND);
strokeWeight(15);

beginShape();
vertex(10, 400); // vértice de inicio
bezierVertex(10,400,60,330,110,400); // bezierVertex(v-inicio x, v-inicio
y, v-curva x, v-curva y, v-final x, v-final y)
bezierVertex(110,400,160,470,210,400);
// ...
endShape();
}

Dificultad: Difícil
1.19 PAC-MAN 2

Copia tu código de la actividad 1.9 PAC-MAN 1 y añade el dibujo de un fantasma. (foto)

function setup() {
createCanvas(1024, 768);
background(0);
// Código
}

function draw() {

14
  
 
ENUNCIADOS – ​EJERCICIOS 20.116 PDA 20191
 

Dificultad: Difícil
1.20 DIBUJA TU NOMBRE
Trabajar con formas básicas es un ejercicio muy interesante que nos permite construir un diseño proporcionado
y limpio. Así pues, podemos encontrar alfabetos e incluso tipografías elaborados con formas básicas:

● http://4.bp.blogspot.com/--KV64mUMOn4/TaWanp3P-OI/AAAAAAAAAPY/9HNReuAuX3E/s1600/007.jp
g
● http://2.bp.blogspot.com/-R4lXjvAyBZU/TZXqlYx-ldI/AAAAAAAAAOo/_nYb1ysq5as/s1600/1240003866.
png
● https://biancamanihera.wordpress.com/2012/02/01/geometric-alphabet/
● https://www.vecteezy.com/vector-art/107096-geometric-bauhaus-style-vector-type

Utilizando algunas de las formas básicas de p5.js ellipse, triangle, line, arc y rect, dibuja las 5 primeras letras de
tu nombre y si tu nombre es más corto añade la/s primera/s letras de tu apellido. Las formas tendrán que tener
diferentes colores, transparencias y strokes.

15