Navigate back to the homepage

Using Vuejs with Parcel and p5.js

Bulkan Evcimen
August 23rd, 2020 · 1 min read

Photo created by grid-art.bulkan.dev

This is part two of a two part series. In part one I showed you how you can setup a project using parcel & TypeScript to create p5.js works. I recommend that you read part one first, especially if you’re following along.

Now we’re going to integrate p5.js within a Vue component. Using a framework like Vue will help you create more complex works with p5.js. You can handle application state in vue.js and do routing. I’ve used this in creating a site with multiple p5.js works in which the random seed & the selected palette id is updated in the URL so you can permalink to it.

First we start off with the same two files as before index.html and a index.ts but we need to make some changes. First add a new div to the index.html;

1<html>
2<body>
3 <div id=“app”></div>
4 <script src="./index.ts"></script>
5</body>
6</html>

Then rename index.ts to art.ts and update it like so;

1import p5 from "p5";
2
3const sketch = function(p: p5) {
4 const CELL_COUNT = 20;
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(420, 420);
21 p.noLoop();
22 p.noStroke();
23 };
24
25 p.draw = function() {
26 p.background(0);
27 const color = p.color('red');
28 rect(0, 0, 420, color);
29 };
30};
31
32export const makeArt = (node: HTMLElement) => {
33 new p5(sketch, node);
34}

We’re exporting a new function makeArt that receives a DOM node (HTMLElement) which we pass to p5 along with the sketch function when instantiating. We will call makeArt in the Vue layer.

We have to recreate the index.ts.

1import Vue from 'vue';
2
3new Vue({
4 render: createElement => createElement('h1', 'hello world')
5}).$mount('#app');

You might need to restart the parcel development server via yarn run parcel index.html and you should notice that it will install Vue.

If you navigate to the URL that parcel prints out which is usually http://localhost:1234 you will see the page with the text hello world. Nothing fancy but it means things are working.

Now letscreate a component to help us wrap the p5.js code. Create a file named Art.vue next to index.ts;

1<template>
2 <div ref=“canvasOutlet”></div>
3</template>
4
5<script>
6import Vue from "vue";
7import { makeArt } from "./art.ts";
8
9export default Vue.extend({
10 mounted() {
11 setTimeout(() => makeArt(this.$refs.canvasOutlet));
12 }
13});
14</script>

This is creating a Vue component that just renders a div to be used as the DOM node to render the canvas into. We pass a reference to this all the way down to the p5 instantiation. This is done in the mounted lifecycle to make sure the DOM is completely rendered.

We’re not using this component just yet, so lets update index.ts and register the component. The updated file should look like this;

1import Vue from 'vue';
2import Art from './Art.vue';
3
4new Vue({
5 render: createElement => createElement(Art)
6}).$mount('#app');

Finally should see the following;

Square Screenshot2

Thats all for this post. Hope this inspires you to experiment.

Thank you for reading.

More articles from Bulkan

Broccoli and Angular.js

Photo by Charles Deluvio on Unsplash Warning This post was initially written on 2014-05-28 and not published. Things might have changed…

February 16th, 2016 · 1 min read

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
© 2007–2020 Bulkan
Link to $https://twitter.com/bulkanevcimenLink to $https://github.com/bulkanLink to $https://instagram.com/bulkan.evcimen