Register a SA Forums Account here!
JOINING THE SA FORUMS WILL REMOVE THIS BIG AD, THE ANNOYING UNDERLINED ADS, AND STUPID INTERSTITIAL ADS!!!

You can: log in, read the tech support FAQ, or request your lost password. This dumb message (and those ads) will appear on every screen until you register! Get rid of this crap by registering your own SA Forums Account and joining roughly 150,000 Goons, for the one-time price of $9.95! We charge money because it costs us money per month for bills, and since we don't believe in showing ads to our users, we try to make the money back through forum registrations.
 
  • Post
  • Reply
Internet Janitor
May 17, 2008

"That isn't the appropriate trash receptacle."

Suspicious Dish posted:

Working on my next article. Wanted to have users type in their own code, so I wrote a tiny little editor + framework that won't freeze your browser.

https://giant.gfycat.com/SomeDistantBasilisk.webm

Do you avoid locking up the browser by inserting yields around control structures, or some different approach?

Adbot
ADBOT LOVES YOU

Suspicious Dish
Sep 24, 2011

2020 is the year of linux on the desktop, bro
Fun Shoe
I run the user code in a web worker and kill it if it hasn't responded to a message in 2 seconds.

Suspicious Dish
Sep 24, 2011

2020 is the year of linux on the desktop, bro
Fun Shoe
worked a bit more on the code editor. now i have a fancy slider thingy as well!

https://giant.gfycat.com/FlatShorttermCheetah.webm

initial version published at https://magcius.github.io/xplain/article/rast2.html if you wanna give me feedback

Cory Parsnipson
Nov 15, 2015
Holy crap, you're the X11 explained guy? You were on hacker news a few months ago. Sweet.

