Home | Blog | Software | Reviews and Features | Forum | Help | Donate | About us
topbanner_forum
  *

avatar image

Welcome, Guest. Please login or register.
Did you miss your activation email?

Login with username, password and session length
  • March 23, 2017, 01:23:40 PM
  • Proudly celebrating 10 years online.
  • Donate now to become a lifetime supporting member of the site and get a non-expiring license key for all of our programs.
  • donate

Author Topic: NANY 2017 Release: SLogo - turtle graphics in the browser  (Read 1091 times)

TPReal

  • Honorary Member
  • Joined in 2006
  • **
  • Posts: 126
    • View Profile
    • Donate to Member
NANY 2017 Release: SLogo - turtle graphics in the browser
« on: December 13, 2016, 04:27:31 PM »
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
slogo.pngNANY 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 [Select]
  1. options.bgColor=0xE0F0F0
  2. options.scalerMode="unitSquare"
  3.  
  4. const R=0.37*boardSize.height
  5. const u=R/120;
  6.  
  7. const fracColor=frac=>{
  8.   const comp=frac=>(1+Math.sin(2*Math.PI*frac))/2
  9.   return createColor(
  10.     comp(frac),comp(frac+1/3),comp(frac-1/3))
  11. }
  12.  
  13. up()
  14. col(0x206060);dot()
  15. b(R);r(90)
  16. rep(60,({count,frac})=>{
  17.   col(fracColor(frac))
  18.   br(()=>{
  19.     r(90);f(5*u)
  20.     const r2=2*u
  21.     br(()=>{
  22.       f(r2);r(90);down()
  23.       rep(12,({count})=>{
  24.         f(2*Math.PI*r2/count);r(360/count)
  25.       })
  26.     })
  27.     f(5*u)
  28.     tri(v=>{
  29.       br(()=>{f(25*u);v()})
  30.       br(()=>{r(90);f(12*u);v()})
  31.       br(()=>{l(90);f(12*u);z(1);col(0x000000);v()})
  32.     })
  33.   })
  34.   br(()=>{l(90);f(5*u);r(30);down(()=>f(105*u))})
  35.   const arcLen=2*Math.PI*R/count
  36.   down(()=>{
  37.     f(Math.PI*R/count);l(360/count);f(Math.PI*R/count)
  38.   })
  39. })


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
« Last Edit: January 01, 2017, 01:06:19 PM by TPReal »

mouser

  • First Author
  • Administrator
  • Joined in 2005
  • *****
  • Posts: 36,798
    • View Profile
    • Mouser's Software Zone on DonationCoder.com
    • Read more about this member.
    • Donate to Member
Re: NANY 2017: SLogo - turtle graphics in the browser
« Reply #1 on: December 30, 2016, 03:09:10 AM »
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

  • First Author
  • Administrator
  • Joined in 2005
  • *****
  • Posts: 36,798
    • View Profile
    • Mouser's Software Zone on DonationCoder.com
    • Read more about this member.
    • Donate to Member
Re: NANY 2017: SLogo - turtle graphics in the browser
« Reply #2 on: December 30, 2016, 03:12:37 AM »
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

  • Honorary Member
  • Joined in 2006
  • **
  • Posts: 126
    • View Profile
    • Donate to Member
Re: NANY 2017: SLogo - turtle graphics in the browser
« Reply #3 on: December 30, 2016, 04:41:53 AM »
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

  • First Author
  • Administrator
  • Joined in 2005
  • *****
  • Posts: 36,798
    • View Profile
    • Mouser's Software Zone on DonationCoder.com
    • Read more about this member.
    • Donate to Member
Re: NANY 2017: SLogo - turtle graphics in the browser
« Reply #4 on: December 30, 2016, 04:51:30 AM »
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:
Screenshot - 12_30_2016 , 4_53_10 AM.png

Just tried with FF and get an error:
Screenshot - 12_30_2016 , 4_50_52 AM.png

Tried with IE and get blank pge.

TPReal

  • Honorary Member
  • Joined in 2006
  • **
  • Posts: 126
    • View Profile
    • Donate to Member
Re: NANY 2017: SLogo - turtle graphics in the browser
« Reply #5 on: December 30, 2016, 06:20:13 AM »
Seems related to font that you use, or maybe you don't have Monaco font on your system that I think I try to use. Definitely a bug.

As for other browsers, will try to make it work at least on Firefox, but not so soon, I'm afraid. Also I think they have a bug related to for loops.

TPReal

  • Honorary Member
  • Joined in 2006
  • **
  • Posts: 126
    • View Profile
    • Donate to Member
Re: NANY 2017 Release: SLogo - turtle graphics in the browser
« Reply #6 on: January 02, 2017, 11:01:41 AM »
OK, I think I fixed the font issue.

mouser

  • First Author
  • Administrator
  • Joined in 2005
  • *****
  • Posts: 36,798
    • View Profile
    • Mouser's Software Zone on DonationCoder.com
    • Read more about this member.
    • Donate to Member
Re: NANY 2017 Release: SLogo - turtle graphics in the browser
« Reply #7 on: January 02, 2017, 11:23:12 AM »
Quote
OK, I think I fixed the font issue.

you fixed it! very nice, now i can edit scripts properly.  :up:

BGM

  • Honorary Member
  • Joined in 2008
  • **
  • Posts: 197
    • View Profile
    • Read more about this member.
    • Donate to Member
Re: NANY 2017 Release: SLogo - turtle graphics in the browser
« Reply #8 on: January 03, 2017, 09:03:57 AM »
I visited the link, http://tpreal.tk/slogo  but I get this error (sorry!):

Initialisation error: SessionManager is not defined
-bgmCoder

TPReal

  • Honorary Member
  • Joined in 2006
  • **
  • Posts: 126
    • View Profile
    • Donate to Member
Re: NANY 2017 Release: SLogo - turtle graphics in the browser
« Reply #9 on: January 03, 2017, 01:31:50 PM »
Do you use latest version of Chrome?
Could you please open the browser console and see what is the error there?