处理js+javascript+处理答案

【问题标题】：Processing js + javascript+ processing处理js+javascript+处理
【发布时间】：2014-05-22 12:17:22
【问题描述】：

我正在尝试使用处理 js 进行连接 javascript-处理，但它不起作用。加工草图出现在网站上，而不是带有信息的图形。

javascript：

var base_url = "http://ws.audioscrobbler.com/2.0/";


var apikey = "***";

var base_request = "****";

var username;

var procura;
var getUserInfo;
var searching;
var log;

var proc;
var bound=false;

var listaArtistas = [];
var listaArtistasOther = [];




$(document).ready(function () {


    $("#pjs").hide();

    $("#go").click(function () {
        procura();


        //alert("go");

        $("#artists").click(function () {
            buscarArtistas("#search-text", false);
            buscarTracks();

            bindJavascript(listaArtistas);

            //alert("artists");
        });

        $("#compare").click(function () {
            buscarArtistas("#search-text", false);
            buscarArtistas("#search-user", true);
            //alert("compare");
        });
    });
});


function bindJavascript(listaArtistas){



       proc = Processing.getInstanceById('pjs');
       $("#pjs").show();


    if(proc!=null){

    proc.bindJavascript(this);
    proc.legenda(listaArtistas);
        bound=true;

    }else if(!bound){

        setTimout(bindJavascript,250);

    }

    bindJavascript();

}


function buscarArtistas(id, isOther) {
    username = $(id).val();
    searching();
    getUserTopArtists(username, isOther);
   // alert("buscarArtistas");
}

function buscarTracks() {
    username = $("#search-text").val();
    searching();
    getUserTracks();
    //alert("buscarTracks");

}



function procura() {
    username = $("#search-text").val();
    searching();
    getUserInfo();
    //alert("procura");
}

function getUserInfo() {
    var data = {
        api_key: apikey,
        method: "user.getInfo",
        user: username,
        format: "json"
    };
    $.ajax({
        url: base_url,
        data: data,
        success: processUserInfo
    });    
    //alert("getUserInfo");
}

