Net Basic - a BASIC in PHP

[Lucidapogee]

I realized that Net Basic could generate graphics by printing HTML with SVG tags. I'm still figuring out how to use SVG and what's possible, but for now I went ahead and made some SVG examples.

To use SVG in Net Basic, first call the HTML command to break from the text output area.

5 PRINT "SVG sine wave"
10 HTML
20 PRINT "<svg width = '640' height = '480'>"
30 FOR i = 1 TO 360
40 PRINT "<rect x = '"; i / 360 * 320; "' y = '"; sin(i / 180 * 3.14) * 50 + 50; "' width = '1' height = '1' />"
50 NEXT i
60 PRINT "</svg>"

Program encoded URL: https://www.lucidapogee.com/netbasic/?listing=5%20PRINT%20%22SVG%20sine%20wave%22%0D%0A10%20HTML%0D%0A20%20PRINT%20%22%3Csvg%20width%20%3D%20%27640%27%20height%20%3D%20%27480%27%3E%22%0D%0A30%20FOR%20i%20%3D%201%20TO%20360%0D%0A40%20PRINT%20%22%3Crect%20x%20%3D%20%27%22%3B%20i%20%2F%20360%20%2A%20320%3B%20%22%27%20y%20%3D%20%27%22%3B%20sin%28i%20%2F%20180%20%2A%203.14%29%20%2A%2050%20%2B%2050%3B%20%22%27%20width%20%3D%20%271%27%20height%20%3D%20%271%27%20%2F%3E%22%0D%0A50%20NEXT%20i%0D%0A60%20PRINT%20%22%3C%2Fsvg%3E%22

1 REM https://rosettacode.org/wiki/Draw_a_sphere
5 PRINT "SVG sphere"
10 HTML
20 PRINT "<svg width = '640' height = '480'>"
30 LET j = 2
40 FOR i = 221 TO 0 STEP j * -1
50 FOR k = -3.14 TO 3.14 STEP .02
60 PRINT "<rect x = '"; 221 + i * sin(k); "' y = '"; 222 + 221 * cos(k); "' width = '1' height = '1' />"
70 PRINT "<rect x = '"; 221 + 221 * sin(k); "' y = '"; 222 + (i - 1) * cos(k); "' width = '1' height = '1' />"
80 NEXT k
90 LET j = j + 1
100 NEXT i

Program encoded URL: https://www.lucidapogee.com/netbasic/?listing=1%20REM%20https%3A%2F%2Frosettacode.org%2Fwiki%2FDraw_a_sphere%0D%0A5%20PRINT%20%22SVG%20sphere%22%0D%0A10%20HTML%0D%0A20%20PRINT%20%22%3Csvg%20width%20%3D%20%27640%27%20height%20%3D%20%27480%27%3E%22%0D%0A30%20LET%20j%20%3D%202%0D%0A40%20FOR%20i%20%3D%20221%20TO%200%20STEP%20j%20%2A%20-1%0D%0A50%20FOR%20k%20%3D%20-3.14%20TO%203.14%20STEP%20.02%0D%0A60%20PRINT%20%22%3Crect%20x%20%3D%20%27%22%3B%20221%20%2B%20i%20%2A%20sin%28k%29%3B%20%22%27%20y%20%3D%20%27%22%3B%20222%20%2B%20221%20%2A%20cos%28k%29%3B%20%22%27%20width%20%3D%20%271%27%20height%20%3D%20%271%27%20%2F%3E%22%0D%0A70%20PRINT%20%22%3Crect%20x%20%3D%20%27%22%3B%20221%20%2B%20221%20%2A%20sin%28k%29%3B%20%22%27%20y%20%3D%20%27%22%3B%20222%20%2B%20%28i%20-%201%29%20%2A%20cos%28k%29%3B%20%22%27%20width%20%3D%20%271%27%20height%20%3D%20%271%27%20%2F%3E%22%0D%0A80%20NEXT%20k%0D%0A90%20LET%20j%20%3D%20j%20%2B%201%0D%0A100%20NEXT%20i%0D%0A

