These are chat archives for voodooattack/nexusjs

25th
Apr 2016
jtenner
@jtenner
Apr 25 2016 14:00
Hello! I was impressed with your article. Good luck with your project.
Abdullah A. Hassan
@voodooattack
Apr 25 2016 14:01
Thank you 👍
I hope I don't disappoint. I'm working on it right now actually.
jtenner
@jtenner
Apr 25 2016 14:05
I have been working with WebWorkersmyself. Getting concurrent javascript in the browser is scary.
Abdullah A. Hassan
@voodooattack
Apr 25 2016 14:06
That's true. I guess it's scarier having access to shared mutable state.
People on stack exchange freaked out when I showed them this project.
jtenner
@jtenner
Apr 25 2016 14:07
I use an isomorphic (runs in two places) bundle that mirrors a set of classes and data between the two environments
the data is immutable
Abdullah A. Hassan
@voodooattack
Apr 25 2016 14:07
Nice
An isomorphic webworker?
jtenner
@jtenner
Apr 25 2016 14:08
class GamePart extends Part {
   constructor() {
    super()
   }
  //runs in the worker
   onPhysics(data) {
     this.setData([1,2,3,4]);//something..
   }
   //runs in the browser
  onRender(data, ctx, canvas) {
    ctx.drawImage(img);
  }
}
Yep!
It uses a url router to define game states
Very performant
my inital tests show I can do 20ms of work per browser frame
It's actually really cool.
Abdullah A. Hassan
@voodooattack
Apr 25 2016 14:11
Holy *
jtenner
@jtenner
Apr 25 2016 14:12
Yeah those extra ms matter a lot!
The problem is that user input lags behind a frame
Abdullah A. Hassan
@voodooattack
Apr 25 2016 14:12
I love the idea
jtenner
@jtenner
Apr 25 2016 14:12
I'm going to publish the repo in a second. Mind taking a look?
Abdullah A. Hassan
@voodooattack
Apr 25 2016 14:12
Not at all
I'd love to
Abdullah A. Hassan
@voodooattack
Apr 25 2016 14:20
Let me check
jtenner
@jtenner
Apr 25 2016 14:20
Yeah that's a good hello world example
all that code runs in BOTH places
Abdullah A. Hassan
@voodooattack
Apr 25 2016 14:21
I'm loving the modularity here
It's all encapsulated.. simply beautiful.
jtenner
@jtenner
Apr 25 2016 14:21
g.use configures the application in both places
Abdullah A. Hassan
@voodooattack
Apr 25 2016 14:21
I noticed
jtenner
@jtenner
Apr 25 2016 14:21
Like, nobody i've shared this with seems to understand what I've created.
lol
Abdullah A. Hassan
@voodooattack
Apr 25 2016 14:21
lol
Sounds familiar :P
I wish I knew about webworkers when I made this http://cilium.codebuffalo.com/
But it wasn't really an option to be honest
Oh! Don't open that on a mobile phone!
jtenner
@jtenner
Apr 25 2016 14:23
LOL
Yeah that usually sucks
Abdullah A. Hassan
@voodooattack
Apr 25 2016 14:23
It will kill your phone
jtenner
@jtenner
Apr 25 2016 14:23
was that canvas 2d prototype?
Abdullah A. Hassan
@voodooattack
Apr 25 2016 14:23
Yeah, via Paper.js
jtenner
@jtenner
Apr 25 2016 14:23
oh
I've written a canvas framework
Fully featured too.
Abdullah A. Hassan
@voodooattack
Apr 25 2016 14:24
Nice
jtenner
@jtenner
Apr 25 2016 14:25
import { Renderer, clearRect, translate, fillText } from 'e2d';

let r = Renderer.create(400,400);
r.ready();
r.on('frame', 
  () => r.render(
    clearRect(400, 400),
    translate(200, 200,
       fillText("Hello World!")
    )
  )
);
Abdullah A. Hassan
@voodooattack
Apr 25 2016 14:26
Hmm, how do you specify which canvas to render on?
Is it global?
jtenner
@jtenner
Apr 25 2016 14:26
Fixed that problem
Abdullah A. Hassan
@voodooattack
Apr 25 2016 14:27
const device = new Nexus.IO.FileSourceDevice('../../tests/utf16.txt');
const stream = new Nexus.IO.ReadableStream(device);

stream.pushFilter(new Nexus.IO.EncodingConversionFilter("UTF-16LE", "UTF-8"));

const wdevice = new Nexus.IO.FileSinkDevice('utf8.txt');
const wstream = new Nexus.IO.WritableStream(wdevice);

