DonationCoder.com Software > N.A.N.Y. 2017

NANY 2017 Release: SLogo - turtle graphics in the browser

(1/2) > >>

TPReal:
NANY 2017 Entry Information
Application Name SLogo Version 0.1.2 Short Description Turtle graphics in the browser with WebGL Web Page http://tpreal.tk/slogo System RequirementsLatest version of Google Chrome (didn't test on any other browser)Author TPReal

Description
SLogo is a turtle graphics program working in the browser.

Documentation

Features

* Executes JavaScript scripts
* Uses WebGL to display image on HTML5 canvas
* Draws lines and triangles
* Supports color gradients...and this is basically it. User creativity is required to make anything useful with the tools.

Planned Features

* Animations
* Drawing filled in polygons (with automatic triangulation)
* Support for general 2D transformations (will allow e.g. drawing an ellipsis easily)
* Support for writing script in Ruby using Opal
* Possibly support for other browser with ES6 (Firefox)
* Console output on screen (errors and debug)
* Usability improvements
Screenshots
NANY 2017 Release: SLogo - turtle graphics in the browser

Usage
Using the Application
Go to http://tpreal.tk/slogo, write your script in the code box and press F9 to run. Press Ctrl+Enter to run the selected part of the code, or the current line.
Alternatively write a short script in the line at the bottom of the screen and press Enter. Up and Down arrows browse history.

Script to produce the graphics as on the screenshot (updated):
Spoiler
--- Code: Javascript ---options.bgColor=0xE0F0F0options.scalerMode="unitSquare" const R=0.37*boardSize.heightconst u=R/120; const fracColor=frac=>{  const comp=frac=>(1+Math.sin(2*Math.PI*frac))/2  return createColor(    comp(frac),comp(frac+1/3),comp(frac-1/3))} up()col(0x206060);dot()b(R);r(90)rep(60,({count,frac})=>{  col(fracColor(frac))  br(()=>{    r(90);f(5*u)    const r2=2*u    br(()=>{      f(r2);r(90);down()      rep(12,({count})=>{        f(2*Math.PI*r2/count);r(360/count)      })    })    f(5*u)    tri(v=>{      br(()=>{f(25*u);v()})      br(()=>{r(90);f(12*u);v()})      br(()=>{l(90);f(12*u);z(1);col(0x000000);v()})    })  })  br(()=>{l(90);f(5*u);r(30);down(()=>f(105*u))})  const arcLen=2*Math.PI*R/count  down(()=>{    f(Math.PI*R/count);l(360/count);f(Math.PI*R/count)  })})

Tips
Pressing F9 stores current script in localStorage. When refreshing the page, it is loaded again (but without undo history).
Manual is missing, but many features are used in the example code. Some explanations:

* branch(func) or br(func) executes func, and then restores cursor state from before executing it
* z(value) sets z-index of the cursor, must be between -1 and 1
* triangle(func(v)) or tri(func(v)) draws a triangle; func is expected to call its argument v() when the cursor is at consecutive vertices; also current color is taken into account and the triangle has gradient color
* line(func(v)) draws a line which supports gradient, just like triangle (normal f(length) line has no gradient, just current color)
* Pro tip: z-index is also gradiented in triangles and lines, so if a vertex has z-index outside of the -1..1 range, the triangle will be clipped accordingly
Known Issues

* Documentation is rather basic
* Interface is not very polished
* Compile and run errors, as well as logged information, only appears on the browser console and in alert
* Compile error doesn't have line information

mouser:
Neat  :Thmbsup:

I think it would be nice if there was an easy way from the main page to load in a few sample scripts to start with.

mouser:
Also, im encountering a bug with editing a script.
I pasted a script from the manual, ran it with F9, worked great.

But then if I click the cursor somewhere in a script to edit it, I noticed that what I type gets inserted someplace OTHER than where the cursor is, making editing impossible.

TPReal:
The bug is very strange. I'm using ace editor and not hacking it too much. Do you have this problem also when you start writing script from scratch? Do you use Chrome? Do you have non-standard zoom? I cannot reproduce this problem.

I wanted to add some quick start track on the page but I might not have time to do this :( There is a lot of stuff I wanted to add (and will add eventually, I hope), but looks like I failed to prioritise them correctly.

mouser:
I'm using chrome, just standard 100% zoom.
If I start with a blank script, I can see the cursor moving too far to the right as I type:


Just tried with FF and get an error:


Tried with IE and get blank pge.

Navigation

[0] Message Index

[#] Next page