[p5.js] Split operation does not work with text obtained by loadStrings

p5.js Beginners
1

[P5.JS]

var value1;
var value2;

function setup() { 

    createCanvas(450, 150); 
    background(220); textSize(12); 
      
     let url = " SITE IP ADDRESS /split_test/user_check.php?";
     value1 = loadStrings(url);
     console.log(value1);
     
     value2 = split(value1, '_');  
     console.log(value2);
    
} 


function draw() { 
    
    text("Splitted string is: " + value1, 50, 15); 
    text("Splitted string is: " + value2, 50, 30);    

    noloop();
    
}

Split operation does not work with text obtained by loadStrings .

  1. Get text value via loadString.
  2. We are going to do classification through the ‘split’ function.
  3. I get an error in split.
  4. What is the reason?
2 
var value1;
var value2;
let value3;

function setup() { 

    createCanvas(450, 150); 
    background(220); textSize(12); 
      
     let url = " SITE IP ADDRESS /split_test/user_check.php?";
     value1 = loadStrings(url);
     console.log(value1);    
} 


function draw() { 
    value3 = value1.toString();
    value2 = split(value3, "_");  

    text("string is: " + value1, 50, 15); 
    text("Splitted string is: " + value2[0], 50, 30);    
    text("Splitted string is: " + value2[1], 50, 45);  
    text("Splitted string is: " + value2[2], 50, 60);  

    noloop();    
}

I solved it. I don’t know exactly why, but here’s my conclusion:

  1. You need to convert it to toString().
  2. ‘split’ function does not work in ‘setup’.

I don’t know the exact reason, but the conclusion is the same as 1-2.

3
  • Function loadStrings() returns an array of strings.
  • Function split() expects 1 string and then returns an array of strings as well.
  • So you can’t pass an array of strings to function split().
  • BtW you can use join() to convert an array of strings to 1 string.
1 Like
4

@GoToLoop

Dear GoToLoop,

It is established in general ‘JAVA Mode’.
And in the general case, ‘P5.JS’ is established.
I understand 100% of what you are trying to explain.

However, it seems that an error occurs when data is fetched through http.

  1. within php to fetch data,
    header("Access-Control-Allow-Origin: *");
    should declare

  2. When importing data,
    It must be put in draw(), but it is not executed in setup().
    I can’t quite understand

5

fig
fig857×367 42.6 KB

This is my inference.

Some P5.JS operates as a ‘thread’ even in the same function.
Due to the time difference, there is a form in which an error occurs.

to solve this

function DB_CHECK() { if(DB_EN){ if(TIMER_DB < millis()){

}}

  1. First, after executing ‘loadStrings()’

  2. Give a delay of 100ms

  3. Implementing split, the error disappeared.

6

The correct place for loading assets is inside preload():
p5js.org/reference/#/p5/preload

loadStrings()'s 1st example uses preload() btW:
p5js.org/reference/#/p5/loadStrings

1 Like
7

Dear GoToLoop,

you’re right. However, problems arise when you need to receive DB data or data regularly.
So, you have to think about the appropriate delay and implement it.

8

Outside of preload() we need to pass a callback function as the 2nd argument, so it runs when the loading is successful.

1 Like
9

@GoToLoop

Thank you for answer.

The ‘preload()’ function knows what to do in advance.

However, what I want to say is

  1. Need to use ‘loadStrings’ periodically

  2. (Because it is not used only once,) ‘preload’ cannot be the solution.

  3. Therefore, it should proceed through time difference calculation through millis().

10

@GoToLoop

  loadStrings(url, function(response){

  });

It is easily solved by using [callback].
thank you.