2

I have seen similar questions posted before but seems the general answer is that it cannot be done.

So, here is my HTML code :

<head>
  …
  <script type="text/javascript" src="js/processing.js"></script>
  …
</head>

<body>
  …
  <canvas id="my_prog" data-processing-sources="project/my_prog.pde project/my_class.pde"/></canvas>
  …
</body>

And in my sketch I use Minim libraries :

import ddf.minim.*; import ddf.minim.spi.*; import ddf.minim.ugens.*;

Instead of having my project on my website, there is a rectangular shape proportional to the project size, but without image and sound.

Moreover, this method doesn't work either… I do not know what to do.

Any suggestions? :)

Thank you,

Thib

Kevin Workman
  • 41,537
  • 9
  • 68
  • 107
Thibaut
  • 97
  • 1
  • 9

1 Answers1

2

Think about it this way:

  • "Core Processing" contains all of the variables and functions you can use in a plain old Processing sketch.
  • You can deploy "core Processing" as a Java application. If you do so, you can also use Java libraries, like minim.
  • You can also deploy "core Processing" as JavaScript using Processing.js. If you do so, you can embed your sketch into a webpage and use JavaScript syntax to access the html components of that surrounding webpage.
  • But you can't mix them: you can't embed a Java application in a webpage (applets are dead), and you can't use Java libraries in a JavaScript webpage.

Minim is a Java library, so you can't use it directly in a JavaScript application. Instead, you have to find a JavaScript library that does something similar. You've posted one method (what do you mean when you say it didn't work?), but googling "processing.js audio" or "minim javascript" returns a bunch of others, including this related question:

Exporting a Processing sketch with audio to JavaScript

Also, you should get acquainted with the JavaScript console. In your web browser, press F12, then go to the console tab, then refresh your page. That will show you any errors you're hitting, that way you have more information than "it's a blank rectangle".

Community
  • 1
  • 1
Kevin Workman
  • 41,537
  • 9
  • 68
  • 107
  • Okay, I understand a little better how it works, thank you Kevin. So I have to find a JavaScript library that does something similar to Minim because it is a Java library. Like for example use a relatively simple shim such as https://github.com/Pomax/Pjs-2D-Game-Engine/blob/master/minim.js and include it as a normal JS script on my page before loading any sketches. That's right ? So why this solution on my problem doesn't work? – Thibaut Aug 04 '15 at 22:40
  • You'll have to be more specific than saying it doesn't work. What errors do you see in your JavaScript console? – Kevin Workman Aug 04 '15 at 22:47