stream.pipe(wstream).then(console.log('finished!'));
jtenner
@jtenner
Apr 25 2016 14:27
let offscreenCanvas = Canvas.create(400, 400);

r.render(
   drawCanvas(offscreenCanvas)
);
yeah the canvas you draw to is modular
so you can create multiple ones
Abdullah A. Hassan
@voodooattack
Apr 25 2016 14:28
Oh, nice
I just finished that piece of code
You can pipe streams with nexus now :D
jtenner
@jtenner
Apr 25 2016 14:28
So how does that work?
OH I see
Neat.
Abdullah A. Hassan
@voodooattack
Apr 25 2016 14:29
You pipe an input stream into an output stream, internally, the streams apply any filters and connect the devices.
jtenner
@jtenner
Apr 25 2016 14:29
I'm not familiar with the terminology
Abdullah A. Hassan
@voodooattack
Apr 25 2016 14:29
ah
jtenner
@jtenner
Apr 25 2016 14:29
I see the word device and it confuses me.
jtenner
@jtenner
Apr 25 2016 14:30
I read it, and I'm still sortof confused :)
Abdullah A. Hassan
@voodooattack
Apr 25 2016 14:30
A device is an abstraction for an IO primitive
jtenner
@jtenner
Apr 25 2016 14:30
Oh. Okay.
Abdullah A. Hassan
@voodooattack
Apr 25 2016 14:30
Like a socket, a file, a filedescriptor
jtenner
@jtenner
Apr 25 2016 14:30
It just represents an IO operation
Abdullah A. Hassan
@voodooattack
Apr 25 2016 14:30
etc
More like something you can read or write to.
jtenner
@jtenner
Apr 25 2016 14:30
so you piped a Read opertion to a write one.
Abdullah A. Hassan
@voodooattack
Apr 25 2016 14:31
yep
jtenner
@jtenner
Apr 25 2016 14:31
I saw that, but now it makes better sense.
I'd love to see a web server handle that kind of thing.
Abdullah A. Hassan
@voodooattack
Apr 25 2016 14:31
In this case, this code converts a UTF16LE file into a UTF8 file. :)
jtenner
@jtenner
Apr 25 2016 14:32
My game framework allows the developer to make their own game-tick lifecycles.
Abdullah A. Hassan
@voodooattack
Apr 25 2016 14:32
I'm going to modify it more though, currently it reads the whole file into memory first, then writes it back. I plan to have a coroutine that chunks the input/output operation.
jtenner
@jtenner
Apr 25 2016 14:33
this is a simple physics lifecycle
import Lifecycle from './Lifecycle';

