How do you get p5.js into a website?

Question

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

Answer 1

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.

Answer 2

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.

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.

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

Answer 3

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> 

Answer 4

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 webpack then I think this link can help you know how to use it Learning the P5 Drawing Library With ES6 and Webpack

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

 // $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);