Sagacity
May 2, 2003
Hopefully my epitaph will be funnier than my custom title.
I've been working on a sprite multiplexer for the Commodore 64. It has eight hardware sprites by default. However, because the screen is built up from top to bottom you can deceive its video chip: Let's say we draw 8 sprites in the top half of the screen. If the electron beam of the display is halfway down the image you can then move the sprites to the bottom half of the screen and, as the video chip continues drawing, it will draw *these* eight sprites too! Well, do that with a bunch more elaborate timing (that's the color bars you see, they are for debugging purposes) and you get a 24 sprite multiplexer. Fun!

Luigi Thirty
Apr 30, 2006

Emergency confection port.

Cool! You could do something similar with the Amiga's hardware sprites - people figured out how to get the video chip to move them to the right in the middle of a scanline, letting you repeat a 64px background across the screen.

Newf
Feb 14, 2006
I appreciate hacky sack on a much deeper level than you.

Suspicious Dish posted:

I run the user code in a web worker and kill it if it hasn't responded to a message in 2 seconds.

It seems like things here are updating as you type. How are you responding to onChange events in the editor and handing things to the webworker? Is it just an 'eval' on the editor, which has no effect (eg, doesn't overwrite the previously existent 'coverage' function) when the editor is in states containing syntax errors?

I'm putting together a Turtle drawing environment for middle school students (I'm a teacher) where I'd like to have a side-by-side editor and canvas. Slightly complicated by the fact that I'd like to be writing in Typescript, so I'll need to be doing an in place transpile as well.

Suspicious Dish
Sep 24, 2011

2020 is the year of linux on the desktop, bro
Fun Shoe
Roughly, I have two web workers: the "current worker" and the "pending worker". When the user edits something, I spawn off a new worker from what the text has, and let it become the pending worker, terminating the previous pending worker. When I need a frame, I fire off a message to the current worker and the pending worker. When the pending worker returns me a frame, I set it as the new current worker. Otherwise, if it's been more than 2s since I sent it a message and it hasn't responded, I kill it.

So, all edits are speculatively run in a separate worker until it gives me back a result, at which point it gets upgraded to be the actual worker driving the demo.

Code here: https://github.com/magcius/xplain/blob/11d9a60a1a431285f6489e1a429a41ee46f65f00/src/article-demos/rast2.js#L201-L388

MrMoo
Sep 14, 2000

Suspicious Dish posted:

worked a bit more on the code editor. now i have a fancy slider thingy as well!

Ooh, looking closer to the previews by Bret Victor 👍

Suspicious Dish
Sep 24, 2011

2020 is the year of linux on the desktop, bro
Fun Shoe
Yep. Definitely inspired by his work, combined with the scrubber element from Houdini (see 1:18 of https://vimeo.com/113734396)

Luigi Thirty
Apr 30, 2006

Emergency confection port.

I converted Tyrian's ship graphics to Jaguar format and added a sprite bitmap layer to my program. They're available under a CC license now so I'm gonna figure out something cool to do with them.

Newf
Feb 14, 2006
I appreciate hacky sack on a much deeper level than you.

Suspicious Dish posted:

Roughly, I have two web workers: the "current worker" and the "pending worker". When the user edits something, I spawn off a new worker from what the text has, and let it become the pending worker, terminating the previous pending worker. When I need a frame, I fire off a message to the current worker and the pending worker. When the pending worker returns me a frame, I set it as the new current worker. Otherwise, if it's been more than 2s since I sent it a message and it hasn't responded, I kill it.

So, all edits are speculatively run in a separate worker until it gives me back a result, at which point it gets upgraded to be the actual worker driving the demo.

Code here: https://github.com/magcius/xplain/blob/11d9a60a1a431285f6489e1a429a41ee46f65f00/src/article-demos/rast2.js#L201-L388

I'm just looking into this now, but I'm not sure if this approach can work for me - the user code that I'm running needs access to the page's canvas element in order to do the drawing. Right now my workers are halting with "Uncaught ReferenceError: document is not defined" whenever it tries to construct a new Turtle. Any other suggestions that are safer / better than running an eval on the user code?

Suspicious Dish
Sep 24, 2011

2020 is the year of linux on the desktop, bro
Fun Shoe
Have your Turtle class simply record a collection of events, and then punt those back to the main thread, which renders them into the canvas. There's probably some trick you can use with Proxy to record/replay function calls.

Newf
Feb 14, 2006
I appreciate hacky sack on a much deeper level than you.

Suspicious Dish posted:

Have your Turtle class simply record a collection of events, and then punt those back to the main thread, which renders them into the canvas. There's probably some trick you can use with Proxy to record/replay function calls.

Yay - this is what I'm currently working on. Turtle movements (with the pen down) are generating a list of canvas stroke objects (initX, initY, finalX, finalY, penWidth, color) which can be passed back to the main thread and drawn by something there. This complicates my Turtle somewhat, as she'll need to do some environment checks on construction and when drawing in order to decide where this data is destined. Thanks for the input.

Suspicious Dish
Sep 24, 2011

2020 is the year of linux on the desktop, bro
Fun Shoe
Web Workers are in a completely different scope -- you can just use a different class called "Turtle" so you don't need to have the same one do both.

Newf
Feb 14, 2006
I appreciate hacky sack on a much deeper level than you.

Suspicious Dish posted:

Web Workers are in a completely different scope -- you can just use a different class called "Turtle" so you don't need to have the same one do both.

If you want me to stop harassing you, you'll have to stop being so helpful. Two more followups:

What did you use to take your own screengrab above? I'd like to "Post [a screenshot] of stuff I'm working on!"

Does data-passing to/from webworkers come with much overhead? Should I expect it to be fine if I'm asking for data in a requestAnimationFrame() loop? My students will be working on Lenovo N22 chromebooks - 4 gigs of ram, 1.6 Ghz dual core celeron.

Newf fucked around with this message at 18:51 on Oct 8, 2017

Tres Burritos
Sep 3, 2009

Newf posted:

Does data-passing to/from webworkers come with much overhead? Should I expect it to be fine if I'm asking for data in a requestAnimationFrame() loop? My students will be working on Lenovo N22 chromebooks - 4 gigs of ram, 1.6 Ghz dual core celeron.

Yes, but there are Transferrables that're supposed to be faster. Chrome is also surprisingly memory-leaky when transferring from webworkers, so look out for that.

MrMoo
Sep 14, 2000

Tres Burritos posted:

Yes, but there are Transferrables that're supposed to be faster. Chrome is also surprisingly memory-leaky when transferring from webworkers, so look out for that.

It's more likely garbage accrual as objects are being copied aplenty. The GC sweep will be quite harsh and delayed.


Newf posted:

Does data-passing to/from webworkers come with much overhead? Should I expect it to be fine if I'm asking for data in a requestAnimationFrame() loop? My students will be working on Lenovo N22 chromebooks - 4 gigs of ram, 1.6 Ghz dual core celeron.

It's pretty much the same as a websocket event, if that's good or bad. You should be looking at requestIdleCallback() for data collation and RAF for only the actual display update. 60fps is quite attainable from Chromebook to iPhone as long as the display hardware is actually capable of that, i.e. ChromeCasting is a bit difficult at the best of times.

Suspicious Dish
Sep 24, 2011

2020 is the year of linux on the desktop, bro
Fun Shoe

Newf posted:

If you want me to stop harassing you, you'll have to stop being so helpful. Two more followups:

What did you use to take your own screengrab above? I'd like to "Post [a screenshot] of stuff I'm working on!"

ShareX has a video record feature.

Newf posted:

Does data-passing to/from webworkers come with much overhead? Should I expect it to be fine if I'm asking for data in a requestAnimationFrame() loop? My students will be working on Lenovo N22 chromebooks - 4 gigs of ram, 1.6 Ghz dual core celeron.

Profile if it's a problem. I do it in my requestAnimationFrame loop as well. I should probably be using the transferrable thing. I've heard if you have a very fancy object you're sending, it's cheaper to JSON serialize / unserialize than use the structured clone algorithm.

Tres Burritos
Sep 3, 2009

MrMoo posted:

It's more likely garbage accrual as objects are being copied aplenty. The GC sweep will be quite harsh and delayed.

The bug I ran into a year-ish ago required you to send any message the main window got from a webworker back to that same webworker. If you didn't memory would just slowly accumulate until the tab crashed. Can't find the bug report right now, but it was some weird poo poo.

Newf
Feb 14, 2006
I appreciate hacky sack on a much deeper level than you.
A litttle distracted lately, but some progress this morning. Added the TS transpile step and a clone constructor that takes Turtles (and subclasses of Turtles) and spits out new ones with the same location/orientation/etc.



Try out:

JavaScript code:
// Type your code in here.

class TreeTurtle extends Turtle {
  polygon(sides: number, sideLength: number) {
    let count = 0;
    while (count < sides) {
      count++;
      this.move(sideLength);
      this.turnLeft(1 / sides);
    }
  }

  branch(length: number){
    if (length < 10){
      return;
    }

    this.penColor('brown');
    this.penWidth(length / 10);

    this.move(length / 2);
    this.turnRight(1/50);
    this.move(length / 2);

    let left = new TreeTurtle(this);
    left.turnLeft(about(1/8));
    left.branch(about(length * .75));

    let right = new TreeTurtle(this);
    right.turnRight(about(1/12));
    right.branch(about(length * .75));
  }
}

function about(n:number){
  return n * ( 1 - 0.1 * Math.random());
}

let t = new TreeTurtle();
t.penUp();
t.move(200);
t.penDown();
t.turnLeft(1/2);
t.branch(200);
at mrkennedy.ca/rln/.

... make sure your loops terminate. Let me know what's horribly broken.

Next on the list is to rig the child turtles of turtle X to simultaneously draw by default, rather than sequentially.

MrMoo
Sep 14, 2000

Wheee...



Had to rush out a patch yesterday or today's news would have been a bit different. IDC pushed out a new release that broke everything on the floor last night and they didn't want to rollback :chome:

FYI: between the first and second zero is a monitor bezel, 8 screens make up this display.

Suspicious Dish
Sep 24, 2011

2020 is the year of linux on the desktop, bro
Fun Shoe
Trying to figure out a way of doing "code is documentation". I don't like this... any ideas?

https://giant.gfycat.com/RepulsiveScaryCapybara.webm

Jewel
May 2, 2009

Suspicious Dish posted:

Trying to figure out a way of doing "code is documentation". I don't like this... any ideas?

Don't do multiple variables on one line, it's probably confusing for newer people and makes everything jump around when you do that. Other than that, I think maybe it could be fine.

Munkeymon
Aug 14, 2003

Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.



Jewel posted:

Don't do multiple variables on one line, it's probably confusing for newer people and makes everything jump around when you do that. Other than that, I think maybe it could be fine.

Disagree. I don't like it when fiddling with output changes the contents of the source buffer. Visual Studio ships with a browser extension that will synchronize CSS changes made in the browser debugger back to your source and vice versa, for example, and I hate that thing.

I'd want the changes isolated to something... more intermediate, if that makes sense? A start state with consts, but also a separate current state that combines start state with some offset, maybe. To analogize with the above, that plugin would be much less annoying if it just added rules that I could clean up if I don't want them.

Suspicious Dish
Sep 24, 2011

2020 is the year of linux on the desktop, bro
Fun Shoe
So, there's a tiny trick to the above. You see how the line number is grayed out? The user literally cannot touch that line, it only exists for show. So it's not really editing the source buffer as much as trying to show you what globals you have...

Suspicious Dish
Sep 24, 2011

2020 is the year of linux on the desktop, bro
Fun Shoe
With a bit of a tint to the code itself, and the per-line definitions, and a ton of fixes to this editor to not throw a fit because I'm doing this, I'm starting to enjoy this... but that might be the stockholm syndrome talking since I did just spend hours trying to make it work.

https://giant.gfycat.com/DefiantFlamboyantIsopod.webm

Live at https://magcius.github.io/xplain/article/rast2.html if you want to give me feedback / bug reports.

jawbroken
Aug 13, 2007

messmate king
It's cool. Bug report: the code editor is rendered at low DPI on my high DPI screen, so the text is very blurry (latest macOS + Safari).

Munkeymon
Aug 14, 2003

Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.



I'm not able to interact with the editors at all on Chrome on Windows (just doesn't respond at all, only console error is "Unknown demo: rast2-transforms-2") and hovering over the drawing area in the first example makes the dot disappear, but the mouse position is correctly updated in the editor.

One thing I noticed when I was making a UI that relied on canvas text rendering was that it helped to make the canvas exactly twice as big as it needed to be and letting the browser resize it. The text turns out sharper, or at least that was the case a couple years ago. Plus it was pretty easy: just multiply all the numbers coming into the drawing code by two. Could be a fix for the high-DPI rendering.

Munkeymon fucked around with this message at 13:55 on Oct 20, 2017

Suspicious Dish
Sep 24, 2011

2020 is the year of linux on the desktop, bro
Fun Shoe

jawbroken posted:

It's cool. Bug report: the code editor is rendered at low DPI on my high DPI screen, so the text is very blurry (latest macOS + Safari).

ugh. the web sucks, and I don't have easy way to test here. I'll see what I can do.

Munkeymon posted:

I'm not able to interact with the editors at all on Chrome on Windows (just doesn't respond at all, only console error is "Unknown demo: rast2-transforms-2") and hovering over the drawing area in the first example makes the dot disappear, but the mouse position is correctly updated in the editor.

