Leopard: Edit Scratch projects as JavaScript code

NFlex23

PullJosh wrote:
WalleBee wrote:
3D projects dont work
Could you please link to some broken projects so that I can take a look?

They actually do work for some, like simple 3d wireframes

Last edited by NFlex23 (July 9, 2020 18:59:57)

Sheep_maker

-Rex- wrote:
If so, I assume
a = {};
a.a = a;
would produce a watcher with a “…”?

What about Maps and Sets and everything else on this page?

Maybe the watchers could show objects as a two-column list with keys and values on either side. Maybe for Sets and Maps, it could intelligently detect iterable values (eg `typeof value[Symbol.iterator] === ‘function’`) and show them as a list?

theXliner

Wait, we're working on the variable GUI now?

-Rex-

Sheep_maker wrote:
-Rex- wrote:
If so, I assume
a = {};
a.a = a;
would produce a watcher with a “…”?

What about Maps and Sets and everything else on this page?
Maybe the watchers could show objects as a two-column list with keys and values on either side. Maybe for Sets and Maps, it could intelligently detect iterable values (eg `typeof value[Symbol.iterator] === ‘function’`) and show them as a list?

That’s the obvious solution for displaying objects, but it doesn’t cover more specific details. I’m thinking objects within objects could be displayed recursively to a limited depth to increase performance.

Hopefully there is at least some kind of default behavior (that actually displays information) if a program doesn’t define a new function.

-Rex-

Also, would it be possible for a function to create an interactive watcher (similar to Chrome dev tools)?

PullJosh

Good news! Variable watchers work now!

Another day, another update.

Variables and lists now appear on-screen just as they do in Scratch.

-Rex- wrote:
PullJosh wrote:
Any JavaScript expression, computed any way you want, can be displayed in a watcher.
Will there also be default functions for each of Javascript's data types? […] What about Maps and Sets and everything else on this page?

Arrays are the only data type that currently get special treatment. Everything else is simply converted to a string. (Objects will appear as [object Object] in the watcher. I can probably make the stringification more clever in a future update. For now, you can improve this manually by watching JSON.stringify(yourObject) instead.)

Sheep_maker wrote:
Maybe the watchers could show objects as a two-column list with keys and values on either side. Maybe for Sets and Maps, it could intelligently detect iterable values (eg `typeof value[Symbol.iterator] === ‘function’`) and show them as a list?

I can totally imagine creating better visualizations for a variety of data structures in the future. For now, I'm going to publish what I have so that people can start using it.

theXliner wrote:
Wait, we're working on the variable GUI now?

We're done with that now!

-Rex- wrote:
Also, would it be possible for a function to create an interactive watcher (similar to Chrome dev tools)?

You can already customize the behavior of the slider, which is the tiny version of this. Building more complex variable UIs seems possible, but quite difficult.

Bonus Features
In addition to showing and hiding variables, you can modify lots of other properties on the fly. Here's how:

this.watchers.myVariable.visible = true; // Show/hide
this.watchers.myVariable.label = "My Snazzy Variable"; // Rename watcher -- doesn't need to match variable name!
this.watchers.myVariable.color = Color.hsv(0, 100, 100); // Set watcher color directly
this.watchers.myVariable.color.h += 10; // Modify existing color
this.watchers.myVariable.x = 100; // Set x/y position (top left corner of watcher, measured in Scratch coordinates -- 0 is the center)
this.watchers.myVariable.width = 200; // Set fixed width/height (or set to undefined for automatic sizing in either dimension)
this.watchers.myVariable.style = "large"; // Switch between "normal", "large", and "slider"
this.watchers.myVariable.min = 50; // Set slider min/max values
this.watchers.myVariable.step = 10; // Set precision of slider (in this case, snaps to nearest multiple of 10)

Maximouse

PullJosh wrote:

Bonus Features
In addition to showing and hiding variables, you can modify lots of other properties on the fly. Here's how:

this.watchers.myVariable.visible = true; // Show/hide
this.watchers.myVariable.label = "My Snazzy Variable"; // Rename watcher -- doesn't need to match variable name!
this.watchers.myVariable.color = Color.hsv(0, 100, 100); // Set watcher color directly
this.watchers.myVariable.color.h += 10; // Modify existing color
this.watchers.myVariable.x = 100; // Set x/y position (top left corner of watcher, measured in Scratch coordinates -- 0 is the center)
this.watchers.myVariable.width = 200; // Set fixed width/height (or set to undefined for automatic sizing in either dimension)
this.watchers.myVariable.style = "large"; // Switch between "normal", "large", and "slider"
this.watchers.myVariable.min = 50; // Set slider min/max values
this.watchers.myVariable.step = 10; // Set precision of slider (in this case, snaps to nearest multiple of 10)

That's great! Looks like Leopard will be the “thing to try after Scratch” soon.

Jeffalo

Maximouse wrote:

PullJosh wrote:

Bonus Features
In addition to showing and hiding variables, you can modify lots of other properties on the fly. Here's how:

