I am really new so my knowledge in general is really poor.
I am trying to add a P5js sketch into a Bootstrap template.
The ideal would be to be able to build a responsive design website, with some image and video galleries with a p5js code on the background.
I have done some tests using an example I found onine but I was not able to do it.
I attach the code here
https://codepen.io/llorencg/pen/LYVMLjZ
Any help will be apreciated !!
Thanks :)
<html>
<head>
<meta charset="utf-8">
<title>p5 walkthrough</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.5/p5.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.css">
</head>
<body>
<nav class="navbar navbar-dark navbar-full bg-inverse" style="">
<a class="navbar-brand" href="#">Bootstrap and P5.js</a>
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">A Link to Nowhere</a>
</li>
</ul>
</nav>
<div class="container">
<div id="jumbo-canvas" class="jumbotron">
<h1>Fun With P5.js</h1>
<p class="lead">P5 is a JavaScript library that can be used to draw things onto an html canvas. The P5 reference guide can be found <a href="https://p5js.org/reference/">here</a>, and legendary videos by Daniel Schiffman can be found <a href="https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw">here.</a></p>
<hr />
<p>By giving this div an id of jumbo-canvas and and placing <code>canvas.parent('jumbo-canvas')</code> in our setup function, we can draw inside this Bootstrap jumbotron.</p>
<p class="lead">
<a class="btn btn-info btn-lg" href="#" role="button">Click this button for some truth</a>
</p>
</div>
</div>
</body>
