Iframe

p5 iframe shortcodes embed p5.js code within an iframe element. There are two p5 iframe shortcodes: p5-iframe and p5-global-iframe.

p5-iframe #

{{< p5-iframe ver="1.9.3" sound="false" sketch="/path/to/sketch.js" lib1="https://cdntolib1/lib1.js" width="800" height="600" >}}

All parameters are optional but sketch. Default values are shown in the above snippet but for libs*. Up to lib5 libs may be specified.

Color relativity #

Look at this brief explanation about what color relativity is.

p5-iframe markdown
{{< p5-iframe sketch="/showcase/sketches/colors.js" width="725" height="425 >}}

Third party libraries #

Example adapted from p5.EasyCam.

p5-iframe markdown
{{< p5-iframe sketch="/showcase/sketches/quick_easycam.js" lib1="https://cdn.jsdelivr.net/gh/freshfork/p5.EasyCam/p5.easycam.min.js" width="525" height="525" >}}

Sound #

Example took from the p5 examples.

p5-iframe markdown
{{< p5-iframe sound="true" sketch="/showcase/sketches/sound.js" width="225" height="225" >}}

p5-global-iframe #

{{< p5-global-iframe sound="false" id="sketchid" ver="1.9.3" lib1="https://cdntolib1/lib1.js" width="800" height="600" >}}
  // inline sketch code
{{< /p5-global-iframe >}}
Note that the inline sketch should be coded in p5 global mode syntax.

All parameters are optional but id. Default values are shown in the above snippet but for libs*. Up to lib5 libs may be specified.

Breathing square #

Look at this reference for an explanation and further parameterization of the illusion.

p5-global-iframe markdown
{{< p5-global-iframe id="breath" width="625" height="625" >}}
  // Coded as `global mode` of [this](https://github.com/VisualComputing/Cognitive/blob/gh-pages/sketches/rotateSquare.js)
  let angle = 0;
  let speed = 0.06;

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

  function draw() {
    background(255, 255, 255);
    rotateSquare();
    if (!mouseIsPressed) {
      strokeWeight(0);
      stroke(0);
      fill(255, 140, 0);
      rect(0, 0, 281, 281);
      rect(318, 0, 281, 281);
      rect(0, 318, 281, 281);
      rect(318, 318, 281, 281);
    }
  }

  function rotateSquare() {
    push();
    angle += speed;
    strokeWeight(0);
    stroke(0);
    fill(0, 0, 255);
    translate(width / 2, height / 2);
    rotate(angle);
    rect(-187.5, -187.5, 375, 375);
    pop();
  }
{{< /p5-global-iframe >}}

p5-widget #

The p5-widget shortcode embed p5.js code within an p5-widget.

{{< p5-widget autoplay=true height="400" width="400" ver="1.9.3" >}}
  // inline sketch code
{{< /p5-widget >}}

All parameters are optional. Default ver is 1.9.3. For example:

Widget example #

p5-widget markdown
{{< p5-widget autoplay=true height="400" width="400" ver="1.9.3" >}}
function setup() {
  createCanvas(300, 300);
}

function draw() {
  background(255, 0, 255);
}
{{< /p5-widget >}}
May 12, 2024