Setting Up p5.js in Repl
LeonDoesCode (272)

What is p5.js?

p5.js is a JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else!

As quoted from the p5.js website.

How will we be "including" p5.js?

We will be using p5.js's CDN so we don't have to faff around with extra files. We will also be using the minified files as they load faster, making the creation and use much more fluid.

Let's Do this!

All you have to do is include the following tags, and you're all set!

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.sound.min.js"></script>
  </head>

Also make sure to include your javascript file which will be using the p5.js framework in the head or body of the html file. Here is some template code for that script.js file:

function setup(){
  // When website starts
  createCanvas(windowWidth, windowHeight);
}

function draw(){
  // Runs in a loop
  background(50);
}

It's recommended that you create a css file or some style tags to make the borders of the canvas reach all the way to the top left edge, eliminating the scroll as well. You can do this like so:

html, body {
  margin: 0;
  padding: 0;
}

canvas {
  display: block;
}

Conclusion

It's just that easy! If you need help, the you can view the docs, or the p5.js website for more information.

Have fun creating!

P.S
If you have any suggestions for tutorials, leave them in the comments and I'll be sure to have a look. If you like one in the comments, then give it an up vote to show that you want to see it. It makes my life so much more easier. Thanks in advance!

You are viewing a single comment. View All