That is bizarre. I'm also on Chrome on Windows. Just to double-check, you're not trying to click on the code at the top, right? Try clicking in the middle like on "let radius = 3;" If that still doesn't work, try right-clicking, Inspect Element on the editor, and then going to the textarea and unchecking the left: -99999px; and position: absolute CSS elements. Can you interact with the textarea?

SupSuper
Apr 8, 2009

At the Heart of the city is an Alien horror, so vile and so powerful that not even death can claim it.

Suspicious Dish posted:

Live at https://magcius.github.io/xplain/article/rast2.html if you want to give me feedback / bug reports.
Works fine in Firefox / Windows. My only suggestion would be an error message on the editor when the code is broken (syntax error / infinite loop / etc), doesn't need to be a full compiler, just "Something is wrong with your code".

Suspicious Dish
Sep 24, 2011

2020 is the year of linux on the desktop, bro
Fun Shoe

SupSuper posted:

Works fine in Firefox / Windows. My only suggestion would be an error message on the editor when the code is broken (syntax error / infinite loop / etc), doesn't need to be a full compiler, just "Something is wrong with your code".

Yeah, that's ongoing. I want to parse out the line number from the compile error and highlight it in red.

btw, hidpi should be fixed.

Munkeymon
Aug 14, 2003

Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.



