Code Monkey home page Code Monkey logo

jslogo's Issues

Make savehook less hacky

Instead of passing it to LogoInterpreter constructor, allow assigning ondefine property to instance.

Consider drawing units

The default pen width and units of length feel more fine-grained than makes sense to me. For example FD 10 draws a line shorter than the turtle itself.

Show the turtle moving

This is tricky since the Logo procedures are compiled to JavaScript functions, and JavaScript (as of ES5) can't yield/sleep to let the display update.

Several approaches are possible:

  • Move execution to a Worker, which posts turtle commands to the Window - implemented as async.htm
  • As above, but "sleep" to slow down the animation - implemented as async_yield.htm; uses a synchronous XMLHttpRequest to a non-existent URL to implement a poor-man's sleep from the Worker
  • Run synchronously in the Window context, but queue up turtle commands and play them back slowly

All of the above suffer from not working well with interactivity i.e. popping up an alert or prompt in the middle of execution (which is supported by JavaScript in the browser).

More radical approaches:

  • Abandon the notion of compiling directly to JS functions and instead use setTimeout() to make execution yield. This would dramatically increase the complexity of the implementation. (I use this approach in my BASIC-in-JavaScript implementation.)
  • Use ES6 generators (yield) to implement coroutines. Not supported outside of FireFox yet, and requires every function to be a generator.
  • Push for synchronous message passing APIs in Workers

UI: Make the textarea expanded by default

In order to facilitate program sharing is it possible to have the textarea expanded by default? Some people won't see the expansion icon and they'll get errors when pasting programs on one line.

Otherwise is it possible to have a #expanded extension/anchor of the URL that if present will automatically expand the textarea?

Problem: i18n: translate Logo's command to Polish

Hello,

I want translate Logo's command to Polish language in JsLogo, but I have problem with Polish characters ( ążćńół ), example forward in Polish means naprzód. I replace forward in jslogo and I get error that this command is incorrect in jslogo. I'm afraid that it's caused by the fact that JavaScript encodes incorrectly characters.

Is way to fix it?

Thanks

Implement File Access (and a VFS)

  • setprefix
  • prefix
  • openread
  • openwrite
  • openappend
  • openupdate
  • close
  • allopen
  • closeall
  • erasefile
  • dribble
  • nodribble
  • setread
  • setwrite
  • reader
  • writer
  • setreadpos
  • setwritepos
  • readpos
  • writepos
  • eofp
  • filep

Typo

There is a typo in line 1693 of logo.js

Andy

Implement arrays

  • array
  • mdarray
  • listtoarray
  • arraytolist
  • item
  • mditem
  • setitem
  • mdsetitem
  • .setitem
  • arrayp

Include turtle instructions

The turtle operations don't seem to be documented in Reference at all. I think a page specifically for those instructions would be useful, ideally with images. Examples:

FD 100
RT 90 ; maybe display [FD 20 RT 90] so that you get a sense of where it was pointing and where it ended up?
LT 45
BK 100
SETCOLOR "BLUE ; display [SETCOLOR "BLUE FD 100]
PENWIDTH 5 ; with FD displayed

There's probably some drawing commands I'm missing. I've been doing some turtle drawing with my daughter, and this would be helpful. Showing a diagram of degrees might also be helpful (with 30, 45, 60, and 90 being specifically interesting). Also units of length.

any simple way to embed and use it?

If one would like to just use the logo scripts without other integration like togetherjs or codemirror, how does one do that without reverse-engineering a good chunk of your code?
Example pls.

Cursor problem with FORWARD command

When I type the command "forward" or "fd" then space the cursor goes back to the beginning of the word "forward".

All other commands that I have tried work ok.

I have my www folder:

/jslogo
/CodeMirror
/polyfill

I tried 2 separate web servers

Implement FILL

Need a flood-fill implementation that works well with antialiased lines.

Make canvas a WebGL surface, add 3D rotation primitives

"it would be cool if" you could rotate the turtle out of the plane and suddenly it's drawing a line towards you.

This would nifty if the turtle was constrained to a 3D cuboid (vs. a 2D rectangle), but perspective allowed a "near" turtle's tracks to render outside of the canvas area, as if it was hovering above the web page.

Editor feedback

While not an in-depth effort, I spent about 30 minutes with a couple 9-year-olds. We made stars.

Some thoughts:

