導出使用麥克風輸入到網頁的處理草圖

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

這是因爲微量的（也是最處理庫）在Java中製成。當您處於「Java模式」時，您的草圖也使用Java。雖然你去「Javascript模式」，你上傳到服務器，你的素描被翻譯成javascript（一種不同的語言），但你的圖書館不是，因此它不能運行。您最好的選擇可能是找到一種將您的草圖嵌入到Java applet中的方法！