function getUserTopArtists(user_, isOther) {
    var data_ = {
        api_key: apikey,
        method: "user.getTopArtists",
        user: user_,
        limit: 20,
        format: "json"        
    };    
    $.ajax({
        url: base_url,
        data: data_,
        async:   false,
        success: function (info) {
            processUserTopArtists(info, isOther);

            if (isOther) {
                comparar();
            }
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {

        }
    });    
    //alert("getUserTopArtists");
}



function processUserInfo(info) {    
    if (info.error) {        
        log("User " + username + " doesn´t  exist or the field is empty<br/>Try again...");       
        return;
    }    
    username = info.user.name;
    var realname = info.user.realname,
        pais = info.user.country,
        age = info.user.age,
        genero = info.user.gender,
        playlist = info.user.playlists;
    $("#profile").html("Username: " + username + " <br>Name:" + realname + " <br> Country:" + pais + " <br> Age:" + age + " <br> Gender:" + genero + "<br>Playlists:" + playlist + "<br/><table></table>");    
    //alert("processUserInfo");
}

function processUserTopArtists(info, isOther) {


    $.each(info.topartists.artist, function(index, artist) {
        if (isOther) {
            listaArtistasOther[index] = artist.name;


        } else {

         listaArtistas[index] = artist.name;


            $("#artistas").append("Artist: " + artist.name + "<br/>");

           //proc.funcao(listaArtistas[index]);

        }


    });

    //alert("processUserTopArtists");    
}

function comparar() {

    //alert ("lista art " + listaArtistas);
    //alert ("lista art Other " + listaArtistasOther);

    $.each(listaArtistas, function(index, item) {
        var index = $.inArray(item, listaArtistasOther);
        if (index >= 0) {
            $("#artistas2").append("Name: " + item + "<br/>");
        }
    });

    //alert("comparar");
}

function getUserTracks() {    
     var data_ = {
        api_key: apikey,
        method: "user.getTopTracks",
        user: username,
        limit: 100,
        format: "json"        
    }; 

    // alert ("getUserTracks");

$.ajax({
        url: base_url,
        data: data_,
        success: function (info) {
        processUserTopTracks(info);
        }

    });    

    //alert("Estou aqui");
}

function processUserTopTracks(info){    
   $.each(info.toptracks.track, function(index, track) {
        var track = track.name;        
        $("#tracks").append("Track: " + track + "<br/>");
    });
    //alert("aqui");
}

function searching() {    
    $("#status").empty();
    //alert("searching");
}
function log(message) {
    $("#status").append(message + "<br/>");    
    //alert("log");
}

处理文件：

JavaScript js;

int planetsnum=4;
float ang=PI/4;
Stars [] star;
float [][] angsincs=new float [2][planetsnum];
color[] corplanetas=new color[planetsnum];


PFont font;
int totalStars=0;


 void legenda(String [] l){

    totalStars=0;

  String [] listaArtistas ={"",""};

     star= new Stars[totalStars];

   font = createFont("Courier New",12);


  for(int i=0; i<l.length; i++){



    listaArtistas[i]=l[i];

    star[i]= new Stars(new PVector(random(40,820),random(40,360)),20, planetsnum,listaArtistas[i],0);
totalStars++;



  }
   for(int w=0; w<planetsnum; w++){

     angsincs[0][w]=random(TWO_PI);
      angsincs[1][w]=random(0.00001, 0.0001);

      corplanetas[w]=color(random(50,255),random(50,255),random(50,255));
}


 }

void setup(){

size(900,400);


}

void draw(){

 background(0);


  for(int i=0; i<totalStars; i++){
    for(int j=0; j<totalStars; j++){

    if (j > i) {

    if(star[i].VerificaColisaoDeBolas(star[j])){
     star[j].localizacao.x=star[j].localizacao.x+ star[j].r;
      star[j].localizacao.y=star[j].localizacao.y+ star[j].r; 
}
}
}
}
 for(int i=0; i<totalStars; i++){
  star[i].displayStar();

   star[i].limites();

   for(int w=0; w<star[i].planetnum; w++){

   int raio=(w+1)*40;

     float a= star[i].localizacao.x+(raio/2)*cos(angsincs[0][w]);
    float b=star[i].localizacao.y+(raio/2)*sin(angsincs[0][w]);




    planetas(star[i].localizacao.x,star[i].localizacao.y,a,b,raio,corplanetas[w]); 


 angsincs[0][w]=angsincs[0][w]+angsincs[1][w];
    }
    }

    cimaEstrela();

 }


 void cimaEstrela(){

   PVector localizacaoRato = new PVector(mouseX, mouseY);


   for(int i =0; i<totalStars;i++){

    if(star[i].localizacao.dist(localizacaoRato)  <= star[i].r){

     star[i].d=255;


   }else{

     star[i].d=0;

   }
 }
 }


void planetas(float x,float y,float a1,float b1,int r2,color c){

  stroke(100);
      noFill();
      ellipse(x,y,r2,r2);

      fill(c);
      ellipse(a1,b1,10,10);
}

class Stars{   

  float r; 
  PVector localizacao;
  int planetnum;
  String s;
  int d;


 Stars(PVector tempXY, float tempR, int tempplanetnum, String temps, int tempd) {
    localizacao = tempXY;
   r=tempR;
   planetnum=tempplanetnum;
   d=tempd;
   s=temps;


  }

  void displayStar() {


  fill(255,d);
  text(s,localizacao.x+r, localizacao.y);


}

 boolean VerificaColisaoDeBolas(Stars outraStars) {
    float distanciaX = localizacao.dist((outraStars.localizacao));

    if (distanciaX < (r + outraStars.r)) {


      return true;
    }
    return false;
  }

  void limites() {

    if ((localizacao.x+(r)) > width) {
      localizacao.x = width - (r);

    }  
    else if ((localizacao.x-(r)) < 0) {
      localizacao.x = (r);

    }
    else if ((localizacao.y + (r)) > height) {
      localizacao.y = height - (r);

    }
    else if ((localizacao.y -(r)) < 0) {
      localizacao.y = r;

    }
  }

}

interface JavaScript {}

void bindJavascript(JavaScript script) {
js = script;
}

任何想法如何做到这一点？提前致谢。

【问题讨论】：

代码很多，描述很少。你到底尝试了什么？没有按预期工作的步骤在哪里？隔离导致错误的部分，我会回来帮助您解决它:)
所以我有一个包含艺术家姓名的列表，最后一个 fm 用户收听最多的前 20 位艺术家，我有一个处理过程中的问题，这使得太阳系我想阅读艺术家列表的长度并将其提供给类的构造函数，以便绘制 20 颗星我需要处理文件才能访问 javascript 文件中的信息，我正在使用函数 legenda
但是什么部分导致了这个错误？什么甚至不起作用？您说“出现了草图，但没有出现带有信息的图形”，但我怎么知道您所说的“带有信息的图形”是什么意思？它可以是任何东西^^
星星不会出现在网站的画布上。在括号中的实时预览中，实时预览中，concole 错误是： Uncaught TypeError: Cannot read property 'length' of undefined Uncaught TypeError: Cannot read property 'length' of null
在谷歌浏览器上它们是： XMLHttpRequest cannot load file:///C:/Users/Raissa/Documents/LDM/3%C2%BAano/2%C2%BAsemestre/TAWS/projecto/index /graphic2.pde。收到无效回复。因此，Origin 'null' 不允许访问。未捕获的 Processing.js：无法加载 pjs 草图文件：graphic2.pde ==> XMLHttpRequest 失败，可能是由于同源策略违规。您可以尝试在另一个浏览器中加载此页面，或使用本地网站从localhost 加载它......s。未捕获的 ReferenceError：未定义 setTimout

