Diferencia entre revisiones de «Widget:P5»

De Casiopea
Sin resumen de edición
Sin resumen de edición
(No se muestran 5 ediciones intermedias del mismo usuario)
Línea 8: Línea 8:
     line-height: 150%;
     line-height: 150%;
     font-weight: normal;'>En esta página es para '''usuarios avanzados''' que conocen conceptos de programación en javascript. El mal uso de este Widget puede provocar comportamientos inesperados.
     font-weight: normal;'>En esta página es para '''usuarios avanzados''' que conocen conceptos de programación en javascript. El mal uso de este Widget puede provocar comportamientos inesperados.
Usando este Widget se puede insertar '''un solo sketch por página'''. Para insertar varios, debe hacerlo con el widget que emplea ''iframes''.
</div>
</div>


Línea 20: Línea 22:
}}</nowiki></pre>
}}</nowiki></pre>


El sketch de p5 se incorpora dentro de un '''div''' con el '''id''' indicado. Si no se define el campo '''id''' su valor predeterminado es 'p5'. El sentido de utilizar este widget es para poder embeber objetos canvas que sean responsivos al tamaño. Para lograr esto es necesario definir algo del tipo:
El sketch de p5 se incorpora dentro de un '''div''' con el '''id''' indicado. Si no se define el campo '''id''' su valor predeterminado es 'p5'. El sentido de utilizar este widget es para poder embeber objetos canvas que puedan adaptar su tamaño al elemento contenedor (''responsive''). Para lograr esto es necesario definir algo del tipo:


<pre><nowiki>
<pre><nowiki>
let sketch;
function setup() {
function setup() {
   sketch = createCanvas(document.getElementById("p5").offsetWidth, 350);
   sketch = createCanvas(document.getElementById("p5").offsetWidth, 350);
   sketch.parent('p5');  
   sketch.parent('p5');  
}
// si la ventana se redimensiona
function windowResized() {
  sketch = createCanvas(document.getElementById("p5").offsetWidth, 350);
  sketch.parent('p5');
}
}
</nowiki></pre>.
</nowiki></pre>.
Línea 38: Línea 48:
   sketch = createCanvas(600, 600);
   sketch = createCanvas(600, 600);
   sketch.parent('p5');
   sketch.parent('p5');
 
  let m = 50; // margen
  let nx = 8;  // número de elementos en x
  let ny = 8; // número de elementos en y
  stars = [];  // las muchas estrellas
 
  // calculo los espacios
  let sx = (width - 2 * m) / (nx - 1);
  let sy = (height - 2 * m) / (ny - 1);
  // construyo todas las estrellas de forma azarosa
  for (let y = 0; y < ny; y++) {
    for (let x = 0; x < nx; x++) {
      let posx = m + x * sx;
      let posy = m + y * sy;
      let n = 2 * round(random(3, 8));
      let r1 = random(10, 20);
      let r2 = random(0, 10);
     
      // construyo una estrella "s"
      let s = new Star(posx, posy, n, r1, r2)
     
      // agrego la estrella "s" al arreglo "stars"
      stars.push(s);
    }
  }
  noStroke();
  fill(255);
}
function draw() {
  background(250, 0, 50);
  for (let i = 0; i < stars.length; i++) {
    stars[i].paint();
  }
}
// la clase Star
class Star {
  constructor(xpos, ypos, n, r1, r2) {
    this.x = xpos;
    this.y = ypos;
    this.n = n;
    this.r1 = r1;
    this.r2 = r2;
    this.rot = 0;
    this.speed = random(-0.1, 0.1);
  }
  paint() {
    let s = TWO_PI / this.n; // incremento angular
    let t, r, vx, vy;
    push();
    translate(this.x, this.y);
    rotate(this.rot);
    beginShape();
    for (let i = 0; i < this.n; i++) {
      t = i * s;
      if (i % 2 == 0) {
        r = this.r1;
      } else {
        r = this.r2;
      }
      vx = cos(t) * r;
      vy = sin(t) * r;
      vertex(vx, vy);
    }
    endShape(CLOSE);
    pop();
    this.rot += this.speed;
  }
}
}}
=== Ejemplo ''responsive'' ===
{{#widget:P5
|id = p5b
|code=
let stars;
let sketch;
function setup() {
  sketch = createCanvas(document.getElementById("p5b").offsetWidth, 600);
  sketch.parent('p5b');
    
    
   let m = 50; // margen
   let m = 50; // margen
Línea 208: Línea 130:
<div id="<!--{$id|escape:'html'|default:'p5'}-->"></div>
<div id="<!--{$id|escape:'html'|default:'p5'}-->"></div>
</includeonly>
</includeonly>
<noinclude>
[[Category:Widgets]][[Category:P5js]]
</noinclude>

Revisión del 20:59 23 jun 2020

En esta página es para usuarios avanzados que conocen conceptos de programación en javascript. El mal uso de este Widget puede provocar comportamientos inesperados.

Usando este Widget se puede insertar un solo sketch por página. Para insertar varios, debe hacerlo con el widget que emplea iframes.

Este Widget permite ingresar código de P5js directamente en la página, sin la necesidad de insertar un iframe como lo hace este otro widget de P5js.

Se utiliza del siguiente modo:

{{#widget:P5
|id = opcional
|code = pegar acá el código
}}

El sketch de p5 se incorpora dentro de un div con el id indicado. Si no se define el campo id su valor predeterminado es 'p5'. El sentido de utilizar este widget es para poder embeber objetos canvas que puedan adaptar su tamaño al elemento contenedor (responsive). Para lograr esto es necesario definir algo del tipo:

let sketch;
function setup() {
  sketch = createCanvas(document.getElementById("p5").offsetWidth, 350);
  sketch.parent('p5'); 
}

// si la ventana se redimensiona

function windowResized() {
  sketch = createCanvas(document.getElementById("p5").offsetWidth, 350);
  sketch.parent('p5');
}

.

Ejemplo fijo