module.exports = class PhysicsLifecycle extends Lifecycle {
  constructor() {
    super();
  }
  onWorkerTick(data) {
    for (let i = 0; i < this.parts.length; i++) {
      this.parts[i].onPhysics(data);
    }
  }
};
Abdullah A. Hassan
@voodooattack
Apr 25 2016 14:33
What physics engine do you use?
jtenner
@jtenner
Apr 25 2016 14:33
I prefer p2.
Abdullah A. Hassan
@voodooattack
Apr 25 2016 14:33
Oh
jtenner
@jtenner
Apr 25 2016 14:33
but the game is "bring your own"
Abdullah A. Hassan
@voodooattack
Apr 25 2016 14:33
I used to use Chipmunk2D
jtenner
@jtenner
Apr 25 2016 14:33
you can totally import P2.js or chipmunk.
Abdullah A. Hassan
@voodooattack
Apr 25 2016 14:33
Nice
jtenner
@jtenner
Apr 25 2016 14:34
the thing is, you need to make sure you do the physics work on the worker thread :)
override onWorkerTick in a Lifecycle object
Abdullah A. Hassan
@voodooattack
Apr 25 2016 14:34
Yeah, that thing I linked earlier has liquid dynamics, and it eats the CPU up like crazy.
jtenner
@jtenner
Apr 25 2016 14:35
You can also use paper.js as the renderer
you have to convert an array of data to something meaninful for the view layer every frame though
Bring your own physics and render
Abdullah A. Hassan
@voodooattack
Apr 25 2016 14:36
Very nice
I can see this gaining popularity, just make sure the docs are very clear
And verbose
jtenner
@jtenner
Apr 25 2016 14:37
I wish I could
I'm not very good at it :)
Abdullah A. Hassan
@voodooattack
Apr 25 2016 14:37
Why not?
Ahaha
Same here
I worry sometimes..
jtenner
@jtenner
Apr 25 2016 14:38
A bring your own stuff framework probably doesn't have a lot of value
Abdullah A. Hassan
@voodooattack
Apr 25 2016 14:38
If nobody decides to join my project, it will go down in history as a good implementation with zero documentation
jtenner
@jtenner
Apr 25 2016 14:38
I'll join!
You gotta contribute to mine though ;-)
Abdullah A. Hassan
@voodooattack
Apr 25 2016 14:38
Haha
How?
I'm sort of in C++ mode right now :P
jtenner
@jtenner
Apr 25 2016 14:38
Documentation....
Abdullah A. Hassan
@voodooattack
Apr 25 2016 14:39
Oh
I'd actually appreciate that.
I meant how would I join yours
I'm sort of swamped with nexus stuff right now :P
jtenner
@jtenner
Apr 25 2016 14:40
@voodooattack you can just fork my library and fix my documentation any time :)
submit a pull request
Abdullah A. Hassan
@voodooattack
Apr 25 2016 14:40
Aha
I'd have to spend time getting familiar with the code
jtenner
@jtenner
Apr 25 2016 14:40
Bingo
That's okay
I'm almost ready to ship it
Abdullah A. Hassan
@voodooattack
Apr 25 2016 14:41
I might do that if I decide to use it to make something
jtenner
@jtenner
Apr 25 2016 14:41
Do you know how to use webpack?
Abdullah A. Hassan
@voodooattack
Apr 25 2016 14:41
I'll definitely look into it for my next artificial life project
Yes
Webpack, browserify, rollup
jtenner
@jtenner
Apr 25 2016 14:41
Well I'll be here. I can help you structure code or submit bugfixes to help.
Abdullah A. Hassan
@voodooattack
Apr 25 2016 14:41
I've used everything!
jtenner
@jtenner
Apr 25 2016 14:41
sweet.
YOu compile the code into one file
and then point the web-worker at itself
one file download
Abdullah A. Hassan
@voodooattack
Apr 25 2016 14:42
Oooh!
jtenner
@jtenner
Apr 25 2016 14:42
Yeah that's the coolest part.
Abdullah A. Hassan
@voodooattack
Apr 25 2016 14:42
That's brilliant
jtenner
@jtenner
Apr 25 2016 14:42
Webpack makes webworker compatible files
Abdullah A. Hassan
@voodooattack
Apr 25 2016 14:42
Yeah, I know that
I think I tried that before
jtenner
@jtenner
Apr 25 2016 14:44
I just really dug down into the physics simulation you sent me
Looks like cpu usage is because react is doing a butt-ton of work
Abdullah A. Hassan
@voodooattack
Apr 25 2016 14:45
That too
I wasn't very proficient with JS at the time :P
I come from a C++ background, so I was toying with JS when I made that
jtenner
@jtenner
Apr 25 2016 14:45
I'll never consider myself an expert in anything except JS. And even then
Abdullah A. Hassan
@voodooattack
Apr 25 2016 14:45
I have a C++ version of it somewhere on my HDD
Pipes!
Mwahaha
:D
jtenner
@jtenner
Apr 25 2016 14:46
woo
you should do some performance testing
like measure the time it takes to do IO with the different processes
Abdullah A. Hassan
@voodooattack
Apr 25 2016 14:47
Hmm
Maybe I will at some point
jtenner
@jtenner
Apr 25 2016 14:47
compare it to flat node.js fs module calls
Abdullah A. Hassan
@voodooattack
Apr 25 2016 14:47
Right now I'm focusing on implementation details
jtenner
@jtenner
Apr 25 2016 14:47
If you are slower than FS calls, then admit it
You shouldn't implement unless you have a proof of concept that is faster than the alternative :)
Abdullah A. Hassan
@voodooattack
Apr 25 2016 14:48
Actually, the FS calls are a thin wrapper around C++ streams
jtenner
@jtenner
Apr 25 2016 14:48
sounds like they should be faster
Abdullah A. Hassan
@voodooattack
Apr 25 2016 14:48
So I'm sure it's performant
jtenner
@jtenner
Apr 25 2016 14:48
but can you prove it?
My canvas library is super fast. I did performance testing in every browser for nearly every type of function
Abdullah A. Hassan
@voodooattack
Apr 25 2016 14:49
I will at one point :P
jtenner
@jtenner
Apr 25 2016 14:51
function canvasRender() {
  for(var i = 0; i < 1000; i++) {
     ctx.fillRect(0, 0, 10, 10);
  }
}
var view = [];
for(var i = 0; i < 1000; i++) {
   view.push(fillRect(10, 10));
}