1 REM https://rosettacode.org/wiki/Barnsley_fern
5 PRINT "SVG Barnsley fern"
10 HTML
20 PRINT "<svg width = '640' height = '480' style = 'background-color:red;'>"
30 FOR i = 1 TO 10000
40 LET r = RND
50 IF NOT(r > 0 AND r < .01) THEN 80
60 LET x = .0
70 LET y = .16 * y
80 IF NOT(r > .01 AND r < .08) THEN 110
90 LET x = .22 * x - .26 * y
100 LET y = -.23 * x + .22 * y + 1.6
110 IF NOT(r > .075 AND r < .15) THEN 140
120 LET x = .15 * x + .28 * y
130 LET y = -.29 * x + .24 * y + .44
140 LET x = .85 * x + .04 * y
150 LET y = -.04 * x + .85 * y + 1.6
160 LET x1 = (x + 3) * 70
170 LET y1 = 700 - y * 70
180 PRINT "<rect x = '"; x1; "' y = '"; y1; "' width = '1' height = '1' fill = 'green' />"
190 NEXT i
200 PRINT "</svg>"

Program encoded URL: https://www.lucidapogee.com/netbasic/?listing=1%20REM%20https%3A%2F%2Frosettacode.org%2Fwiki%2FBarnsley_fern%0D%0A5%20PRINT%20%22SVG%20Barnsley%20fern%22%0D%0A10%20HTML%0D%0A20%20PRINT%20%22%3Csvg%20width%20%3D%20%27640%27%20height%20%3D%20%27480%27%20style%20%3D%20%27background-color%3Ared%3B%27%3E%22%0D%0A30%20FOR%20i%20%3D%201%20TO%2010000%0D%0A40%20LET%20r%20%3D%20RND%0D%0A50%20IF%20NOT%28r%20%3E%200%20AND%20r%20%3C%20.01%29%20THEN%2080%0D%0A60%20LET%20x%20%3D%20.0%0D%0A70%20LET%20y%20%3D%20.16%20%2A%20y%0D%0A80%20IF%20NOT%28r%20%3E%20.01%20AND%20r%20%3C%20.08%29%20THEN%20110%0D%0A90%20LET%20x%20%3D%20.22%20%2A%20x%20-%20.26%20%2A%20y%0D%0A100%20LET%20y%20%3D%20-.23%20%2A%20x%20%2B%20.22%20%2A%20y%20%2B%201.6%0D%0A110%20IF%20NOT%28r%20%3E%20.075%20AND%20r%20%3C%20.15%29%20THEN%20140%0D%0A120%20LET%20x%20%3D%20.15%20%2A%20x%20%2B%20.28%20%2A%20y%0D%0A130%20LET%20y%20%3D%20-.29%20%2A%20x%20%2B%20.24%20%2A%20y%20%2B%20.44%0D%0A140%20LET%20x%20%3D%20.85%20%2A%20x%20%2B%20.04%20%2A%20y%0D%0A150%20LET%20y%20%3D%20-.04%20%2A%20x%20%2B%20.85%20%2A%20y%20%2B%201.6%0D%0A160%20LET%20x1%20%3D%20%28x%20%2B%203%29%20%2A%2070%0D%0A170%20LET%20y1%20%3D%20700%20-%20y%20%2A%2070%0D%0A180%20PRINT%20%22%3Crect%20x%20%3D%20%27%22%3B%20x1%3B%20%22%27%20y%20%3D%20%27%22%3B%20y1%3B%20%22%27%20width%20%3D%20%271%27%20height%20%3D%20%271%27%20fill%20%3D%20%27green%27%20%2F%3E%22%0D%0A190%20NEXT%20i%0D%0A200%20PRINT%20%22%3C%2Fsvg%3E%22

