将使用麦克风输入的处理草图导出到网页

Question

我正在尝试让我的处理草图与 processing.js 一起在线工作。当我只使用一个非常简单的处理草图时它工作正常，但是当我尝试将我的实际代码上传到服务器时它不起作用

我知道我的代码很乱，但我现在没有时间清理我只想让它显示在浏览器中

这是我的代码：

`

/* OpenProcessing Tweak of *@*http://www.openprocessing.org/sketch/5488*@* */
/* !do not delete the line above, required for linking your tweak if you upload again */
import ddf.minim.*;
import ddf.minim.analysis.*;
import ddf.minim.signals.*;

Minim minim;
AudioInput in;
FFT fft;

float loudestFreqAmp = 0;
float loudestFreq = 0;
int timerCounter = 0;

/* @pjs preload="picture.jpg"; */
PImage img;
PImage noise;

void setup()
{
 size(640, 1136, P2D);
 frameRate(1);

 img = loadImage("DD.jpg");



 minim = new Minim(this);
 minim.debugOn();
 background(img);


 noStroke();
 // get a line in from Minim, default bit depth is 16
 in = minim.getLineIn(Minim.STEREO, 1024);
 fft = new FFT(in.bufferSize(), in.sampleRate());

}


void draw()
{


 fft.window(FFT.HAMMING);

 println();
 for(int i = 0; i < fft.specSize(); i++)
 {

   // draw the line for frequency band i, scaling it by 4 so we can
   //see it a bit better
   //line(i, height, i, height - fft.getBand(i)*4);

   // hvis fft.getBand(i) større end loudestFregAmp og fft.getBand(i) større end 10)
   if (fft.getBand(i) > loudestFreqAmp && fft.getBand(i) > 2)
   {
     //println(loudestFreqAmp);
     loudestFreqAmp = fft.getBand(i);

     //println(fft.getBand(i));


     loudestFreq = i * 4;

    println(i);
     //sine.setFreq(loudestFreq);


     //fill(loudestFreq * 1, 30 - loudestFreq, loudestFreq * 20, 30 );
     if(loudestFreq < 10)
     {
       rect(random(0,width), random(0,height), loudestFreqAmp, loudestFreqAmp);   
     }
     else
     {
         fill(0);
      ellipse(random(0,width), random(0,height),1,1);
        fill(0);
      ellipse(random(0,width), random(0,height),1,1);

      fill(3);
    ellipse(random(0,width), random(0,height),2,2);


      fill(6);
    ellipse(random(0,width), random(0,height),2,2);

      fill(0);
      ellipse(random(0,width), random(0,height),1,1);

      fill(3);
    ellipse(random(0,width), random(0,height),2,2);


      fill(6);
    ellipse(random(0,width), random(0,height),2,2);

           fill(0);
      ellipse(random(0,width), random(0,height),1,1);

      fill(3);
    ellipse(random(0,width), random(0,height),2,2);


      fill(6);
    ellipse(random(0,width), random(0,height),2,2);

      fill(0);
      ellipse(random(0,width), random(0,height),1,1);

      fill(3);
    ellipse(random(0,width), random(0,height),2,2);


      fill(6);
    ellipse(random(0,width), random(0,height),2,2);

     fill(0);
      ellipse(random(0,width), random(0,height),1,1);

      fill(3);
    ellipse(random(0,width), random(0,height),2,2);


      fill(6);
    ellipse(random(0,width), random(0,height),2,2);

      fill(0);
      ellipse(random(0,width), random(0,height),1,1);

      fill(3);
    ellipse(random(0,width), random(0,height),2,2);


      fill(6);
    ellipse(random(0,width), random(0,height),2,2);

           fill(0);
      ellipse(random(0,width), random(0,height),1,1);

      fill(3);
    ellipse(random(0,width), random(0,height),2,2);


      fill(6);
    ellipse(random(0,width), random(0,height),2,2);

      fill(0);
      ellipse(random(0,width), random(0,height),1,1);

      fill(3);
    ellipse(random(0,width), random(0,height),2,2);


      fill(6);
    ellipse(random(0,width), random(0,height),2,2);
      fill(3);
    ellipse(random(0,width), random(0,height),2,2);


      fill(6);
    ellipse(random(0,width), random(0,height),2,2);

      fill(0);
      ellipse(random(0,width), random(0,height),1,1);

      fill(3);
    ellipse(random(0,width), random(0,height),2,2);


      fill(6);
    ellipse(random(0,width), random(0,height),2,2);

           fill(0);
      ellipse(random(0,width), random(0,height),1,1);

      fill(3);
    ellipse(random(0,width), random(0,height),2,2);


      fill(6);
    ellipse(random(0,width), random(0,height),2,2);

      fill(0);
      ellipse(random(0,width), random(0,height),1,1);

      fill(3);
    ellipse(random(0,width), random(0,height),2,2);


      fill(6);
    ellipse(random(0,width), random(0,height),2,2);

     fill(0);
      ellipse(random(0,width), random(0,height),1,1);

      fill(3);
    ellipse(random(0,width), random(0,height),2,2);


      fill(6);
    ellipse(random(0,width), random(0,height),2,2);

      fill(0);
      ellipse(random(0,width), random(0,height),1,1);

      fill(3);
    ellipse(random(0,width), random(0,height),2,2);


      fill(6);
    ellipse(random(0,width), random(0,height),2,2);

           fill(0);
      ellipse(random(0,width), random(0,height),1,1);

      fill(3);
    ellipse(random(0,width), random(0,height),2,2);


      fill(6);
    ellipse(random(0,width), random(0,height),2,2);

      fill(0);
      ellipse(random(0,width), random(0,height),1,1);

      fill(3);
    ellipse(random(0,width), random(0,height),2,2);


      fill(6);
    ellipse(random(0,width), random(0,height),2,2);
    //ellipse(loudestFreqAmp, loudestFreqAmp, random(1,width), random(1,height) );




 }


     timerCounter = 0;
   }
 }
 loudestFreqAmp = 0;

 // draw the waveforms
 /*  for(int i = 0; i < in.bufferSize() - 1; i++)
  {
  line(i, 50 + in.left.get(i)*50, i+1, 50 + in.left.get(i+1)*50);
  line(i, 150 + in.right.get(i)*50, i+1, 150 + in.right.get(i+1)*50);
  }*/

 fft.forward(in.mix);
 timerCounter++;
 if(timerCounter >= 90)
 {
   //println("Clr screen");
   fill(255, 255, 255, (timerCounter - 90) * 2);
   rect(0, 0, width, height);
  // point(width, height);
 }

}



void stop()
{
 // always close Minim audio classes when you are done with them
 in.close();
 minim.stop();

 super.stop();
}

Answer 1

那是因为 minim（和大多数处理库）是用 Java 制作的。当您处于“Java 模式”时，您的草图也在 Java 中。当您进入“Javascript 模式”并上传到服务器时，您的草图被翻译成 javascript（另一种语言）但您的库不是，因此它无法运行。您最好的选择可能是找到一种方法将您的草图嵌入为 Java 小程序！