Integrate P5.js canvas into bootstrap template #4758
Description
Most appropriate sub-area of p5.js?
- Color
- Core/Environment/Rendering
- Data
- Dom
- Events
- Image
- IO
- Math
- Typography
- Utilities
- WebGL
- Other (canvas into div, P5.js vs CSS)
Details about the bug:
P5 version: p5.js v0.10.2 October 14, 2019
Tested on Safari and Chrome with same result.
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.
In the code below there is a bootstrap template to learn hot to integrate p5.js canvas inside it.
<!DOCTYPE html>
<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">
<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>
<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>-->
</body>
</html>