Ayuda:Tu primer sketch en Casiopea

Qué vas a lograr

Publicarás en la wiki un sketch de P5.js que se mueve con el mouse, y luego dos sketches en la misma página. No necesitas saber programar: copiarás el código y cambiarás algunos números. Te toma unos 25 minutos.

Antes de empezar

• Tener una cuenta en Casiopea y haber iniciado sesión.
• Saber abrir una página en modo Editar. Si no, empieza por Dar formato al texto.

Pasos

1. Crea una página de práctica. En el buscador, escribe Usuario:TuNombre/Sketch (con tu nombre de usuario) y crea la página.
   Verás una página vacía en modo edición. Es tuya: puedes probar sin miedo.
2. Escribe tu primer sketch. Copia este código en la página:

{{#widget:P5
|code=
function setup() {
  let lienzo = createCanvas(400, 200);
  lienzo.parent('p5');
}
function draw() {
  background(240);
  circle(mouseX, mouseY, 40);
}
}}

3. Previsualiza.
   Verás un rectángulo gris claro. Pasa el mouse por encima: un círculo te sigue.
4. Cambia el sketch. Reemplaza 40 por 80 y background(240) por background(0, 0, 255). Previsualiza.
   Verás un círculo más grande sobre fondo azul. Guarda la página.
5. Pon dos sketches en la misma página. El widget P5 permite uno solo por página; para varios se usa P5m. Reemplaza todo el contenido por:

{{#widget:P5m
|id=circulos
|code=
p.setup = function() {
  let lienzo = p.createCanvas(300, 150);
  lienzo.parent('circulos');
};
p.draw = function() {
  p.background(240);
  p.circle(p.mouseX, p.mouseY, 30);
};
}}

{{#widget:P5m
|id=cuadrados
|code=
p.setup = function() {
  let lienzo = p.createCanvas(300, 150);
  lienzo.parent('cuadrados');
};
p.draw = function() {
  p.background(30);
  p.square(p.mouseX, p.mouseY, 30);
};
}}

6. Previsualiza y guarda.
   Verás dos sketches: uno con un círculo y otro con un cuadrado, cada uno en su lienzo.

Lo lograste

Tu página Usuario:TuNombre/Sketch muestra dos sketches que responden al mouse. Fíjate en las tres reglas que hicieron funcionar el segundo paso:

• en P5m, cada función de P5.js lleva p. delante (p.circle, p.background);
• cada sketch tiene un id distinto;
• ese mismo id va en lienzo.parent('…').

Dos trampas que conviene conocer

• No uses || en el código. La wiki usa | para separar las partes del widget. En vez de if (x < 0 || x > width), escribe dos if separados.
• No escribas }} juntos. La wiki lo lee como el final del widget. Si dos llaves quedan juntas, pon un espacio o un salto de línea entre ellas.

Sigue con

• Incrustar video, audio, código y 3D: para mostrar sketches que ya tienes en el editor de p5.js (widget P5js) y otros contenidos.

Fuentes

• Widget:P5, Widget:P5m y Widget:P5js. Referencia de P5.js en p5js.org.