How can I pass/ change variable value of sketch.js from html5

TuangPing

Hi,

First time programming in P5js here. I want to know how we can call a varaible that assigned in sketch.js and change its value. Let’s say I have a function that compare a string. I first assigned as “xxx”, but when the page of html5 changed like, from index.html to another, I want that var to be “yyy”. How can I do that? I have tried call a function and put parameter in (); which is inside the tag that call the particular sktch.js but didn’t work. So should I put in a of a new different tag? or if this should be inside < body> or that sort of code lines problem.

In this very first time programming in P5, it would be great if your answer could be a bit detail or point me to the right page where I can read thourgh it and understand this specific task.

GoToLoop

• Never done multiple webpages. I'm noob on this subject too. X_X
• But AFAIK, each webpage is a complete independent universe. :-<
• Even global variables can't traverse through them. :-S
• Traditionally, the most used approach to workaround such barrier was via cookies. :ar!
• A more modern way would be using localStorage: *-:)
  https://Developer.Mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API
• That is as far as my knowledge reaches though. =;

TuangPing

@GoToLoop, hmm.. but in my case I thought with the same sketch.js; although different html files, it would run as it is obe single program. May be i’m wrong. So basically what you say is that when the page changed it reload sketch again, which means it is a separated program, therefore cannot pass the variable to the same sketch.js file????

GoToLoop

... which means it is a separated program, ...

Yes, if a webpage is reloaded, all variables "die". :-&
And I dunno how can a webpage communicate to another 1. :-t

GoToLoop

... but in my case I thought with the same sketch.js; although different html files, ...

Why would you need diff. ".html" files for the same ".js" file for? :-/

TuangPing

@GoToLoop Well, hahahah.... I think it doen’t make sense to have separeated html file actually at this point. I know that I could do everything in one canvas of p5js which means a single html page is enough. The thing is that I wrote all the website and done it with html5 and css. So they have many pages done already. After that, I thought of putting some gimmick created by p5js to the website but then I am stuck on the part of how to store the values of some variables I created to the next page. On the next page this gimmick will still show up so it should remember what happened before. My plan is to use the values that are stored from the previous page in the next page which calling the same sktech.js. Does this make sense? I actually don’t want to delete pages that I have done so I am looking for a way to tell the sketch.js that “hey the this var has changed its value so now do this instead!”.... if there is any possibility to do so. But I guess when you call a sketch in a new html it is actually newly start agian so no values are stored????

GoToLoop

I know that I could do everything in one canvas of p5js which means a single html page is enough.

We can have as many p5.js sketches and as many canvas in just 1 webpage. ;;)

I am stuck on the part of how to store the values of some variables I created to the next page.

I've already answered that, advising you to read the article about localStorage. I-)
Here's its link again: https://Developer.Mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API

But as I've stated, I've never done that! So you're somewhat on your own. :-<

blindfish

There are lots of ways of passing data between pages: localStorage is definitely the more modern approach. You could also put data into URL parameters; or cookies; or store it on the server (using a suitable back end) etc...

There are plenty of libraries designed to make handling this process easier ;)

The principle is generally the same: when data you want to store changes*, update the stored copy. When the sketch loads check for stored copies and set variables to the stored values; or a default value in case no stored value is recovered.

If data changes often you may want to limit how often you update the store; as this could have a performance impact. One possibility may be to use the Window.onunload event; or you could attach an event handler to the navigation within your site; set the store when this is triggered and then navigate to the next page.

Note that localstorage can persist between browser sessions - which may or may not be desirable. There are ways of resetting it if necessary ;)