标签： javascript web processing processing.js

【解决方案1】：

好的，问题是如果您从 file:// 协议本地查看您的网站，您将无法读取本地文件（又名发送 XMLHttpRequests，简称 XHR）。原因可能是因为否则很容易诱骗人们在本地打开网站，然后我猜想可以访问他们的所有文件。

有很多方法可以解决这个问题，最简单的方法是运行本地服务器，例如在 javascript 模式下测试 processing.js 草图时的处理。处理还允许您定义自己的 html/js/ccc 来加载而不是默认模板。所以也许这也是一个快速的解决方案。

您可以通过在 JavaScript 模式下运行 Processing 来找到所需的所有选项。然后您将拥有一个 JavaScript 菜单，您可以在其中定义模板和服务器设置。

另一种方法是将其上传到某个地方。（这种方法的优点是允许您在不同的设备（如智能手机/平板电脑等）或其他人上轻松测试它）除了您可以用来测试它的许多“传统”免费/付费网络托管服务之外，还有值得注意的替代方案是

Google Drive / Dropbox 允许您将静态内容托管为网站
tumblr 也托管静态内容，但维护起来比第一个选项更麻烦
Github 也可以做同样的事情，但到目前为止我自己从未尝试过，所以我无法告诉你具体如何设置。
Heroku 为小型项目免费提供动态内容托管服务，以防您想编写一些服务器端脚本。

另一个问题也可能是，如果您从另一个域请求文件，如果服务器不支持它，XHR 也可能失败，因为除非服务器特别允许，否则默认情况下它在浏览器中被阻止。如果您从客户端脚本发送这些请求，那将是一个问题，因为这又是一个危险的领域，人们显然在过去做了很多黑客攻击。

这是一个相当复杂的话题，我无法做到公正，但如果您想了解更多关于它的信息，“CORS”和“XHR”是谷歌的好关键字。

【讨论】：