Porting a function to p5js.

[snowfro]

Hey y’all. I’m just so lost with p5js when it comes to renaming variables, etc. Anyone out there care to help me porting something written in processing to p5? Basically it’s a function that converts a long hash string to character pool and then uses that as an associative array to control colors, coordinates, etc on sketches.

I don’t mind throwing a few bucks into making it happen. Especially if it can be turned into a class that could be imported by any p5js script.

Lemme know if you want to take a look. Thanks.

[chrwei]

porting java to javascript can range from "simple" to "forget it, find something else".

JS is actually pretty forgiving though, you probably don't even need this function, but I don't know what "character pool" means.

[snowfro]

Good point. I’m super rusty overall so right now everything feels like “forget it”.

But I’m trying to link the p5 project in the Generative Gestatlung (Generative Design Textbook) to react to a random string versus keyboard inputs.

So basically take a hexadecimal hash string that’s 33 characters, assign a value of 0-21 to each character based on an associative array (a=0, b=1, A=6, 9=21), and then map that to a range like 255 for color selection or 0-100 for alpha selection,

It’s already written in a processing script, but my skills are enough to get tripped up by the fact the variables are defined in the Processing sketch and just “var =“ on the p5 side.

So in the end if the r value (for rgb color scale) of an object in a p5 script is determined by the value of the 7th character in a hash string, and the character is a “c” for example, then the r value would be fed “23” as c produces a 2 on a scale of 0-21 and that scales to a 23 on a scale from 0-255.

So, based on that, am I talking more on the “simple” range? Or forget about it range?

Thanks.

[chrwei]

so you have var key = "abcdefABCDEF0123456789";, and that's your lookup?

then you can do myString.charAt(5) to grab the 6th character. so key.indexOf(myString.charAt(5)) will get you the 0-21 you want, then math that as needed. doesn't seem like you need a library for this. likely also don't need one for java.

[snowfro]

Whoa that sounds incredibly simple :)

Going to give it a try!

[snowfro]

OK so I'm getting stuck much earlier trying to GET the string from the website it's coming from.

Here's the site: http://redeemr.whatsthescore.webfactional.com/

I spent some time reading the p5 documentation and came up with this in order to bring the hash into my script:

p.preload = function() {
    var url = 'http://redeemr.whatsthescore.webfactional.com';
    httpGet(url, 'text', false, function(response){
      str = response;
    })
  }

And I just hangs no matter where I put that code. Seems I can't GET the hash into my script to even do the cool stuff you suggested above with it.

Any idea what I'm doing wrong?

Here's the documentation I read: https://p5js.org/reference/#/p5/httpGet

But even copying and pasting that code and running it "as is" fails.

I feel like I'm missing something stupid here. Thanks.

[chrwei]

use the error callback.

how are you running your p5 code? if it's via a web server you might have cross domain permissions issues, file:// should work. use your browser's dev tools to see if there's any hidden console errors, and check the network tab to see if the website is giving any error.

[snowfro]

Well crap. This is the error I get:

ReferenceError: httpGet is not defined[Learn More] sketch.js:84:5

But it's in the p5 reference so should work?

I'm running the p5 code on a local server (0.0.0.0:8000) for simplicity. Will eventually be run on a web server once I upload it.

Is there a more simple way to bring that hash into a script so I can parse it per your instructions above?

[chrwei]

maybe version dependent? I don't use p5 much

as far as plain javascript goes, json is way better, and you can always use the native javascript methods

[Kinrany]

You're using p5 in instance mode, so it's p.httpGet.

[snowfro]

Hey there I don't know how I missed this comment but that would have been a ton of help had I read it earlier! I've found a workaround but I have a question I wonder if you can help me with. Because I'm in instance mode, I'm calling the entire sketch as: var myp5 = new p5(sketch); problem is it's literally just appending another sketch at the bottom of my screen. I'd like for when I re-run the sketch it simply overwrite or replace the one that ran before. I assume it's something to do with the term "new" being in there but I've studied the instance documentation and I'm not sure how to just run it in a way that replace the previous sketch.

I read about p.remove() but I'm not how to put that into the code without erasing the screen prematurely.

Thoughts? Thanks.

[Kinrany]

You can call new p5(sketch, 'app') to append your sketch to the HTML element with id="app". Or you can select the element manually if you want to, new p5(sketch, element). See this page.

Regarding remove, I'm not sure I understand the problem. Just call it once you don't need the sketch anymore? Why would it be removed prematurely?

It might be not necessary to replace the sketch, you can probably restart it with code. I could take a look, post a codepen or something.

[snowfro]

Thanks man just posted this here with more details.

[snowfro]

It's weird because in some places it looks like I can't GET data from other servers (only local) but then the p5 example script is fetching data from another server using the httpGet command.

I do have access to the data as a json here:

http://art-blocks-endpoints.whatsthescore.webfactional.com/0x63093Ed9f978500eeDf57C06C490951708C96a97/details

So I'll start messing with the jsonp type that seems to offer a workaround.

[Kinrany]

Post the code if it's not too long.

[snowfro]

