{"id":5497,"date":"2020-01-19T13:07:30","date_gmt":"2020-01-19T12:07:30","guid":{"rendered":"http:\/\/blog.via-internet.de\/?p=5497"},"modified":"2023-04-30T17:57:37","modified_gmt":"2023-04-30T15:57:37","slug":"working-with-p5-js","status":"publish","type":"post","link":"https:\/\/via-internet.de\/blog\/2020\/01\/19\/working-with-p5-js\/","title":{"rendered":"Ionic | Working with p5.js"},"content":{"rendered":"\n

Introduction<\/h2>\n\n\n\n

p5.js<\/a> is a JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else.<\/p>\n\n\n\n

In this Post, you will learn how to create an ionic app using p5.js<\/a> to create an amazing demo of the Lissajous Curve (de<\/a>\/en<\/a>).<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

If you want to learn more about this amazing graphs, take a look at some examples at codepen.io.<\/a> Some amazing examples are here<\/a>, here<\/a> and here<\/a>.<\/p>\n\n\n\n

As always, you will find the final project on Github<\/a>.<\/p>\n\n\n\n

Preparation<\/h2>\n\n\n\n

You will need to install Node.Js, Ionic and p5.js.<\/p>\n\n\n\n

First step is, to install Node.Js. I will refer to the installation pages on Node JS.<\/a><\/p>\n\n\n\n

After installing Node.js, you will also have the Node Package manager, npm. We will use this tool to install the other requirements.<\/p>\n\n\n\n

Install Ionic<\/h3>\n\n\n\n
$ npm -g install ionic<\/pre>\n\n\n\n
Create base app structure<\/h3>\n\n\n\n
$ ionic start working-with-p5js blank --type angular\n$ cd working-with-p5js<\/pre>\n\n\n\n
Add p5.js to the ionic app<\/h3>\n\n\n\n
$ npm install --save-dev p5<\/pre>\n\n\n\n
Test your base app<\/h3>\n\n\n\n
$ ionic serve<\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Starting with p5.js<\/h2>\n\n\n\n
Add the base components of p5.js to our app.<\/p>\n\n\n\n
Modify home.page.html<\/h3>\n\n\n\n
<ion-header>\n\t<ion-toolbar>\n\t\t<ion-title>Working with p5.js<\/ion-title>\n\t<\/ion-toolbar>\n<\/ion-header>\n\n<ion-content>\n\t<div id=\"canvasContainer\" class=\"canvas-container\"><\/div>\n<\/ion-content><\/pre>\n\n\n\n
Modify home.page.ts<\/h3>\n\n\n\n
import { Component, OnInit, ElementRef } from '@angular\/core';\n\nimport * as p5 from 'p5';\n\n@Component({\n\tselector: 'app-home',\n\ttemplateUrl: 'home.page.html',\n\tstyleUrls: [ 'home.page.scss' ],\n})\nexport class HomePage implements OnInit {\n\n  curve: any;\n  canvasSizeX = 200;\n  canvasSizeY = 200;\n\n  constructor(private el: ElementRef) { }\n\n  ngOnInit() {\n    const p5obj = new p5(p => {\n      p.setup = () => { this.setup(p); };\n      p.draw = () => { this.draw(p); };\n    }, this.el.nativeElement);\n  }\n\n  setup(p) {\n    const c = document.querySelector('#canvasContainer');\n    p\n      .createCanvas(this.canvasSizeX, this.canvasSizeY)\n      .parent(c);\n  }\n\n  draw(p) {\n    p.background(220);\n  }\n}<\/pre>\n\n\n\n
And the result ist your frist p5.js graphic:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Next, we will grab an example from p5.js: form-regular-polygon<\/a><\/p>\n\n\n\n
Modify home.page.ts<\/h3>\n\n\n\n
We modify the draw function and add a required polygon function.<\/p>\n\n\n\n
import { Component, OnInit, ElementRef } from '@angular\/core';\n\nimport * as p5 from 'p5';\n\n@Component({\n  selector: 'app-home',\n  templateUrl: 'home.page.html',\n  styleUrls: ['home.page.scss'],\n})\nexport class HomePage implements OnInit {\n\n  curve: any;\n  canvasSizeX = 720;\n  canvasSizeY = 400;\n\n  private ID = 'HomePage';\n  log(func, line = '') {\n    console.log(this.ID + '::' + func + '|' + line);\n  }\n\n  constructor(\n    private el: ElementRef\n  ) {\n    this.log('constructor');\n  }\n\n  ngOnInit() {\n    this.log('ngOnInit');\n\n    const p5obj = new p5(p => {\n      p.setup = () => {\n        this.setup(p);\n      };\n\n      p.draw = () => {\n        this.draw(p);\n      };\n    }, this.el.nativeElement);\n  }\n\n  setup(p) {\n    this.log('setup');\n\n    const c = document.querySelector('#canvasContainer');\n    p\n      .createCanvas(this.canvasSizeX, this.canvasSizeY)\n      .parent(c);\n  }\n\n  polygon(p, x, y, radius, npoints, color) {\n    const angle = p.TWO_PI \/ npoints;\n    p.beginShape();\n\n    p.fill(color);\n    for (let a = 0; a < p.TWO_PI; a += angle) {\n      const sx = x + Math.cos(a) * radius;\n      const sy = y + Math.sin(a) * radius;\n      p.vertex(sx, sy);\n    }\n    p.endShape(p.CLOSE);\n  }\n\n  draw_figure(p, scaleX, scaleY, divisor, radius, npoints, color) {\n    p.push();\n    p.translate(this.canvasSizeX * scaleX, this.canvasSizeY * scaleY);\n    p.rotate(p.frameCount \/ divisor);\n    this.polygon(p, 0, 0, radius, npoints, color);\n    p.pop();\n  }\n\n  draw(p) {\n    p.\n      background('white');\n\n    this.draw_figure(p, 0.2, 0.5, 200.0, 82, 3, 'red');\n    this.draw_figure(p, 0.5, 0.5, 50.0, 80, 20, 'blue');\n    this.draw_figure(p, 0.8, 0.5, -100.0, 70, 7, 'green');\n  }\n}\n<\/pre>\n\n\n\n
And we get a nice litte animation:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Additional Resources and Reading<\/h2>\n\n\n\n
Websites<\/h3>\n\n\n\n