javascript 你如何将 p5.js 引入网站？

How do you get p5.js into a website?

提问by ei1

I have searched nearly all over the internet, and i've gotten pretty close to an answer, but I still can't figure out how to use p5.js in a website. To be more specific, i want to be able to perhaps create a weebly, and have it display p5 code. i know it involves the website loading the p5.js through a file or the online file, and the sketch.js. If there is no way to use p5.js on the web, is there any way to use processing code in general(or something similar) on the internet? Thanks

我几乎在整个互联网上进行了搜索，并且已经非常接近答案，但我仍然无法弄清楚如何在网站中使用 p5.js。更具体地说，我希望能够创建一个weebly，并让它显示p5代码。我知道这涉及网站通过文件或在线文件加载 p5.js，以及 Sketch.js。如果没有办法在网络上使用p5.js，有没有办法在互联网上使用一般的处理代码（或类似的东西）？谢谢

采纳答案by Kevin Workman

Follow these instructions: http://p5js.org/get-started/

请按照以下说明操作：http: //p5js.org/get-started/

Or these instructions: https://github.com/processing/p5.js/wiki/Embedding-p5.js

或这些说明：https: //github.com/processing/p5.js/wiki/Embedding-p5.js

In other words, you need to create an html file that uses p5.js, which you should already have.

换句话说，您需要创建一个使用 p5.js 的 html 文件，您应该已经拥有该文件。

Then you need to upload that html file, along with any resources you're using, to some kind of web host.

然后，您需要将该 html 文件以及您正在使用的任何资源上传到某种 Web 主机。

You might also want to check out Processing.js, which comes with the standard Processing editor.

你可能也想看看Processing.js，其自带的标准处理编辑器。

回答by dd263

If you are creating your sketch using the editor for Mac or Windows (Version 0.5.7 (0.5.7) as of this writing), go to "Save As" and the editor will export your "web ready" files.

如果您使用适用于 Mac 或 Windows 的编辑器（撰写本文时为 0.5.7 (0.5.7) 版）创建草图，请转到“另存为”，编辑器将导出您的“网络就绪”文件。

Your saved file will have the same name as your sketch and will include an index.html and sketch.js file along with a "libraries" folder. You can post the .html and .js files as-is and inspect the .html for links to the p5 .js libraries.

您保存的文件将与您的草图同名，并将包含一个 index.html 和 Sketch.js 文件以及一个“库”文件夹。您可以按原样发布 .html 和 .js 文件，并检查 .html 中是否有指向 p5 .js 库的链接。

<script src="libraries/p5.js" type="text/javascript"></script>
<script src="libraries/p5.dom.js" type="text/javascript"></script>
<script src="libraries/p5.sound.js" type="text/javascript"></script>
<script src="sketch.js" type="text/javascript"></script>

回答by David Odhiambo

creat html file and a sketch.js file

创建 html 文件和一个 Sketch.js 文件

in your html file you can put in a starter template and then add p5js in the sketch.js

在您的 html 文件中，您可以放入一个入门模板，然后在 Sketch.js 中添加 p5js

check the docs here

检查这里的文档

// All the paths
var paths = [];
// Are we painting?
var painting = false;
// How long until the next circle
var next = 0;
// Where are we now and where were we?
var current;
var previous;

function setup() {
  createCanvas(720, 400);
  current = createVector(0,0);
  previous = createVector(0,0);
};

function draw() {
  background(200);
  
  // If it's time for a new point
  if (millis() > next && painting) {

    // Grab mouse position      
    current.x = mouseX;
    current.y = mouseY;

    // New particle's force is based on mouse movement
    var force = p5.Vector.sub(current, previous);
    force.mult(0.05);

    // Add new particle
    paths[paths.length - 1].add(current, force);
    
    // Schedule next circle
    next = millis() + random(100);

    // Store mouse values
    previous.x = current.x;
    previous.y = current.y;
  }

  // Draw all paths
  for( var i = 0; i < paths.length; i++) {
    paths[i].update();
    paths[i].display();
  }
}

// Start it up
function mousePressed() {
  next = 0;
  painting = true;
  previous.x = mouseX;
  previous.y = mouseY;
  paths.push(new Path());
}

// Stop
function mouseReleased() {
  painting = false;
}

// A Path is a list of particles
function Path() {
  this.particles = [];
  this.hue = random(100);
}

Path.prototype.add = function(position, force) {
  // Add a new particle with a position, force, and hue
  this.particles.push(new Particle(position, force, this.hue));
}

// Display plath
Path.prototype.update = function() {  
  for (var i = 0; i < this.particles.length; i++) {
    this.particles[i].update();
  }
}  

// Display plath
Path.prototype.display = function() {
  
  // Loop through backwards
  for (var i = this.particles.length - 1; i >= 0; i--) {
    // If we shold remove it
    if (this.particles[i].lifespan <= 0) {
      this.particles.splice(i, 1);
    // Otherwise, display it
    } else {
      this.particles[i].display(this.particles[i+1]);
    }
  }

}  

// Particles along the path
function Particle(position, force, hue) {
  this.position = createVector(position.x, position.y);
  this.velocity = createVector(force.x, force.y);
  this.drag = 0.95;
  this.lifespan = 255;
}

Particle.prototype.update = function() {
  // Move it
  this.position.add(this.velocity);
  // Slow it down
  this.velocity.mult(this.drag);
  // Fade it out
  this.lifespan--;
}

// Draw particle and connect it with a line
// Draw a line to another
Particle.prototype.display = function(other) {
  stroke(0, this.lifespan);
  fill(0, this.lifespan/2);    
  ellipse(this.position.x,this.position.y, 8, 8);    
  // If we need to draw a line
  if (other) {
    line(this.position.x, this.position.y, other.position.x, other.position.y);
  }
}

<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js"></script>
    <script src="sketch.js"></script>
  </head>
  <body>
  </body>
</html>

回答by ttquang1063750

You can use it just like:

你可以像这样使用它：

<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js"></script>
    <script>
      function setup() {
        createCanvas(400, 400)
      }
      
      function draw() {
        background(220);
      }
    </script>
  </head>
  <body>
  </body>
</html>

But, if you work on webpackthen I think this link can help you know how to use it Learning the P5 Drawing Library With ES6 and Webpack

但是，如果你在webpack 上工作，那么我认为这个链接可以帮助你知道如何使用它使用 ES6 和 Webpack 学习 P5 绘图库

The problem in webpackis that we cannot be using setup(), draw()as the global scope as you can see as the following snippet.

问题webpack在于我们不能使用setup(),draw()作为全局范围，正如您在以下代码段中看到的那样。

// $npm i p5 --save(save to package.json)
import * as p5 from 'p5';

let s = (sk) => {
    sk.setup = () => {
        sk.createCanvas(400, 400);
    };

    sk.draw = () => {
        sk.background(220);
    }
};

const P5 = new p5(s);