Dibujar un paisaje con lógica

Duración:: 00:45
Agrupamiento:: En parejas

Paisaje En esta práctica vas a usar condicionales y bucles para crear un paisaje sencillo mediante programación gráfica. El objetivo no es el dibujo en sí, sino usar la lógica para repetir y decidir qué se dibuja.

🧩 Enunciado

Crea un programa en p5.js que dibuje un paisaje simple (por ejemplo: cielo, suelo, montañas, sol, árboles…).

El dibujo debe cumplir:

Usar al menos un bucle (for o while) para repetir elementos (árboles, nubes, estrellas, montañas, etc.).
Usar al menos una estructura condicional (if) para cambiar algún elemento (color, tamaño, posición…).
Utilizar formas básicas y color.
El resultado debe verse completo dentro del canvas.

🧠 Pistas rápidas

Un bucle te ahorra dibujar lo mismo muchas veces.
Un if te permite variar el resultado y hacerlo menos repetitivo.
Empieza por el fondo y ve añadiendo elementos.

👉 Aquí no dibujas “a mano”: dibujas con reglas. Eso es exactamente programar.

// Cielo
  background(135, 206, 235);

// Sol
  fill(255, 204, 0);
  noStroke();
  circle(420, 60, 60);

// Suelo
  fill(100, 200, 100);
  rect(0, 200, width, 100);

  // Montañas (bucle + condicional)
  for (let x = 0; x < width; x += 100) {
    if (x % 200 == 0) {
      // Montaña impar, montaña baja
      fill(120, 120, 120);
      triangle(x, 200, x + 50, 120, x + 100, 200);
    } else {
      // Montaña par, montaña alta con nieve
      fill(120, 120, 120);
      triangle(x, 200, x + 50, 50, x + 100, 200); // Montaña
      fill(200);
      triangle(x + 35, 100, x + 50, 50, x + 65, 100); // Nieve
    }
  }

// Árboles (bucle + condicional)
  for (let x = 50; x < width; x += 100) {
    // Tronco
    fill(120, 80, 40);
    rect(x, 170, 20, 30);

    // Copa del árbol (cambia color según la posición)
    if (x % 150 === 0) {
      fill(0, 150, 0);
    } else {
      fill(0, 220, 0);
    }
    circle(x + 10, 155, 40);
  }