Im trying to insert a P5.js sketch inside a bootstrap div
as you can see in the code below, with an empty sketch canvas it works properly,
but with the sketch that I want to add I’m unable to get it into div, centered between header and footer like the empty canvas is located, to reproduce my issue, just comment the empty canvas script (that seems to works properly) and uncomment the original one, I can’t understand what is the difference between them and why I get different results with different canvas.
HTML / P5
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/png" href="img/favicon.png"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script language="javascript" type="text/javascript" src="libraries/p5.min.js"></script>
<script>
function setup() {
var canvas = createCanvas(400, 400, WEBGL);
canvas.parent('sketch-holder');
}
function draw() {
background('#000000');
}
</script>
<!--<script>
class CubeClass {
constructor (x, y, z, ono, col1, col2, col3) {
this.x = x;
this.y = y;
this.z = z;
this.ono = ono;
this.col1 = col1;
this.col2 = col2;
this.col3 = col3;
}
update() {
if(this.ono){
push();
translate(this.x,this.y,this.z);
beginShape();
fill(colors[this.col1]);
vertex(-d, -d, d);
vertex( d, -d, d);
vertex( d, d, d);
vertex(-d, d, d);
endShape();
// Back
beginShape();
fill(colors[this.col2]);
vertex( d, -d, -d);
vertex(-d, -d, -d);
vertex(-d, d, -d);
vertex( d, d, -d);
endShape();
// Bottom
beginShape();
fill(colors[this.col3] );
vertex(-d, d, d);
vertex( d, d, d);
vertex( d, d, -d);
vertex(-d, d, -d);
endShape();
// Top
beginShape();
fill(colors[this.col1] );
vertex(-d, -d, -d);
vertex( d, -d, -d);
vertex( d, -d, d);
vertex(-d, -d, d);
endShape();
// Right
beginShape();
fill(colors[this.col2]);
vertex( d, -d, d);
vertex( d, -d, -d);
vertex( d, d, -d);
vertex( d, d, d);
endShape();
// Left
beginShape();
fill(colors[this.col3]);
vertex(-d, -d, -d);
vertex(-d, -d, d);
vertex(-d, d, d);
vertex(-d, d, -d);
endShape();
pop();
}}}
let data = [];
let cube = [];
let colors = [];
let d;
let c1;
let c2;
let c3;
let rot1;
let rot2;
let iy;
let ix;
let iz;
let count = 0;
function setup(){
d = 12;
rot1 = false;
rot2 = false;
c1 = color('#6e5773');
c2 = color('#d45d79');
c3 = color('#ea9085');
colors = [c1,c2,c3];
iy = 0.6155185;
ix = -(PI/4);
iz = PI/2;
var canvas = createCanvas(400, 400, WEBGL);
canvas.parent('sketch-holder');
genesi();
noStroke();
smooth();
}
function genesi(){
data = [];
cube = [];
for (var x = 0; x < 8; x=x+1){
for (var y = 0; y < 8; y=y+1){
for (var z = 0; z < 8; z=z+1){
let rand;
if (random(0,1) > 0.5){rand = true;}else{rand = false;}
data.push([x*24,y*24,z*24, rand, round(random(0,2)) ,round(random(0,2)) ,round(random(0,2))]);
}}}
for (let i = 0; i < 512; i++) {
cube.push(new CubeClass(data[i][0],data[i][1],data[i][2],data[i][3],data[i][4],data[i][5],data[i][6]));
}
}
function draw(){
background('#343A40');
if(frameCount%75==0 && count < 4){
count++;
if(count<4){
genesi();
}
}
if(count == 4 && rot1 == false){
ix = ix + 0.02;
if(ix/PI >= 0.25){
ix=QUARTER_PI;
count = 0;
rot1 = true;
}
}
if(count == 4 && rot1 == true){
ix = ix - 0.02;
if(ix/PI <= -0.25){
ix=-QUARTER_PI;
count = 0;
rot1 = false;
}
}
ortho(-width/2, width/2, -height/2, height/2); // Same as ortho()
translate(0, 0, height/3);
rotateZ(iz);
rotateY(iy);
rotateX(ix);
translate(-3.5*24, -3.5*24, -3.5*24);
for (var z = 0; z < 512; z=z+1){
cube[z].update();
}
}
</script>-->
<style>
.card-footer {display: none;}
.card-container {
display: flex;
align-items: center;
height: calc(100% - 110px);
justify-content: center;
}
nav, footer{ z-index: 1;}
footer {
position: fixed;
height: 55px;
bottom: 0;
width: 100%;
background-color: #343A40;
vertical-align: middle;
vertical-align: middle;
z-index: 1;
}
#sketch-holder{
all: none;
}
</style>
</head>
<body>
<nav class="navbar navbar-dark bg-dark navbar-expand-lg">
<img src="/img/unknow16.png" height="32" alt="">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"> </span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="login.php">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="register.php">Register</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contacts.php">Contacts</a>
</li>
</ul>
</div>
</nav>
<div class="card-container">
<div id="sketch-holder">
</div></div>
<footer class="footer text-center">
<p> <div class="container ">
<span class="text-muted">
© <script type="text/javascript">
document.write("2018 - "+ new Date().getFullYear());
</script> TRY</span>
</div></p>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>