1 REM https://rosettacode.org/wiki/Archimedean_spiral
5 PRINT "SVG Archimedean spiral"
10 HTML
20 PRINT "<svg width = '640' height = '480'>"
30 LET size = 80
40 LET x = 250
50 LET y = 200
60 LET a = 1.5
70 LET b = .7
80 FOR t = 0 TO size * PI STEP .1
90 LET r = a + b * t
100 PRINT "<rect x = '"; r * cos(t) + x; "' y = '"; r * sin(t) + y; "' width = '1' height = '1' />"
110 NEXT t
120 PRINT "</svg>"

Program encoded URL: https://www.lucidapogee.com/netbasic/?listing=1%20REM%20https%3A%2F%2Frosettacode.org%2Fwiki%2FArchimedean_spiral%0D%0A5%20PRINT%20%22SVG%20Archimedean%20spiral%22%0D%0A10%20HTML%0D%0A20%20PRINT%20%22%3Csvg%20width%20%3D%20%27640%27%20height%20%3D%20%27480%27%3E%22%0D%0A30%20LET%20size%20%3D%2080%0D%0A40%20LET%20x%20%3D%20250%0D%0A50%20LET%20y%20%3D%20200%0D%0A60%20LET%20a%20%3D%201.5%0D%0A70%20LET%20b%20%3D%20.7%0D%0A80%20FOR%20t%20%3D%200%20TO%20size%20%2A%20PI%20STEP%20.1%0D%0A90%20LET%20r%20%3D%20a%20%2B%20b%20%2A%20t%0D%0A100%20PRINT%20%22%3Crect%20x%20%3D%20%27%22%3B%20r%20%2A%20cos%28t%29%20%2B%20x%3B%20%22%27%20y%20%3D%20%27%22%3B%20r%20%2A%20sin%28t%29%20%2B%20y%3B%20%22%27%20width%20%3D%20%271%27%20height%20%3D%20%271%27%20%2F%3E%22%0D%0A110%20NEXT%20t%0D%0A120%20PRINT%20%22%3C%2Fsvg%3E%22

5 PRINT "SVG curlicue"
10 HTML
20 PRINT "<svg width = '640' height = '480'>"
30 FOR f = 0 TO 1000 STEP .1
40 LET x = x + SIN(f * f)
50 LET y = y + COS(f * f)
60 PRINT "<rect x = '"; x; "' y = '"; y; "' width = '1' height = '1' />"
70 NEXT f
80 PRINT "</svg>"

Program encoded URL: https://www.lucidapogee.com/netbasic/?listing=5%20PRINT%20%22SVG%20curlicue%22%0D%0A10%20HTML%0D%0A20%20PRINT%20%22%3Csvg%20width%20%3D%20%27640%27%20height%20%3D%20%27480%27%3E%22%0D%0A30%20FOR%20f%20%3D%200%20TO%201000%20STEP%20.1%0D%0A40%20LET%20x%20%3D%20x%20%2B%20SIN%28f%20%2A%20f%29%0D%0A50%20LET%20y%20%3D%20y%20%2B%20COS%28f%20%2A%20f%29%0D%0A60%20PRINT%20%22%3Crect%20x%20%3D%20%27%22%3B%20x%3B%20%22%27%20y%20%3D%20%27%22%3B%20y%3B%20%22%27%20width%20%3D%20%271%27%20height%20%3D%20%271%27%20%2F%3E%22%0D%0A70%20NEXT%20f%0D%0A80%20PRINT%20%22%3C%2Fsvg%3E%22

[CharlieJV]

So it looks like you could implement common BASIC graphics statements, and implement them as "SVG-generating" code behind the scenes.

I'm thinking. 

Regardless, cool.

[Lucidapogee]

Good idea. To do that, I would have to make the SCREEN command create images based on the resolutions. Then maybe add a _SCREEN command to allow custom sizes or something.

This way all output is part of the svg until a SCREEN 0 is called and that puts the closing svg tag.

Or something like that.