20.116 PDA 2018 2 - Reto 1 - Ejercicios - Dibujos PDF

Preview

Summary

Download 20.116 PDA 2018 2 - Reto 1 - Ejercicios - Dibujos PDF

Description

  ENUNCIADOS – EJERCICIOS 20.116 PDA 20182



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 20182



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 y transparencia 0.1 - Mira cómo aplicar la transparencia en la Referencia de la web p5.js -> h  ttps://p5js.org/es/reference/#/p5/fill

2

  ENUNCIADOS – EJERCICIOS 20.116 PDA 20182

 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, y así veamos más fácilmente la transición */ 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()

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

3

  ENUNCIADOS – EJERCICIOS 20.116 PDA 20182



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() { }

Dificultad: Fácil

1.6 Hello Color!

1º – Añade estas lineas antes de dibujar un círculo y observa como cambia su color de relleno. ---> fill('#EE5840'); ---> noStroke();

4

  ENUNCIADOS – EJERCICIOS 20.116 PDA 20182

 2º – Dibuja otro círculo y pon su relleno de color verde. (el 1er círculo déjalo rojo) 3º – Ahora añade estas dos líneas a continuación del fill, para cambiar la línea del contorno. (comenta el noStroke()) ---> strokeWeight(4); //grosor de la línea ---> stroke(0,0,0); //color línea 4º – Modifica el primer círculo para que no tenga relleno, comentando fill(255, 0, 0); y añadiendo noFill();

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

Dificultad: Medio

1.7 fill() & stroke()

Modifica el siguiente código, para que las elipses no tengan relleno, sólo stroke.

5

  ENUNCIADOS – EJERCICIOS 20.116 PDA 20182

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

 Dificultad: Fácil

1.8 Formas Básicas 1

Visita la Referencia de la web de p5.js y copia en tu canvas (setup) todas las Formas Primitivas 2D.

function setup() { createCanvas(640, 480); background(200); } function draw() { }

6

  ENUNCIADOS – EJERCICIOS 20.116 PDA 20182



Dificultad: Fácil

1.9 Formas Básicas 2

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 20182



Dificultad: Medio

1.10 PAC-MAN 1

Dibuja un comecoco (pac-man) persiguiendo tres bolitas. (ver imagen) Pista: Utiliza arc(), ellipse() y ellipseMode(CENTER)

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() { }

8

  ENUNCIADOS – EJERCICIOS 20.116 PDA 20182

 Dificultad: Medio

1.12 Modifica el Robot

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: Fácil

1.13 Orden de dibujo

Ordena las elipses para que se dibujen de más pequeña (arriba - 1a capa) a más grande (abajo - última capa). function setup() { createCanvas(1024, 768); } function draw() {

9

  ENUNCIADOS – EJERCICIOS 20.116 PDA 20182

 background("#231A33"); noStroke(); // Lo ponemos sólo 1 vez, porque afectará a todas las capas que haya debajo (mientras no haya una función stroke()) ellipseMode(CENTER) fill("#103F40"); ellipse(1024/2,768/2,500,500); fill("#F0D28E"); ellipse(1024/2,768/2,100,100); fill("#497360"); ellipse(1024/2,768/2,300,300); fill("#476F5D"); ellipse(1024/2,768/2,400,400); fill("#8AA16D"); ellipse(1024/2,768/2,200,200); fill(255); ellipse(1024/2,768/2,20,20); fill("#033440"); ellipse(1024/2,768/2,600,600); }

10

  ENUNCIADOS – EJERCICIOS 20.116 PDA 20182



Dificultad: Fácil

1.14 Transparencia

Modifica tu ejercicio 2.11 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.15 Coordenadas 2

11

  ENUNCIADOS – EJERCICIOS 20.116 PDA 20182

 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.16 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.

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);

12

  ENUNCIADOS – EJERCICIOS 20.116 PDA 20182

 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.17 Formas personalizadas 2

Continúa la siguiente curva hasta el final del canvas.function  setup() { createCanvas(1024, 768); } 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(); }

13

  ENUNCIADOS – EJERCICIOS 20.116 PDA 20182



Dificultad: Difícil

1.18 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() { }

Dificultad: Difícil

1.19 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 al menos estas 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.

14

  ENUNCIADOS – EJERCICIOS 20.116 PDA 20182



15...