尝试在 Cargo 3 网站中使用 p5.js 草图？

Question

尝试了两种方法在我的 Cargo 3 站点中添加 p5.js 元素，但无论采用哪种设置方式，我似乎都会遇到一系列不同的问题。

• 方式1直接放在html编辑器中 –
• 方式 2 是创建一个 html 文件并将其放置为 iframe。

这是我正在处理的内容：

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<script> let cols; let rows;
let spacing = 30;
let size = [];
let scl = 0.1;

function setup() {
  createCanvas(windowWidth, windowHeight);
  rectMode(CENTER);
  cols = width/spacing;
  rows = height/spacing;
}

function draw() {
  background('#F33A00');
  
  for (let i=0; i<cols; i++){
    size[i] = [];
    for (let j=0; j<rows; j++){
      size[i][j] = (dist(mouseX, mouseY, spacing/2 + i*spacing, spacing/2 + j*spacing))*scl;
    }
  }
  
  for (let i=0; i<cols; i++){
    for (let j=0; j<rows; j++){
      //noStroke();
      fill(255);
    rect(spacing/2 + i*spacing, spacing/2 + j*spacing, size[i][j], size[i][j]);
  }
  }
}
</script>

它工作得很好，直到我发布网站或刷新页面，在这种情况下，我回到它看起来像这样。

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script><!--<script> let cols; let rows;
let spacing = 30;
let size = [];
let scl = 0.1;

function setup() {
  createCanvas(windowWidth, windowHeight);
  rectMode(CENTER);
  cols = width/spacing;
  rows = height/spacing;
}

function draw() {
  background('#F33A00');
  
  for (let i=0; i<cols; i++){
    size[i] = [];
    for (let j=0; j<rows; j++){
      size[i][j] = (dist(mouseX, mouseY, spacing/2 + i*spacing, spacing/2 + j*spacing))*scl;
    }
  }
  
  for (let i=0; i<cols; i++){
    for (let j=0; j<rows; j++){
      //noStroke();
      fill(255);
    rect(spacing/2 + i*spacing, spacing/2 + j*spacing, size[i][j], size[i][j]);
  }
  }
}
</script>-->

或者，我将其保存为 .html 文件并尝试了以下操作：

<iframe class="p5" src="https://files.cargocollective.com/c11111/index.html" style="position:fixed; top:0; left:0; bottom:0; right:0; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;" >
</iframe>

我在 iframe 版本上尝试了很多变体，最好的情况是我的草图是页面中心的 400 像素高的块，边距很大，最坏的情况是什么也没有。

这是怎么回事？或者如果我想让它工作，我是否必须将其托管在非货物的地方？

Answer 1

你解决过这个问题吗？我也遇到类似的问题