function e2dRender() {
   r.render(view);
}
ohh wait. I've polyfilled that one.
Abdullah A. Hassan
@voodooattack
Apr 25 2016 14:52
lol
jtenner
@jtenner
Apr 25 2016 14:52
Yeah
What you do with e2d is declare the instructions up front
you treat canvas instructions as variables.
I got marginal slow down
Abdullah A. Hassan
@voodooattack
Apr 25 2016 14:53
I tested the nexus scheduler with 1 million tasks.. it didn't break. Slow as hell in debug builds though.
jtenner
@jtenner
Apr 25 2016 14:53
That.... is impressive.
Abdullah A. Hassan
@voodooattack
Apr 25 2016 14:57
Let me read that
jtenner
@jtenner
Apr 25 2016 15:00
I will admit, this library is hard to understand.
I'm trying my best to show everyone how beautiful it is, but I'm not getting anywhere
Abdullah A. Hassan
@voodooattack
Apr 25 2016 15:02
There. I tweeted it.
jtenner
@jtenner
Apr 25 2016 15:02
hah
Was it easy to understand
Abdullah A. Hassan
@voodooattack
Apr 25 2016 15:02
:D
It lacked context. You should have started by telling what it did and a small walk through of how it does it.
jtenner
@jtenner
Apr 25 2016 15:02
That's super helpful!
Take a look at this gist
you can do stuff with it and test it out
Abdullah A. Hassan
@voodooattack
Apr 25 2016 15:03
Okay, I'll check it out
That's cool
jtenner
@jtenner
Apr 25 2016 15:05
Yeah. It wraps the Canvas2Dprototype directly
Abdullah A. Hassan
@voodooattack
Apr 25 2016 15:35
Mwahaha! It took this long to write enwik8 (100MB file)
real    0m0.215s
user    0m0.152s
sys    0m0.072s
I piped it as-is though
jtenner
@jtenner
Apr 25 2016 15:51
100mb?
nice
what does that mean
I'm considering writing e2d.js in es6 for readability purposes.
jtenner
@jtenner
Apr 25 2016 15:56
module.exports = function translate(x, y, ...children) {
   return [new Instruction('translate', { x, y }), ...children, new Instruction('restore')];
};
jtenner
@jtenner
Apr 25 2016 16:04
@voodooattack I know performant file operations are a big one, but I would love to understand better.
You piped a read to a simple write, correct?
Abdullah A. Hassan
@voodooattack
Apr 25 2016 16:04
Yes
Now I'm working on encoding issues
jtenner
@jtenner
Apr 25 2016 16:04
I see.
Abdullah A. Hassan
@voodooattack
Apr 25 2016 16:04
transcoding to be precise
jtenner
@jtenner
Apr 25 2016 16:09
Do you have a version I can test?
Is the repo stable enough to do an example?
Abdullah A. Hassan
@voodooattack
Apr 25 2016 16:10
I guess you can try
jtenner
@jtenner
Apr 25 2016 16:10
I gonna copy some log files
Abdullah A. Hassan
@voodooattack
Apr 25 2016 16:10
Although to compile it you'll need JavaScriptCore
jtenner
@jtenner
Apr 25 2016 16:10
jscore
Abdullah A. Hassan
@voodooattack
Apr 25 2016 16:10
That's 5gb of code
jtenner
@jtenner
Apr 25 2016 16:10
Every dependency you must use up front means less people will use it
Abdullah A. Hassan
@voodooattack
Apr 25 2016 16:11
😒
jtenner
@jtenner
Apr 25 2016 16:11
:(
Abdullah A. Hassan
@voodooattack
Apr 25 2016 16:11
Yeah
jtenner
@jtenner
Apr 25 2016 16:11
How do I get jscore? Is it easy?
Abdullah A. Hassan
@voodooattack
Apr 25 2016 16:11
Yes
jtenner
@jtenner
Apr 25 2016 16:12
I happen to be on windows.
and it has a makefile :O
:(
Abdullah A. Hassan
@voodooattack
Apr 25 2016 16:13
Lol
You can use Cmake
Works on Windows
jtenner
@jtenner
Apr 25 2016 16:14
So... to get your project working, I need to install 3 things
It's not a lot for me, but it's discouraging.
Abdullah A. Hassan
@voodooattack
Apr 25 2016 16:15
Cmake, JavaScriptCore, and iconv
oh and boost
It is discouraging
😞
jtenner
@jtenner
Apr 25 2016 16:21
iconv?
how do I get those libraries in the right place for compilation?
yikes man
Abdullah A. Hassan
@voodooattack
Apr 25 2016 16:22
Haha
Just download them and point Cmake at the binaries
jtenner
@jtenner
Apr 25 2016 16:23
I can write some tests for you
Abdullah A. Hassan
@voodooattack
Apr 25 2016 16:24
I'd love that