ABCjs

General
1

Hello,
I want to use the ABCjs library in P5js but it doesn’t get recognized…

I’ve uploaded the abcjs-basic-min.js file and mentioned with <script src="abcjs-basic-min.js"></script> in the index.html

In the sketch.js file

var b;

function setup() {
  createCanvas(400, 400);
  b = createGraphics(200,200);
  abcjs();
  
  //a.abcjs().renderAbc(a, "X:1\nK:D\nDDAA|BBA2|\n", { add_classes: true });
}

function draw() {
  background(220);
}

I get: abcjs is not defined (sketch: line 6)

I’m guessing that the abcjs file is not self-contained
Any tips please?

2

Can you link to your sketch in the p5 editor so we can see how your code is structured?

3

Hello Kevin,
Here’s the code
https://editor.p5js.org/patricio1979/sketches/nAaRMKwGL

I wrote to Paul Rosen and he replied this
«interesting but it uses “canvas” for drawing and abcjs uses “svg”. So the question to ask on their forum is whether svg images can be inserted and dynamically manipulated.
It looks like you could create a div with createDiv. You could do that and if you could reference that div you can use that to draw in. I tried to add an id with div.id = “paper” but that didn’t work.
For using the library with the min version use capital letters: ABCJS instead of abcjs.»

4

Right, p5.js does use canvas. You might google “p5.js svg” for some libraries that might add support for rendering to svg, like this one: GitHub - zenozeng/p5.js-svg: SVG runtime for p5.js.

But if I were you, I would first try getting each library working separately. It looks like you’re having trouble loading the ABCjs library, so I’d first try to get that working without p5.js.

From there you can try to integrate the two, but your first step is loading each library separately.

Good luck!