Menu
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
788
In other words, you need to create an html file that uses p5. js, which you should already have. Then you need to upload that html file, along with any resources you're using, to some kind of web host. You might also want to check out Processing.
p5. js is a library that starts with the original goal of Processing –to make to make coding accessible for artists, designers, educators, and beginners– and reinterprets it for the web using the metaphor of a software sketchbook with a set of drawing functionality. With p5. js we are able to draw in the canvas.
With p5. js, you can build visualizations using shapes, text, images, videos, and sounds. You can add sophisticated animations and interactions to your programs. And it's easy to get started, even with only a basic knowledge of web programming languages like HTML, CSS, and JavaScript.
Follow these instructions: http://p5js.org/get-started/
Or these instructions: 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.
Then you need to upload that html file, along with any resources you're using, to some kind of web host.
You might also want to check out Processing.js, which comes with the standard Processing editor.
68
creat html file and a sketch.js file
in your html file you can put in a starter template and then add p5js in the sketch.js
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
