NANY 2017 (https://www.donationcoder.com/forum/index.php?board=325.0) 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 Requirements | Latest 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 (https://docs.google.com/document/d/1fJ_M5Xyr6xWOhh6fq_W5Ufj-XMUdhuhJgyS0M8RFtNE/edit?usp=sharing)
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 (http://opalrb.org/)
- Possibly support for other browser with ES6 (Firefox)
- Console output on screen (errors and debug)
- Usability improvements
Screenshots
[ You are not allowed to view attachments ]
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
options.bgColor=0xE0F0F0
options.scalerMode="unitSquare"
const R=0.37*boardSize.height
const 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