search

processing / p5.js

p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. http://twitter.com/p5xjs —
http://p5js.org/
GNU Lesser General Public License v2.1
21.62k stars 3.31k forks source link

Integrate P5.js canvas into bootstrap template #4758

Closed chanof closed 4 years ago

chanof commented 4 years ago

Most appropriate sub-area of p5.js?

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">
                    &copy; <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>
welcome[bot] commented 4 years ago

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

chanof commented 4 years ago

By using the p5 web editor it was out fixed.