我几乎在互联网上搜索过,而且我已经非常接近答案,但我仍然无法弄清楚如何在网站中使用p5.js。更具体地说,我希望能够创建一个weebly,并让它显示p5代码。我知道它涉及网站通过文件或在线文件和sketch.js加载p5.js。如果没有办法在网上使用p5.js,有没有办法在互联网上使用一般(或类似的)处理代码?感谢
答案 0 :(得分:2)
请按照以下说明操作:http://p5js.org/get-started/
或这些说明:https://github.com/processing/p5.js/wiki/Embedding-p5.js
基本上,你需要创建一个使用p5.js的html文件,你应该已经拥有它。
然后您只需要将该html文件以及您正在使用的任何资源上传到某种类型的网络主机。
您可能还想查看标准处理编辑器附带的Processing.js。
答案 1 :(得分: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>
答案 2 :(得分:1)
创建html文件和sketch.js文件
在您的html文件中,您可以放入初学者模板,然后在sketch.js中添加p5js
检查文档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);
}
}
&#13;
<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>
&#13;
答案 3 :(得分:-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,那么我认为此链接可以帮助您了解如何使用它Learning the P5 Drawing Library With ES6 and Webpack
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);