this.watchers.myVariable.visible = true; // Show/hide
this.watchers.myVariable.label = "My Snazzy Variable"; // Rename watcher -- doesn't need to match variable name!
this.watchers.myVariable.color = Color.hsv(0, 100, 100); // Set watcher color directly
this.watchers.myVariable.color.h += 10; // Modify existing color
this.watchers.myVariable.x = 100; // Set x/y position (top left corner of watcher, measured in Scratch coordinates -- 0 is the center)
this.watchers.myVariable.width = 200; // Set fixed width/height (or set to undefined for automatic sizing in either dimension)
this.watchers.myVariable.style = "large"; // Switch between "normal", "large", and "slider"
this.watchers.myVariable.min = 50; // Set slider min/max values
this.watchers.myVariable.step = 10; // Set precision of slider (in this case, snaps to nearest multiple of 10)

That's great! Looks like Leopard will be the “thing to try after Scratch” soon.

it pretty much already is in my books!

i have so many ideas!!!!!

theXliner

Hmm, I may not be able to convert thee scratch projects into pygame, but I probably can work on the parsing of sbJSON (That's what I call the ugly JSON the projects give you). My not-even-done work is available on GitHub (I made it public) here

theXliner

theXliner wrote:
Oh yeah! One more thing:
(username)
Could equal to
PullJosh
or
User

I had a suggestion.

theXliner

I found a bug…
https://scratch.mit.edu/projects/404460394/ (This is one of my projects)
NUMBER 1: The intro is crazily faster
NUMBER 2: The key detection is glitchier. (Type in ‘the test’, everything after space is off, it disappears)

Try it on Leopard: https://leopardjs.now.sh/?id=404460394
Try it on scratch: https://scratch.mit.edu/projects/404460394/

Last edited by theXliner (July 10, 2020 17:48:35)

theXliner

Also, My driving engine vs
The unrealistic, way faster, leopard version

Does leopard do pen?

PullJosh

theXliner wrote:
Also, My driving engine vs
The unrealistic, way faster, leopard version

30fps projects are next on the docket. I'm planning to make framerate a configuration option for the project. Hopefully it's doable!

theXliner wrote:
Does leopard do pen?

It should!

Not sure why the speedometer looks funky in Leopard. I'll investigate when I get the chance.

PullJosh

theXliner wrote:
theXliner wrote:
Oh yeah! One more thing:
(username)
Could equal to
PullJosh
or
User
I had a suggestion.

What problem does this solve?

Boomer001

PullJosh wrote:
theXliner wrote:
Also, My driving engine vs
The unrealistic, way faster, leopard version
30fps projects are next on the docket. I'm planning to make framerate a configuration option for the project. Hopefully it's doable!

Sure!

// This code below needs to be somewhere at the top of your code
fps = 1000 / 30; // Replace the 30 with any value you want for the FPS!
then = Date.now();
// This code below needs to be in the requestAnimationFrame (step) code
now = Date.now();
elapsed = now - then;
if (elapsed > fps) {
then = now - (elapsed % fps);
// YOUR CODE HERE
};

Last edited by Boomer001 (July 10, 2020 19:24:24)

PullJosh

Projects now run at 30fps by default (the same as Scratch)!
You can still opt-in to 60fps by changing the frameRate option in index.js.

This will ensure that more projects run the same way they do on Scratch. And if you prefer a smoother project, it's easy to make that change yourself!

(This update was not as challenging as I expected.)

theXliner

PullJosh wrote:
Projects now run at 30fps by default (the same as Scratch)!
You can still opt-in to 60fps by changing the frameRate option in index.js.

This will ensure that more projects run the same way they do on Scratch. And if you prefer a smoother project, it's easy to make that change yourself!

(This update was not as challenging as I expected.)

Nice! (I'm kinda happy I contributed )

Last edited by theXliner (July 10, 2020 20:50:48)

SausageMcSauce

I tried my project ‘Japanese Food Simulator’ (my latest project). However, the only thing that did not work was the game ending when the ‘lives’ variable reaches 0, causing it to go into negative values.

I think it is because the stop all block has not been implemented in Leopard yet.

Jeffalo

PullJosh wrote:
Projects now run at 30fps by default (the same as Scratch)!
You can still opt-in to 60fps by changing the frameRate option in index.js.

This will ensure that more projects run the same way they do on Scratch. And if you prefer a smoother project, it's easy to make that change yourself!

(This update was not as challenging as I expected.)

awesome! i think that fixed https://leopardjs.now.sh/?id=322002554

edit:
it's still kinda broken

firstly the array watcher counts from 0 which makes sense in javascript but seems a bit odd for scratch
secondly sometimes pressing play will cause the buttons to slide too far away
and thirdly my charatcer disapears when i start any level not in the make mode

edit edit
fourthly level codes behave really differently for some reason (its really wack)

edit edit edit:
fifthly saving and loading in make mode causes some really weird things (undefined inside the code) and crashed the chrome tab i was on

really wack

but plake is a huge project and i didn't really expect it to work because it pratically just barely works in things like forkphorus

really cool work on leopard so far though i can't wait to see how this'll be in the future

Last edited by Jeffalo (July 11, 2020 12:04:12)

Devin_Scratch

Leopard seems so cool but the only thing i can get to work is the example and not even a simple test that i made to try it even when i press edit as js

when I try to use Leopard :: hat events
(It doesn't work :: sensing)and<I get triggered :: stack> ::stack
if<I am mad> :: control
Rage
Then not really because i'm not a rager :: motion

Discuss Scratch