P5.js inside sBasic

Operator · Post by **Operator** » Tue Nov 22, 2016 11:06 am

The web-page of P5 was included in the
sBcode but your direct post is better..

As for the libs included, only the std. P5.js
lib is included (0.5.4)..., so no dom, sound, etc..

You can test all the libs, index.htm, script.js
in your computer ... I have no ready sB code
including the other P5 libs...

Please google: "The Nature of Code" and
Code Challenge (YouTube) and get inspired...

rbytes · Post by **rbytes** » Wed Nov 23, 2016 7:56 am

Here is a simple animation that I found on W3_Schools. It doesn't work in the normal way, sandwiched between HTML1 and HTML3. But it works perfectly it you comment out loading HTML1. That's because it is a complete HTML page on its own, so just needs the page that contains the P5 code.

Here is the changed test file

Code: Select all

REM P5.js inside sBasic
REM P5 version: 0.5.4
REM visit http://p5js.org/ for details
REM 
REM sB5.6/iOS6.1/iPhone4/by Operator
REM (thxs to rBytes)
REM runs simple animation from W3_Schools
REM posted by rbytes
/*

To use html/javascript set:
!! "set editor capsyntax off" !!
to avoid syntax errors with reserved words of sBasic

P5-code in a file (with js-lib in a second file) if changed after first run of program wont change the result --> 'BUG' ? 
A change in the P5-code will only be adopted by sBasic's browser only by cpl. closing and restarting sBasic.
Deleting browser doesn't help...
Maybe due to of how sBasic handles loading files with javascript..(?)..

If the P5-code is included in the html-file WITH the P5-lib (js) then the changes in the P5 code will lead
to a change in the result (canvas-content) --> 'NO BUG' (w/o cpl. closing and reloading sBasic).
But editing the html file with the 
P5-lib = pain in the ass, since the
sB editor almost freezes (guess file is too big for sB-editor).

So for a quick and dirty solution
the html file including the P5 code and the P5-js-lib is splitted into 3 files, being the second file which has the P5-code. The main programm just loads the content of the 3 files to a single string which is then passed to the browser...

Open P5_html_2.tx to edit the P5 code
close it and run this file...
*/

GRAPHICS
GRAPHICS CLEAR 1,1,1
SET TOOLBAR OFF
GET SCREEN SIZE SW,SH

'html-file was splitted in three files
'second file has the P5-code to be
'executed..., edit it to code...
'fname1$ = "P5_html_1.tx"
fname2$ = "P5_code_2e.tx"
fname3$ = "P5_html_3.tx"
a$ = ""
temp$ = ""
b$ = "1"

'read all 3 files into one string
/*FILE fname1$ SETPOS 0
FOR t=1 TO 20
    FILE fname1$ READLINE temp$
    a$ &= temp$&""
NEXT t
*/
'change amount of loops for bigger
'P5 code line size...
FILE fname2$ SETPOS 0
FOR t=1 TO 50
    FILE fname2$ READLINE temp$
    a$ &= temp$&""
NEXT t

FILE fname3$ SETPOS 0
FOR t=1 TO 200
    FILE fname3$ READLINE temp$
    a$ &= temp$&""
NEXT t

BROWSER b$ AT -1,-1 SIZE SW+1,SH+1      ' otherwise a white border can be seen!
browser b$ hide
BROWSER b$ TEXT a$
BROWSER b$ SHOW
button "quit" text "Q" at 990,10 size 24,30


LOOP:
if button_pressed("quit") then
  browser 1 delete
  a$ = ""
  temp$ = ""
  text
  end
end if
GOTO LOOP

I named it P5 -Test2- .tx so it would not overwrite the original Test file

Here is the animation file. I named it P5_code_2e.tx so that it also will not overwrite any previous files.

Code: Select all

<!DOCTYPE html>
<html>
<style>
#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}
#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: red;
}
</style>
<body>

<p>
<button onclick="myMove()">Click Me</button>
</p>

<div id ="container">
<div id ="animate"></div>
</div>

<script>
function myMove() {
  var elem = document.getElementById("animate");
  var pos = 0;
  var id = setInterval(frame, 1);
  function frame() {
    if (pos == 350) {
      clearInterval(id);
    } else {
      pos++;
      elem.style.top = pos + 'px';
      elem.style.left = pos + 'px';
    }
  }
}
</script>

</body>
</html>

Here are screen shots showing the animation in progress.

Operator · Post by **Operator** » Wed Nov 23, 2016 3:10 pm

Hello rBytes..., your sample is bare html/js
so no need of any js-lib (as P5) and therefore
the strange 3-file splitt is also not needed...

Just load your sample code out of one file
and you are done....

Code for single html-js-file-player:

Code: Select all

REM Html-JS File Player in sBasic
REM (bare js -> no js-libs)
REM
REM sB5.6/iOS6.1/iPhone4/by Operator
REM (thxs to rBytes)

GRAPHICS
GRAPHICS CLEAR 1,1,1

button "quit" text "Quit" at 0,400 size 100,30