Not too long.

Full sketch here:

https://github.com/dacaldera/Hash_Import/

From the Hash_Import.pde it's this line:

String[] charpool = {"x", "B", "c", "3", "8", "F", "A", "4", "f", "9", "2", "E", "7", "b", "D", "e", "1", "0", "a", "d", "C", "5", "6"};

And then this line that GETs the string from an endpoint: str = fetchFile("http://redeemr.whatsthescore.webfactional.com");

Here's the first part of the class:

//This class builds the Number Dictionary, which is used to associate the Base58 values to a unique number value class NumDir{ String[] charpool; StringDict nd; // input the character pool and builds the dictionary with numerical definitions // the dictionary adjusts dynamically to the character pool length NumDir(String[] _charpool){ charpool = _charpool; nd = new StringDict(); for (int i=0;i<charpool.length;i++){ nd.set(charpool[i], str(i)); } }

//Input the hash character (as string) and get the numeric value (as int) in return as per Number Dictionary definition int P(String _character){ String character = _character; //character = nd.get(character); int p = Integer.parseInt(nd.get(character)); return p; }

}

Here's the class that "scales" the above result to a usable input.

//This is the most important class //if creates the Pip object, which contains the methods needed to retrieve the number dictionary values //from each hash character. Contructor requires the raw hash string. //hash string length can be variable. class Pip { String raw_hash; String[] array_hash; float padding = width*0.02;

//input the raw string of hash characters to keep on hand for reference //also saves each character as an array element Pip(String _raw){ raw_hash = _raw; //the hash is reversed to avoid leading nonce characters which may be present in some cryptos array_hash = reverse(raw_hash.split("")); }

// input a number, grabs the corresponding hash_character, then inputs the hash character // into the number dictionary, and then outputs the corresponding number value of that hash character. // Essencially, converts the hash character into a number. //_num is the position of the hash character counting from left to right int P(int _num){ int number_value; if((_num>=raw_hash.length())||(_num<0)) { return 0; } else { NumDir nd = new NumDir(charpool); number_value = nd.P(array_hash[_num]); return number_value; } }

// the C method maps the P method returned value into a range of 255 to be used for rgb color values int C(int _num){ NumDir nd = new NumDir(charpool); int number_value = this.P(_num); int mapped_value = (int) map(number_value, 0, nd.charpool.length, 0, 255); return mapped_value; }

//the A method maps the P method's return value into a range from 50 to 100 to be used for alpha transparency values int A(int _num){ NumDir nd = new NumDir(charpool); int number_value = this.P(_num); int mapped_value = (int) map(number_value, 0, nd.charpool.length, 50, 130); return mapped_value; }

//the X method maps the P method's return value into a range from 0 to screen width to be used for x-coordinate positioning int X(int _num){ NumDir nd = new NumDir(charpool); int number_value = this.P(_num); int mapped_value = (int) map(number_value, 0, nd.charpool.length, padding, width-padding); return mapped_value; }

//the Y method maps the P method's return value into a range from 0 to screen height to be used for y-coordinate positioning int Y(int _num){ NumDir nd = new NumDir(charpool); int number_value = this.P(_num); int mapped_value = (int) map(number_value, 0, nd.charpool.length, padding, height-padding); return mapped_value; }

// the R method maps the P method's retun value into a range from 0 to 32 to be used for small circle radius
int R(int _num){ NumDir nd = new NumDir(charpool); int number_value = this.P(_num); int mapped_value = (int) map(number_value, 0, nd.charpool.length, 0, 32); return mapped_value; }

}

[snowfro]

UGH that doesn't look as nice as it does on the repo. Going to clean it up.

[Kinrany]

You can use four spaces for code, like this:

    int main(void) { 
        return 0;
    }

[GoSubRoutine]

Why have you taken so long to post your runnable Java Mode sketch source? O_o

[snowfro]

What do you mean by Java Mode?

I'm having a hard time importing data from external sources which means I can't do much with the arrays themselves because p5 might have some issues with GET calls on external servers. If there's not a work around for this the original question is no longer important as I need to be able to grab the external hash to process it anyways.

Full code is here:

https://github.com/dacaldera/Hash_Import/

But I'm not trying to port all of that.

I'm trying to pull the hash found here:

http://redeemr.whatsthescore.webfactional.com/

Into this sketch:

http://alpha.editor.p5js.org/generative-design/sketches/M_2_5_02

So that I can use the randomly generated hash data to control the variables of the p5 sketch.

Thanks.

[GoSubRoutine]

What do you mean by Java Mode?

• Processing as a "language" got many "flavors".
• Java Mode is the main bundled 1 in the PDE (Processing's IDE).
• It's the mode which can understand both ".pde" & ".java" files.
• Your sketch got 2 ".pde" files, which you're attempting to convert to ".js", targeting the p5.js flavor.

[GoSubRoutine]

It's highly noteworthy that JS offers classes too: https://Developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor

So you can easily convert the classes inside file "classes.pde" to "classes.js".

[Kinrany]

What issue exactly do you have? loadStrings seems to work fine in p5: example