Processing js + javascript+ processing

Question

I am trying to make a conection javascript-processing, using processing js, but it isn't working. The processing sketch appears on the website, but not the graphic with information.

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
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 + " 
Name:" + realname + " 
 Country:" + pais + " 
 Age:" + age + " 
 Gender:" + genero + "
Playlists:" + playlist + "
");    
    //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 + "
");

           //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 + "
");
        }
    });

    //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 + "
");
    });
    //alert("aqui");
}

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

processing file:

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 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 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;
}

Any thoughts how to do this? Thanks in advance.

Processing js + javascript+ processing

Answers (1)

Related Questions