An iterative approach seemed best, expanding or adjusting the routine bit by bit. So the big editor worked better (instead of hitting up each time so we could edit/refine the last set of commands). Also an implied cs would have been nice (I put it in, but it's just boilerplate then). And cs doesn't reset the pencolor, which detracted a bit from the sense of reset.

Upper case input names fail

TO x :Y  print :Y END
x "foo

will get "Don't know about variable Y"

Fix should be to change line 934 from:

scope.set(inputs[i], {value: arguments[i]});

to:

scope.set(inputs[i].toLowerCase(), {value: arguments[i]});

Per comment on line 84, re: StringMap: "TODO: Allow case-sensitive and case-insensitive lookup ... Right now, callers must do case folding."

Make the turtle look like a turtle

While I personally appreciate the "spaceship from Asteroids" aesthetic, making the turtle look like a turtle might be more appealing for kids.

Most implementations seem to use an opaque box turtle - very round shell with stubby limbs, head and tail. I think this would make it difficult to distinguish the orientation and the position of the pen. Also, box turtles are slow and boring.

So how about a stylized outline of a sea turtle? Sea turtles are aerodynamic and cool.

Something like this but just an outline: http://www.clker.com/clipart-turtle-outline-3.html

Convert to "CPS"

Make procedure calls async. Simple procedures would be implemented via this transform:

// old
function sum(a, b) {
  return a + b;
}
function div(a, b) {
  if (b === 0)
    throw new Error("Division by zero");
  return a / b;
}

// new
function sum(_, a, b) {
  _(a + b);
}
function div(a, b) {
  if (b === 0)
    _(undefined, new Error("Division by zero");
  _(a / b);
}

Task list:

  • Sort out the continuation API - _(result, error) or _.result(r) and _.error(e) or ...?
  • Convert tests to be async - have assert_foo() push a promise onto a stack or something; shim interpreter.run() calls with a setTimeout() for now
  • Get the page working with shimmed async interpreter.run()
  • Push the shim into the interpreter itself
  • Have def() make all the built-in first-order functions async
  • Plumb continuations through evaluation functions
  • Tackle the higher order functions
  • Change any prompt() calls to use HTML UI instead of blocking browser UI
  • Add a timeout to drawing operations

Add button: delete history and delete procedures from library

It's add two links:

  • to delete history
  • to delete procedures from library

You can find them in 'Extras' after add code.

  1. In index.htm :

after code:

      <li><a id="savelibrary" href="#">Download Library</a>
      <li><a id="screenshot" href="#">Download Drawing</a>

add:

      <li><a id="deletehistory" href="#">Delete history</a>
      <li><a id="deletelibrary" href="#">Delete library</a> 
  1. In index.js :

a) after code:

var savehook;
var historyhook;

add:

var deletehistory;
var deletelibrary;

b) after code:

tx.objectStore('history').openCursor().onsuccess = function(e) {    ...    };

add:


    deletehistory = function() {
        var tx = db.transaction('history', 'readwrite').objectStore("history");
        tx.openCursor().onsuccess = function(event) {
            var cursor = event.target.result;
            if (cursor) {
                cursor.delete();
                cursor.continue();
            }
        };
    };

      deletelibrary = function() {
          var tx = db.transaction('procedures', 'readwrite').objectStore("procedures");
          tx.openCursor().onsuccess = function(event) {
              var cursor = event.target.result;
              if (cursor) {
                  cursor.delete();
                  cursor.continue();
              }
          };
      };

c) after code:

$('#screenshot').addEventListener('click', function() {    ...    };

add:


    $('#deletehistory').addEventListener('click', function() {
    var c = confirm("Are you sure?");
    if (c == true) {
        deletehistory();
        var div = document.getElementById('history');
        while(div.firstChild){
            div.removeChild(div.firstChild);
        }
    }
    });
    $('#deletelibrary').addEventListener('click', function() {
        var c = confirm("Are you sure?");
        if (c == true) {
            deletelibrary();
            var div = document.getElementById('library');
            while(div.firstChild){
                div.removeChild(div.firstChild);
            }
        }
    });

COPYDEF + savehook is broken for built-ins

The save hook tries to persist the definition of functions. Built-ins don't have serializable definitions, so trying to use the savehook from COPYDEF results in badness.

We probably need a new type of serialization for aliases.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.