p5 sketch always below other angular components - html

Question

I've built a p5 sketch in my app.component file but it seems to always be at the bottom of all other components. Right now I'm at a loss on how to fix this so my sketch is always at the top. Any help on how I can control the positioning of my sketch would be greatly appreciated!
<!-- this is the main app.component.html -->
<div class="nav">
<button [routerLink]="['/']"> Landing </button>
<button [routerLink]="['/resume']"> Resume </button>
<button [routerLink]="['/projects']"> Projects </button>
<button [routerLink]="['/pagenotfound']"> pagenotfound </button>
</div>
<div style="text-align:center">
<h1> {{ title }} </h1>
</div>
<router-outlet></router-outlet>
This is the app.component.ts
import {
Component
} from '#angular/core';
import 'p5';
declare
var p5: any;
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = '';
test: any
private p5sketch;
constructor() {}
ngOnInit() {
this.createCanvas();
if (window.innerWidth < 600) {
this.title = 'Welcome to my Portfolio'
}
}
private createCanvas() {
this.p5sketch = new p5(this.sketch);
}
private sketch(p: any) {
// not showing for mobile because it looks horrible and takes up processing
if (window.innerWidth < 600) {
return;
}
var canvasVector = {
'width': 1200,
'height': 200
}
var font;
var vehicles = [];
// preload
p.preload = () => {
font = p.loadFont('../assets/AvenirNextLTPro-Demi.otf');
}
// setup
p.setup = () => {
p.createCanvas(window.innerWidth, canvasVector.height);
p.background(51);
let verticies = font.textToPoints("Welcome to my Portfolio", p.width * .1, p.height / 1.5, 100);
verticies.map((dot) => vehicles.push(new Vehicle(dot.x, dot.y)));
};
function Vehicle(x, y) {
this.pos = p.createVector(p.random(p.width), p.random(p.height));
this.target = p.createVector(x, y);
this.vel =
p5.Vector.random2D();
// p.createVector();
this.acc = p.createVector();
this.maxspeed = 10;
this.maximumforce = 1;
}
Vehicle.prototype.update = function() {
this.pos.add(this.vel);
this.vel.add(this.acc);
this.acc.mult(0);
}
Vehicle.prototype.show = function() {
p.stroke(255);
p.strokeWeight(5);
p.point(this.pos.x, this.pos.y);
}
Vehicle.prototype.behaviors = function() {
var arrive = this.arrive(this.target);
var mouse = p.createVector(p.mouseX, p.mouseY);
var flee = this.flee(mouse).mult(5);
this.applyForce(arrive);
this.applyForce(flee);
}
Vehicle.prototype.applyForce = function(f) {
this.acc.add(f);
}
Vehicle.prototype.flee = function(target) {
var desired = p5.Vector.sub(target, this.pos);
var d = desired.mag();
if (d < 50) {
desired.setMag(this.maxspeed);
desired.mult(-1);
var steer = p5.Vector.sub(desired, this.vel);
steer.limit(this.maximumforce)
return steer;
} else {
return p.createVector(0, 0);
}
}
Vehicle.prototype.arrive = function(target) {
var desired = p5.Vector.sub(target, this.pos);
var d = desired.mag();
var speed = (d < 100) ?
speed = p.map(d, 0, 100, 0, this.maxspeed) :
this.maxspeed;
desired.setMag(speed);
var steer = p5.Vector.sub(desired, this.vel);
steer.limit(this.maximumforce)
return steer;
}
// draw
p.draw = () => {
p.background(51);
for (let i = 0; i < vehicles.length; i++) {
var v = vehicles[i];
v.behaviors();
v.update();
v.show();
}
}
// end draw
}
}

Answer 1

If you're using the default createCanvas() function, then it creates a new canvas and adds it to the bottom of the page.
You can move that canvas using the P5.dom library, specifically the parent() function. From the reference:
// in the html file:
// <div id="myContainer"></div>
// in the js file:
var cnv = createCanvas(100, 100);
cnv.parent('myContainer');
This will move the canvas into the myContainer div element.