Suspicious Dish posted:

That is bizarre. I'm also on Chrome on Windows. Just to double-check, you're not trying to click on the code at the top, right? Try clicking in the middle like on "let radius = 3;" If that still doesn't work, try right-clicking, Inspect Element on the editor, and then going to the textarea and unchecking the left: -99999px; and position: absolute CSS elements. Can you interact with the textarea?

I can but I also have to give it a higher z-index than the canvas. Stepping through the mouseDown handler when I click on the 10 on line 9 of the first example, I'm guessing a layerY value of -1269 is tripping up _xyToRowCol. I think using offsetX/Y is safe nowdays and if not you can probably fall back on e.pageY - e.target.parentElement.offsetTop, but yeah

quote:

ugh. the web sucks

e: gently caress, I should have noticed there was some weirdness w.r.t. mouse coordinates when the generated code on mouseover had a negative y value

Munkeymon fucked around with this message at 16:58 on Oct 20, 2017

Suspicious Dish
Sep 24, 2011

2020 is the year of linux on the desktop, bro
Fun Shoe
I thought layerX / layerY were relative to the element? wtf?

Munkeymon
Aug 14, 2003

Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.



Suspicious Dish posted:

I thought layerX / layerY were relative to the element? wtf?

No, that's offset. Layers are created by either positioning an element or giving it a z-index (and maybe something else - it's been awhile since I read this). Layer is also nonstandard according to MDN https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/layerX