'html-js file to run/play
fname$ = "Html-js-File.txt"

a$ = ""
temp$ = ""

'read file into one string
FILE fname$ SETPOS 0
FOR t=1 TO 200
    FILE fname$ READLINE temp$
    a$ &= temp$&""
NEXT t

'create browser and load string = text
BROWSER 1 AT 0,0 SIZE 320,400
BROWSER 1 TEXT a$


LOOP:
if button_pressed("quit") then
  browser 1 delete
  a$ = ""
  temp$ = ""
  end
end if
GOTO LOOP

rbytes · Post by **rbytes** » Wed Nov 23, 2016 3:45 pm

Thanks. Here is some P5 code that doesn't work in the "sandwich". I tried loading an image file using an absolute reference -/JPGs/my5.jpg and a second time with the image file copied into the P5 folder - my5.jpg
No response, just an empty browser window.

I am finding a major drawback to P5 is that when code doesn't run, there is no error message warning that you are missing a required library. Therefore one can spend way too much time searching through the Reference to try to discover the problem. It would help if the P5 website would indicate for each example whether a supplementary library is needed to run it, and if so, which one.

Code: Select all

var img;
var c;
function preload() {  // preload() runs once
  img = loadImage('my5.jpg');
}

function setup() {  // setup() waits until preload() is done
  img.loadPixels();
  // get color of middle pixel
  c = img.get(img.width/2, img.height/2);
}

function draw() {
  background(c);
  image(img, 25, 25, 50, 50);
}

Operator · Post by **Operator** » Wed Nov 23, 2016 8:45 pm

Yes..., but I have no clue as how to see any
kind of error-log... Try the P5-App instead..

For any other reason the single line comment
// does not work in my code..., so change
this in your sample and use the multi line
comment instead /* comment */ and it will
work...

rbytes · Post by **rbytes** » Wed Nov 23, 2016 9:19 pm

Thanks, Operator. I was able to get the attached result. But I don't see what in the code or the HTML files is restricting the image to such a small window. I have the browser set in the HTML1 file for full screen size on my iPad, and the earlier sample I posted with my handwriting shows that it worked.

I have also tried setting the image to full size in the second screen shot below. It does change size, but now all you see of it is the top left corner. That little square window with the blue background doesn't change. Do you know what is defining its size?

rbytes · Post by **rbytes** » Thu Nov 24, 2016 3:07 am

Having more success now, thanks to the hint from Operator not to use // as a comment marker. You have to enclose all comments in the P5 code with /* */ Otherwise nothing appears in the browser! Many of the demo scripts have // comments, and I had to change them all.

I got this script with the P5.js app available on the App Store. It is called Array of Objects. Icopied it to the smart BASIC P5 folder and did some tweaking. It draws a bunch of circles and makes them dance randomly - exactly the way gas molecules behave. I changed colors and increased the number of "molecules".

You'll notice in the code that I draw the same text multiple times. I wanted to outline the text, but I found that what works to outline text in Function Setup does not work if the text statements are located in Function Draw. In setup I can outline text in any thickness by preceding it with a strokeWeight(x) command that is very similar to DRAW SIZE in smart Basic.

But no matter where I locate the strokeWeight command, it affects only the circles. I moved the text to the Draw function because to get the text to appear in front of the circles it has to be drawn after them! So I drew the text in black first at multiple offset locations to create an outline and shadow effect, then drew the colored text on top.

You will need to save this file as a code file. I named it P5_code_brownian.tx

Code: Select all

var bugs = []; /*array of Jitter objects*/

function setup() {
    createCanvas(1024, 768);      /*  Change this to fit your screen size */
    /*Create objects*/
    for (var i=0; i<400; i++) {
        bugs.push(new Jitter());
    }
    strokeWeight(2);
}

function draw() {
    background(50, 89, 100);
    fill(0,255,255);
    for (var i=0; i<bugs.length; i++) {
        bugs[i].move();
        bugs[i].display();
    }
    textSize(64);
    fill(0);
    text("Brownian motion",32,98);
    text("Brownian motion",28,102);
    text("Brownian motion",30,98);
    text("Brownian motion",30,102);
    text("Brownian motion",28,98);
    text("Brownian motion",32,103);
    text("Brownian motion",34,104);
    fill(255,255,0);
    text("Brownian motion",30,100);
}

/* Jitter class */
function Jitter() {
    this.x = random(width);
    this.y = random(height);
    this.diameter = random(10, 30);
    this.speed = 5;
    
    this.move = function() {
        this.x += random(-this.speed, this.speed);
        this.y += random(-this.speed, this.speed);
    };
    
    this.display = function() {
        ellipse(this.x, this.y, this.diameter, this.diameter);
    };
}

Next is the code from the copy I made of the Test file. I am getting so many script samples, it is hard to keep track of them using number identication. So now each copy I make of the original Test file is named for what it creates on screen, and each code file is named to match it. Hence the name Brownian or brownian appears in both filenames.

