Navigate back to the homepage

Using Parcel, TypeScript with p5.js

Bulkan Evcimen
August 10th, 2020 · 2 min read

Photo created by grid-art.bulkan.dev

This is part one of a two part series and you can read Part two.

p5.js is already great at being able to be used immedietely either with the official editor or loading it in via a <script> tag from a cdn.

For more complex projects I find that using a bundler like Parcel with TypeScript helps with code organisation. Not to mention all the benefits of having types and modern JavaScript features.

So lets start by installing Parcel .

1yarn init -y #This just creates a package.json
2yarn add parcel-bundler

I’ve used yarn here but you can also use npm.

With parcel we will first need to create an index.html file as a entry point when we run it.

1<html>
2<body>
3 <script src="./index.js"></script>
4</body>
5</html>

The above also references an index.js so create one next to the index.html. Parcel uses the <script> tag within the html file to find the entry point into the JavaScript.

1document.body.innerHTML = '<b>test</b>';

Don’t about the contents above we’re going to change it.

To run parcel use the following and then open up the url that parcel will output. If you’re not running parcel it will be http://localhost:1234.

1yarn run parcel index.html

You should see something like the following which means we have parcel working.

Screenshot

Now onto p5js. If you’ve ever used p5 or Processing before you will highly likely be familiar with the global API in which all the functions are available globally or on the window object.

With the following approach we will be using what is called the Instance Mode.

Update your index.js file like so;

1import p5 from 'p5';
2
3let sketch = function(p) {
4 let x = 100;
5 let y = 100;
6
7 p.setup = function() {
8 p.createCanvas(700, 410);
9 };
10
11 p.draw = function() {
12 p.background(0);
13 p.fill(255);
14 p.rect(x, y, 50, 50);
15 };
16};
17
18let myp5 = new p5(sketch);

Once you save this file you should notice the parcel development fetch the required dependencies in this case it should’ve installed p5js and updated package.json.

In addition to the that the page you loaded before should’ve have reloaded and it should look like the following screenshot.

Canvas Screenshot

Lastly to convert this into TypeScript first we need to rename the index.js to index.ts making sure to update the <script> tag in the index.html file.

Afterwards restart the development server. Notice again how parcel installed typescript? There shouldn’t be any visual changes to what is drawn.

Lets create a typed function that redraws the square by dividing it a grid and use noise to update the alpha value of each “cell”.

1import p5 from 'p5';
2
3const sketch = function(p) {
4 const CELL_COUNT = 4;
5
6 const rect = (x: number, y: number, width: number, color: p5.Color) => {
7 const cellWidth = width / CELL_COUNT;
8
9 for (let col=0; col<CELL_COUNT; col++) {
10 for (let row=0; row<CELL_COUNT; row++) {
11 const alpha = p.noise(row, col) * 255;
12 color.setAlpha(alpha);
13 p.fill(color);
14 p.rect(x + cellWidth * row, y + cellWidth * col, cellWidth, cellWidth);
15 }
16 }
17 }
18
19 p.setup = function() {
20 p.createCanvas(700, 410);
21 p.noLoop();
22 p.noStroke();
23 };
24
25 p.draw = function() {
26 p.background(0);
27 const color = p.color('red');
28 rect(100, 100, 240, color);
29 };
30};
31
32const myp5 = new p5(sketch);

Notice the new rect function? It’s a simple way of dividing a square into rows and columns and then drawing a smaller square.

You should see the squares look look like the following now.

Square Screenshot

With this setup you can get fast feedback. For example changing the CELL_COUNT to a bigger number like 50 and updating the canvas size and positioning you can results like this.

Square Screenshot2

That is all for now. You can download a zip file of this here.

You can also read part two here.

More articles from Bulkan

Using Bluebird With Angular Protractor

Photo by Saeed Lajami on Unsplash Async control flow There are few places where you would want to use a promise. Protractor supports…

November 11th, 2014 · 1 min read

Using Express Router instead of express-namespace

Photo by Webaroo on Unsplash express 4.0 has been out for a while and it seems people are still using express-namespace . According to npm…

June 9th, 2014 · 1 min read
© 2007–2020 Bulkan
Link to $https://twitter.com/bulkanevcimenLink to $https://github.com/bulkanLink to $https://instagram.com/bulkan.evcimen