E: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/offsetX I know it says experimental but the compat chart at the bottom says "anyone who doesn't have this is so far behind theny may as well be rendring pages with a stick in the dirt" just not quite with those words

Munkeymon fucked around with this message at 17:24 on Oct 20, 2017

Suspicious Dish
Sep 24, 2011

2020 is the year of linux on the desktop, bro
Fun Shoe
ok, i have no clue how it worked for me. i did do some weird stuff with layerX/Y which probably confuses chrome but only if it's using some weird GPU acceleration.

but yes considering i'm using ES6 classes and destructuring assignment without babel, i should be very much in the clear

try now. i also added the fancy error highlighting!!! i thought it would be a twicewise pain because parsing Error.stack but thankfully ErrorEvent already has a lineno i can use for my purposes

https://giant.gfycat.com/FaithfulGiddyCockerspaniel.webm

Munkeymon
Aug 14, 2003

Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.



Suspicious Dish posted:

ok, i have no clue how it worked for me. i did do some weird stuff with layerX/Y which probably confuses chrome but only if it's using some weird GPU acceleration.

but yes considering i'm using ES6 classes and destructuring assignment without babel, i should be very much in the clear

try now. i also added the fancy error highlighting!!! i thought it would be a twicewise pain because parsing Error.stack but thankfully ErrorEvent already has a lineno i can use for my purposes

https://giant.gfycat.com/FaithfulGiddyCockerspaniel.webm

Very slick! The editor is working but mousing over the rendering area still needs updated.

Carthag Tuek
Oct 15, 2005

Tider skal komme,
tider skal henrulle,
slægt skal følge slægters gang



SupSuper posted:

Works fine in Firefox / Windows. My only suggestion would be an error message on the editor when the code is broken (syntax error / infinite loop / etc), doesn't need to be a full compiler, just "Something is wrong with your code".

yea pls develop a method to detect infinite loops

(honestly, excellent work suspicious dish)

MrMoo
Sep 14, 2000

I don't understand JS graph libraries, all of them are odd in their own way. This one, Plotly thinks this is a sensible auto-sizing:



Rickshaw doesn't support some feature I apparently need so I end up with a fugly monochrome chart,



Here is the current Flot based implementation

MrMoo fucked around with this message at 03:51 on Nov 3, 2017

Adbot
ADBOT LOVES YOU

LP0 ON FIRE
Jan 25, 2006

beep boop
MrMoo have you tried using d3 with your graphing? I think it's pretty awesome from what I've seen.

  • 1
  • 2
  • 3
  • 4
  • 5
  • Post
  • Reply