hydra_draw_example_002.js

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
licensed with CC BY-NC-SA 4.0 https://creativecommons.org/licenses/by-nc-sa/4.0
Nick Fox-Gieg  /  @n1ckfg  /  fox-gieg.com
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

p = new P5({width: 500, height: 500, mode: 'WEBGL'}) // loads p5js library, comment this line after using it once
p.hide() // hide p5js canvas.


polylines = []
clicked = false

p.stroke(255)
p.strokeWeight(4)
p.noFill()

p.mousePressed = () => {
  clicked = true;
  polylines.push([])
}

p.mouseReleased = () => {
  clicked = false
}

p.keyPressed = () => {
  polylines = []
}

p.draw = () => {
  p.background(0);
  
  if (clicked) {
    polylines[polylines.length-1].push(p.createVector(p.mouseX, p.mouseY));
  }
  
  for (let i=0; i<polylines.length; i++) {
    p.beginShape();
    for (let j=0; j<polylines[i].length; j++) {
      let co = polylines[i][j];
      p.vertex(co.x - p.width/2, co.y - p.height/2);
    }
    p.endShape();
  }
}

s0.init({src: p.canvas})
src(s0).out()
//src(s0).repeat(4, 4).scroll(0.1,-0.3,0.05,0.05).out()