P5.js inside sBasic

[Operator]

After some trials and based on rBytes great
weather example you can now code P5 inside
sBasic if desired.

First: turn capsyntax off
SET EDITOR CAPSYNTAX OFF
to avoid changes of the P5 code or P5-lib
when opened in the sB editor.

Download the P5-Folder : Dropbox-link
below...

Use P5 -Test- .tx to run the sample code
and P5_code_2.tx to edit/change the
P5 snippet...

Link:
https://www.dropbox.com/sh/xi1yc1myr1x3 ... P1KAa?dl=0

[GeorgeMcGinn]

Hello,

WOW - this is great!

I do have one question. What do I need to set to run this on an iPad? (I have an iPad Air 2, but there must be a way to set the canvas size based on the sb system variable that tells you what device is being used?

Or is this a limitation of P5?

This is still awesome. Maybe we can get VBScript/ASP working inside a SmartBASIC program

George.

After some trials and based on rBytes great
weather example you can now code P5 inside
sBasic if desired.

First: turn capsyntax off
SET EDITOR CAPSYNTAX OFF
to avoid changes of the P5 code or P5-lib
when opened in the sB editor.

Download the P5-Folder : Dropbox-link
below...

Use P5 -Test- .tx to run the sample code
and P5_code_2.tx to edit/change the
P5 snippet...

Link:
https://www.dropbox.com/sh/xi1yc1myr1x3 ... P1KAa?dl=0

[Operator]

For iPad screen-size fit...
In P5 -Test- .tx change browser window size..
In P5_code_2.tx change w, h ... to your
device screen_size in sBasic...

As far as I know ... in P5 you have to set the canvas-size first, then the width- and height-values can be called inside function draw with width,height...
P5 does't have a command to detect the
screen_size as in sBasic (as tested so far).

If you find a way..., just let us know..

[Operator]

As for VBscript..., guess it is also possible
following a similar scheme as for P5...


http://www.csidata.com/custserv/onlineh ... s/vbs9.htm

https://www.tutorialspoint.com/vbscript ... cement.htm

[GeorgeMcGinn]

Thanks for this and VBScript reply.

I will let you know about the screen sizing issue when I run my fist JScript program!

George.

For iPad screen-size fit...
In P5 -Test- .tx change browser window size..
In P5_code_2.tx change w, h ... to your
device screen_size in sBasic...

As far as I know ... in P5 you have to set the canvas-size first, then the width- and height-values can be called inside function draw with width,height...
P5 does't have a command to detect the
screen_size as in sBasic (as tested so far).

If you find a way..., just let us know..

[rbytes]

Thanks for pioneering in this new direction. There seems to be no limit to what can be done with sB and your imagination!

Got the page set for full iPad Air size, 1024 x 768. Also I set toolbar off to use the whole screen.

Very responsive even at full size!

A suggestion on detecting and using screen size. No problem incorporating a statement into the test file, since it is written in sB. You could then have the test file overwrite new lines 6 and 7 into the code file that contain the desired values for var w and var h.

[Operator]

Great Art-Work...

You already got rid of the toolbar...,
so if you want full screen edit P5_html_1
and set: padding: 1px; to 0px...

Re manipulating the P5 code file is a good idea to set the screen/canvas size ...
... the ultimate goal would be having a function
in sB and P5 ( guess in the browser js/html code) so they could exchange data during program execution, but this goes beyond my actual skills...

[rbytes]

I hope you are able to create such a function. There are a lot of JavaScript code snippets on the web. I will keep on the lookout.

I should have thought of the padding setting. I just set the browser top right corner to -1,-1 and the size to sw+1, sh+1 to get rid of the 1 pixel bar, but I will go back and do it properly.

[rbytes]

Here is the P5 folder all set up to work on iPad. I also added a file P5_code_2a.tx that can be executed instead of file P5_code_2.tx
It will produce today's date at the top left of the browser. To run it, open P5 -Test- .tx and change the name of the code file From P5_code_2.tx to P5_code_2a.tx. I also enclosed a very simple program that lets you set Capsyntax off when you enter the folder.

https://www.dropbox.com/sh/8q6gpliqdlrs ... hsK9a?dl=0

There are many JavaScript snippets available at W3 Schools, all with demos to show them working. I have tried copying some of them into code files and substituting them for the supplied code file. Many of them don't work, for example the 3D primitives, so I am assuming that we don't have the libraries downloaded to run them. One that does work is in the folder I posted. It shows the current day and date. I tried a few variations to try to enlarge the very tiny font used, but no luck so far. On the positive side, I have been able to modify the supplied code file to change colors, font sizes, draw width and even the shape and shape size that is used for drawing.

[rbytes]

Here is the official site for P5 JavaScript, with lots of tutorials including examples of code, and the complete reference manual.

https://p5js.org

However there are quite a few different libraries, and if the script you download requires a library that has not been implemented in sB, it won't run. Operator, perhaps you could clarify which libraries you included and any plans you have to expand the selection. That may give other members more incentive to download and try out scripts.