This test file is set up to create a 1024 x 768 browser (full screen), and the code file specifies a Canvas of that same size. If running the script on a device other than iPad, the file below will automatically fit the browser to your screen size. But with the code script, you will need to edit the canvas size to match your device. I have commented in the script where you need to change it.

I named it P5 -Brownian.tx

Code: Select all

REM P5.js inside sBasic
REM P5 version: 0.5.4
REM visit http://p5js.org/ for details
REM 
REM sB5.6/iOS6.1/iPhone4/by Operator
REM (thxs to rBytes)
/*

To use html/javascript set:
!! "set editor capsyntax off" !!
to avoid syntax errors with reserved words of sBasic

P5-code in a file (with js-lib in a second file) if changed after first run of program wont change the result --> 'BUG' ? 
A change in the P5-code will only be adopted by sBasic's browser only by cpl. closing and restarting sBasic.
Deleting browser doesn't help...
Maybe due to of how sBasic handles loading files with javascript..(?)..

If the P5-code is included in the html-file WITH the P5-lib (js) then the changes in the P5 code will lead
to a change in the result (canvas-content) --> 'NO BUG' (w/o cpl. closing and reloading sBasic).
But editing the html file with the 
P5-lib = pain in the ass, since the
sB editor almost freezes (guess file is too big for sB-editor).

So for a quick and dirty solution
the html file including the P5 code and the P5-js-lib is splitted into 3 files, being the second file which has the P5-code. The main programm just loads the content of the 3 files to a single string which is then passed to the browser...

Open P5_html_2.tx to edit the P5 code
close it and run this file...
*/

GRAPHICS
GRAPHICS CLEAR 1,1,1
SET TOOLBAR OFF
set buttons custom
GET SCREEN SIZE SW,SH

'html-file was splitted in three files
'second file has the P5-code to be
'executed..., edit it to code...
fname1$ = "P5_html_1.tx"
fname2$ = "P5_code_brownian.tx"
fname3$ = "P5_html_3.tx"
a$ = ""
temp$ = ""
b$ = "1"

'read all 3 files into one string
FILE fname1$ SETPOS 0
FOR t=1 TO 20
    FILE fname1$ READLINE temp$
    a$ &= temp$&""
NEXT t

'change amount of loops for bigger
'P5 code line size...
FILE fname2$ SETPOS 0
FOR t=1 TO 50
    FILE fname2$ READLINE temp$
    a$ &= temp$&""
NEXT t

FILE fname3$ SETPOS 0
FOR t=1 TO 200
    FILE fname3$ READLINE temp$
    a$ &= temp$&""
NEXT t

BROWSER b$ AT 0,0 SIZE SW,SH
browser b$ hide
BROWSER b$ TEXT a$
BROWSER b$ SHOW
DRAW COLOR 0,0,0
button "quit" text "Q" at 990,10 size 24,30

LOOP:
if button_pressed("quit") then
  browser 1 delete
  a$ = ""
  temp$ = ""
  text
  end
end if
GOTO LOOP

rbytes · Post by **rbytes** » Fri Nov 25, 2016 7:16 pm

In the Test file, there is a code section to load each of three files - an HTML, a P5 code file, and another HTML. The loading is done via loops. If someone happens to create a code file with more lines than the loop is set to read, the code will not be read completely. It would be better to use this type of structure:

file fname2$ setpos 0
while not file_end (fname2$)
file fname2$ readline temp$
a$ &= temp$
endwhile

Then the program will always read exactly the number of lines in the file, no more and no less.

Operator · Post by **Operator** » Fri Nov 25, 2016 9:29 pm

Thx for the mini update..., makes the snippet
more quick and less dirty

In case you are still dealing withe the image
preload sample above... you must add the createCanvas() cmd./func. to set the canvas size, if omitted then default size will be 100x100...

rbytes · Post by **rbytes** » Fri Nov 25, 2016 9:54 pm

Thanks, Operator. I will make the change. I have a lot of P5 scripts working now. There is only one that won't run. I will post some of the working scripts, and also the one that won't run. I'd appreciate it if you would test it.

Also I am working on a program to auto-convert code files by changing all comments to the format acceptable to smart Basic, and will post it this weekend.

I have had quite a lot of difficulty trying to copy example code from the P5.js site. Unless the Example file has an Edit button assigned, it is a very tedious process to select the code text. I have spent as long as 15 minutes clicking, holding and dragging just to get the Select All menu. Then when I finally have the code selected, no popup menu appears with the Copy option. I have reported this to the P5.js webmaster, and asked that all examples on the site be given either an Edit button or a Raw button so that the raw text can be copied quickly and efficiently. Meantime I am now using the Puffin browser on my iPad. It has a better way to select text, but is still not as easy as I'd like.

Support Forum / Форум поддержки

P5.js inside sBasic

Re: P5.js inside sBasic

Re: P5.js inside sBasic

Re: P5.js inside sBasic

Re: P5.js inside sBasic

Re: P5.js inside sBasic

Re: P5.js inside sBasic

Brownian motion

Suggested change to the Test File

Re: P5.js inside sBasic

Re: P5.js inside sBasic