你如何将p5.js带入网站?

javascript html web processing p5.js

13042 观看

4回复

我已经搜索了几乎所有的互联网,我已经非常接近答案,但我仍然无法弄清楚如何在网站中使用p5.js。更具体地说,我希望能够创建一个weebly,并让它显示p5代码。我知道它涉及网站通过文件或在线文件和sketch.js加载p5.js。如果没有办法在网上使用p5.js,有没有办法在互联网上使用一般(或类似的)处理代码?谢谢

作者: ei1 的来源 发布者: 2019 年 7 月 15 日

回应 (4)


2

决定

请遵循以下说明:http//p5js.org/get-started/

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

基本上,您需要创建一个使用p5.js的html文件,您应该已经拥有该文件。

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

您可能还想查看Processing.js,它随标准的Processing编辑器一起提供。

作者: Kevin Workman 发布者: 12.03.2015 01:35

1

如果您使用Mac或Windows编辑器(本文撰写的0.5.7版(0.5.7))创建草图,请转到“另存为”,编辑器将导出“Web就绪”文件。

您保存的文件将与草图具有相同的名称,并包含index.html和sketch.js文件以及“libraries”文件夹。您可以按原样发布.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>
作者: dd263 发布者: 21.01.2016 09:15

1

创建html文件和sketch.js文件

在你的html文件中,你可以放入一个入门模板,然后在sketch.js中添加p5js

检查这里的文档

// 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>

作者: David Odhiambo 发布者: 29.03.2018 02:10

-1

您可以像下面这样使用它:

<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>

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

问题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);

作者: ttquang1063750 发布者: 07.05.2019 04:02
32x32