html_append_p5js_Step-01

by niuuin

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>

<div class="content">
  <div>123</div>
  <div id="p5Element"></div>
  <div>456</div>
</div>

CSS

body {
  padding: 0;
  margin: 0;
}

/* canvas {
  max-width: 100%;
}

.content {
  width: 50%;
  margin: 0 auto;
} */

JavaScript

let cav;
let p5Element = document.querySelector('#p5Element');

function setup() {
  cav = createCanvas(window.innerWidth, window.innerWidth * 0.4);
  cav.parent('p5Element');
}

function draw() {
  background(0);
  fill(255);
  circle(width/2, height/2, 120);
}