|
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. Do you avoid locking up the browser by inserting yields around control structures, or some different approach?
|
# ? Sep 25, 2017 13:38 |
|
|
# ? May 22, 2024 16:07 |
|
I run the user code in a web worker and kill it if it hasn't responded to a message in 2 seconds.
|
# ? Sep 25, 2017 17:18 |
|
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
|
# ? Sep 30, 2017 07:56 |
|
Holy crap, you're the X11 explained guy? You were on hacker news a few months ago. Sweet.
|
# ? Sep 30, 2017 08:00 |
|
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!
|
# ? Sep 30, 2017 16:45 |
|
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.
|
# ? Sep 30, 2017 18:22 |
|
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.
|
# ? Sep 30, 2017 20:16 |
|
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
|
# ? Sep 30, 2017 21:18 |
|
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 👍
|
# ? Sep 30, 2017 21:53 |
|
Yep. Definitely inspired by his work, combined with the scrubber element from Houdini (see 1:18 of https://vimeo.com/113734396)
|
# ? Sep 30, 2017 22:01 |
|
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.
|
# ? Oct 2, 2017 22:43 |
|
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. 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?
|
# ? Oct 8, 2017 04:20 |
|
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.
|
# ? Oct 8, 2017 05:10 |
|
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.
|
# ? Oct 8, 2017 07:28 |
|
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.
|
# ? Oct 8, 2017 08:17 |
|
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 |
# ? Oct 8, 2017 18:44 |
|
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.
|
# ? Oct 8, 2017 19:08 |
|
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.
|
# ? Oct 8, 2017 19:58 |
|
Newf posted:If you want me to stop harassing you, you'll have to stop being so helpful. Two more followups: 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.
|
# ? Oct 8, 2017 20:23 |
|
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.
|
# ? Oct 8, 2017 21:34 |
|
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:
... 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.
|
# ? Oct 16, 2017 06:02 |
|
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 FYI: between the first and second zero is a monitor bezel, 8 screens make up this display.
|
# ? Oct 19, 2017 02:03 |
|
Trying to figure out a way of doing "code is documentation". I don't like this... any ideas? https://giant.gfycat.com/RepulsiveScaryCapybara.webm
|
# ? Oct 19, 2017 07:18 |
|
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.
|
# ? Oct 19, 2017 12:37 |
|
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.
|
# ? Oct 19, 2017 14:23 |
|
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...
|
# ? Oct 19, 2017 16:35 |
|
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.
|
# ? Oct 20, 2017 07:46 |
|
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).
|
# ? Oct 20, 2017 13:11 |
|
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 |
# ? Oct 20, 2017 13:52 |
|
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?
|
# ? Oct 20, 2017 16:21 |
|
Suspicious Dish posted:Live at https://magcius.github.io/xplain/article/rast2.html if you want to give me feedback / bug reports.
|
# ? Oct 20, 2017 16:36 |
|
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.
|
# ? Oct 20, 2017 16:38 |
|
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 |
# ? Oct 20, 2017 16:54 |
|
I thought layerX / layerY were relative to the element? wtf?
|
# ? Oct 20, 2017 17:01 |
|
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 |
# ? Oct 20, 2017 17:17 |
|
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
|
# ? Oct 20, 2017 17:30 |
|
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. Very slick! The editor is working but mousing over the rendering area still needs updated.
|
# ? Oct 20, 2017 18:27 |
|
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)
|
# ? Oct 21, 2017 13:25 |
|
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 |
# ? Nov 3, 2017 03:48 |
|
|
# ? May 22, 2024 16:07 |
|
MrMoo have you tried using d3 with your graphing? I think it's pretty awesome from what I've seen.
|
# ? Nov 3, 2017 18:08 |