Question

我正在尝试在html / css flexbox中实现此p5.js代码，但无法正常工作。我知道它需要p。在许多代码行之前，但我不确定在哪里。我过去曾经这样做过，并且一直奏效，但规模不大。有人可以帮忙吗？

    var phase, speed, maxCircleSize, numRows, numCols, numStrands, colorA, colorB;
var sketch4 = function (p) {
  p.setup = function() {
    p.createCanvas(500, 500);
    p.noStroke();

    phase = 0;
    speed = 0.03;
    maxCircleSize = 20;
    numRows = 10;
    numCols = 16;
    numStrands = 2;

    colorA = p.color(253, 174, 120);
    colorB = p.color(226, 129, 161);
  }

 draw = function() {
    p.background(4, 58, 74);
    phase = frameCount * speed;

    for (var strand = 0; strand < numStrands; strand += 1) {
      var strandPhase = phase + map(strand, 0, numStrands, 0, TWO_PI);

      for (var col = 0; col < numCols; col += 1) {
        var colOffset = map(col, 0, numCols, 0, TWO_PI);
        var x = map(col, 0, numCols, 50, width - 50);

        for (var row = 0; row < numRows; row += 1) {
          var y = height / 2 + row * 10 + sin(strandPhase + colOffset) * 50;
          var sizeOffset =
            (cos(strandPhase - row / numRows + colOffset) + 1) * 0.5;
          var circleSize = sizeOffset * maxCircleSize;

          p.fill(p.lerpColor(colorA, colorB, row / numRows));
          p.ellipse(x, y, circleSize, circleSize);
        }
      }
    }
  }
};

let node4 = document.createElement('div');
                    window.document.getElementById('p5-3').appendChild(node4);
                    new p5(sketch4, node4);

以下是一个很好用的示例：

            var sketch3 = function(p) {
              p.setup = function() {
                p.createCanvas(100, 100, p.WEBGL);
              };
              
              p.draw = function() {
                p.background("#A9927D");
                p.rotateZ(p.frameCount * 0.01);
                p.rotateX(p.frameCount * 0.01);
                p.rotateY(p.frameCount * 0.01);
                p.normalMaterial()
                p.cone(25, 25);
              };
    
            };
            let node3 = document.createElement('div');
            window.document.getElementById('p5-3').appendChild(node3);
            new p5(sketch3, node3);

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>
<div id="p5-3"></div>

Answer 1

缺少很多小东西，但主要是p.。

    var phase, speed, maxCircleSize, numRows, numCols, numStrands, colorA, colorB;

    var sketch4 = function (p) {
      p.setup = function() {
        p.createCanvas(500, 500);
        p.noStroke();
    
        phase = 0;
        speed = 0.03;
        maxCircleSize = 20;
        numRows = 10;
        numCols = 16;
        numStrands = 2;
    
        colorA = p.color(253, 174, 120);
        colorB = p.color(226, 129, 161);
      };
    
     p.draw = function() { // [HERE]
        p.background(4, 58, 74);
        phase = p.frameCount * speed; // [HERE]
    
        for (var strand = 0; strand < numStrands; strand += 1) {
          var strandPhase = phase + p.map(strand, 0, numStrands, 0, p.TWO_PI); // [HERE]
    
          for (var col = 0; col < numCols; col += 1) {
            var colOffset = p.map(col, 0, numCols, 0, p.TWO_PI); // [HERE]
            var x = p.map(col, 0, numCols, 50, p.width - 50); // [HERE]
    
            for (var row = 0; row < numRows; row += 1) {
              var y = p.height / 4 + row * 10 + p.sin(strandPhase + colOffset) * 50; // [HERE]
              var sizeOffset =
                (p.cos(strandPhase - row / numRows + colOffset) + 1) * 0.5; // [HERE]
              var circleSize = sizeOffset * maxCircleSize;
    
              p.fill(p.lerpColor(colorA, colorB, row / numRows));
              p.ellipse(x, y, circleSize, circleSize);
            }
          }
        }
      };
    };
    
    let node4 = document.createElement('div');
    window.document.getElementById('p5-3').appendChild(node4);
    new p5(sketch4, node4);

body {
  background-color:#e9e9e9;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>

<div id="p5-3"></div>

或者使用with语句减少Psss。

    var phase, speed, maxCircleSize, numRows, numCols, numStrands, colorA, colorB;

    var sketch4 = function (p) {
      with(p) { // [HERE]

      p.setup = function() {
        createCanvas(500, 500);
        noStroke();
    
        phase = 0;
        speed = 0.03;
        maxCircleSize = 20;
        numRows = 10;
        numCols = 16;
        numStrands = 2;
    
        colorA = p.color(253, 174, 120);
        colorB = p.color(226, 129, 161);
      };
    
     p.draw = function() {
        background(4, 58, 74);
        phase = frameCount * speed;
    
        for (var strand = 0; strand < numStrands; strand += 1) {
          var strandPhase = phase + map(strand, 0, numStrands, 0, TWO_PI);
    
          for (var col = 0; col < numCols; col += 1) {
            var colOffset = map(col, 0, numCols, 0, TWO_PI);
            var x = map(col, 0, numCols, 50, width - 50);
    
            for (var row = 0; row < numRows; row += 1) {
              var y = height / 4 + row * 10 + sin(strandPhase + colOffset) * 50;
              var sizeOffset =
                (cos(strandPhase - row / numRows + colOffset) + 1) * 0.5; 
              var circleSize = sizeOffset * maxCircleSize;
    
              fill(lerpColor(colorA, colorB, row / numRows));
              ellipse(x, y, circleSize, circleSize);
            }
          }
        }
      };
      }
    };
    
    let node4 = document.createElement('div');
    window.document.getElementById('p5-3').appendChild(node4);
    new p5(sketch4, node4);

body {
  background-color:#e9e9e9;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>

<div id="p5-3"></div>

html中的p5.js无法正常工作（使用实例化）

1 个答案: