Repl.it GFX: Native graphics development in the browser | Hacker News Reader

Repl.it GFX: Native graphics development in the browser

repl.it

364 pointsstarbugs67 comments

Repl.it co-founder here -- happy to answer questions :)

This is just coming out and lots of users are building impressive games; here is quick small sample of things I found interesting:

- Super Mario: https://repl.it/@JONASRAINS/SMOB3-Python

- Pacman: https://repl.it/@argthe1st/Pacman

- Flappy Bird (hold space to fly): https://repl.it/@rennecastro/FlappyBird

- Dungeon game: https://repl.it/@AbrahamTinajero/VOLTHEGAME-V-061

- LOVE2D Ant: https://repl.it/@Essentuan/AntLove

- Evolution simulator: https://repl.it/@dumfing/OutpaceEvolution

- Doom style 3D maze: https://repl.it/@KatyaDelaney/GameJam-3DMAZE

I'm personally bullish on Pyxel -- the pico-8-like Python environment. Here is one of the example games running: https://repl.it/@amasad/jumper (make sure to check the sweet asset editor; instructions in the comment).

Also, I forgot to mention in the post but this works great with friends on Multiplayer -- you'll be able to interact with the same machine and output. Earlier this morning I watched YouTube with a bunch of random Twitter users: https://twitter.com/amasad/status/1108804242393821184 ^^

What VNC are you using?

Server: x11-vnc

Client: NoVNC

Are there any options available that utilize h264 as the screen delivery protocol in the browser? I’ve always just found VNC to be so finicky and laggy.

Cool demo!

We're working on taking a video stream from the frame buffer directly, ffmpeging it and streaming it down as video. We'll use VNC for input but not display.

Don't bother, it's not as performant as VNC (VNC overhead is higher but latency may be lower, depends whether you want to optimize for low latency and throughout versus server resource usage), especially once you take into account stuff like VirtualGL.

That is so cool. Congratulations on the launch!

When will we be able to embed repl.it into an iframe?

You can, just like you see in the post. https://repl.it/site/docs/repls/embed

If you're talking about embedding the whole website then that's not doable. It's a security concern: Clickjacking etc.

Go repl is super slow recently. I had to stop using it.

Why do you go the path of using LD_PRELOAD?

Could you not provide an alternate DISPLAY environment variable pointing to a little proxy X11

Either way it's a neat hack. Is the source for the redirector available? It would undoubtedly have wider applications.

How many people were working on repl.it before the first public release, and for how long?

I have been following Repl.it since it's first release. We were quite amazed when repl.it was released. We, a bunch of students, were building a project very similar to what repl.it was in it's initial days, during the same time period. we never managed to get our project to an usable stage, and eventually everyone abandoned it.

I started working on the idea behind repl.it in 2009 when I was in college and had trouble coding because of all the setup. With the help of a friend I eventually got something usable in 2011 and open sourced. The engine powered lots if other sited including Codecademy and Udacity.

I got back to working on repl.it in 2016 and my co-founders joined me.

What do you use for proxy?

We wrote our own in Go.

Open source it? There aren't many Docker aware proxies where sticky sessions is a first-class feature.

I just came here to say thank you for doing this team. When I wanted to teach my 5 year old how to type and do basic math, I did it in clojure using Repl.it

I may have biased it, but she found the experience more engaging than MIT Scratch (which is also very good).

When kids and newbies engage with a product so easily (think git before github), you suddenly vastly increase the userbase.

Thanks Danny! I think Scratch is probably the most impactful tool in getting more people into programming. We have nothing but respect for the team.

However, when we talk to some of the kids coming to Repl.it from Scratch they often say something along the lines of Scratch is an "adult's idea of what kids might like". I think some kids want to feel like hackers and like they're doing "the real thing."

To that end we're working on a framework that has similar semantics to Scratch but is actually Python: https://github.com/replit/play

BTW: a 5 year old learning Clojure is fascinating. I hope you write about that sometime.

>>>However, when we talk to some of the kids coming to Repl.it from Scratch they often say something along the lines of Scratch is an "adult's idea of what kids might like". I think some kids want to feel like hackers and like they're doing "the real thing."<<< This is just one of the most impactful sentence I have ever heard, as I am trying to build a really simple flow programming interface.

> However, when we talk to some of the kids coming to Repl.it from Scratch they often say something along the lines of Scratch is an "adult's idea of what kids might like". I think some kids want to feel like hackers and like they're doing "the real thing."

I teach a low-impact, almost impossible to fail programming elective to HS students. We start with a fork of Scratch, and we eventually move to Python. The above is generally the response of my students as well. Scratch is a nice, gentle introduction, but then it becomes more tedious clicking through categories, dragging-and-dropping, and maintaining an organized environment with larger assignments. I'm inclined to agree. Also transferring concepts from Scratch to a terminal language doesn't click for most students. I'm still working on bettering my lesson plans in that aspect.

I do want to counter with something positive about these visual implementations though. I think boot strapping the course would be 10 times harder with just a terminal language.

Hey, you should definitely check out Python Play, the games/graphics library @amasad mentioned: https://github.com/replit/play

It's uses similar language and a Scratch-like execution model, so you can do things like this:

    face = play.new_text('^.^', font_size=100)

    @face.when_clicked
    async def do():
        face.words = '*o*'
        await play.timer(seconds=1)
        face.words = '^.^'

> how to type and do basic math, I did it in clojure using Repl.it

Can you share the repl or add some more detail please on how was it better than traditional methods

Hey! Thanks for asking. I carry a Pixelbook around the house to read the news/answer emails and, although Linux is on it on, I just find it easier to browse to Repl.it.

Let's be clear that for a 5 year old, being able to substitute numbers in (+ 2 3) and seeing the results is displayed on the screen is pretty cool. And for my 3-year-old, just typing his name (after I tell him which keys to press) is magical.

Running the Chromium instance within the Chromium instance within the blog post worked better than expected!

How many levels deep did you get? I got 3 (excluding base reality) https://imgur.com/a/Zuh9d78

I got to three and was about to try four, but then the second one spontaneously combusted or something and reloaded itself.

I did this then looked for a thread in case someone (you) already came up with it: https://imgur.com/a/BCESAuh

4 levels?! Nice!

The screen that says "run your repl to see output" never changes when I hit run. Anyone else never seeing any actual graphics? I'm using Firefox on OSX 10.12.6.

Are you hitting the differently colored word "run" in the sentence on that screen, or are you clicking the play button above the code that's above that screen? I was doing the former at first, until I noticed that button. Also on Firefox, but Windows 10.

I'm hitting the play button. Something is definitely running, there's lots output in the little text console (at least initially)

Are you behind a firewall that blocks WebScokets? Try this: https://www.websocket.org/echo.html

Interesting. That echo test fails for me in Firefox but works fine in Chrome. However the repl doesn't give me graphics in either browser.

Strange. Any error in devtools?

Received a bunch of errors and couldn't get the game to run.

Firefox 65 on Fedora 29.

    Polygott
    chromium-browser --no-sandbox https://repl.it/blog/gfx

    XOpenDisplay((null))
    Starting X
    xset:  unable to open display ":0"
    nohup: redirecting stderr to stdout

    [ I snipped out some non-error lines ]

    XOpenDisplay((null))
    [13:59:0322/035214.877492:ERROR:bus.cc(396)] Failed to connect to the bus: Failed to connect to socket /var/run/dbus/system_bus_socket: No such file or directory
    xcb_connection_has_error() returned true
    [13:13:0322/035214.990820:ERROR:browser_dm_token_storage_linux.cc(101)] Error: /etc/machine-id contains 0 characters(32 were expected).

    XOpenDisplay((null))

    XOpenDisplay((null))
    [67:67:0322/035215.770758:ERROR:sandbox_linux.cc(364)] InitializeSandbox() called with multiple threads in process gpu-process.
    [13:254:0322/035216.684721:ERROR:bus.cc(396)] Failed to connect to the bus: Could not parse server address: Unknown address type (examples of valid types are "tcp" and on UNIX "unix")

Similar failure to run for all of them actually:

    Python3 with Pygame
    nohup: redirecting stderr to stdout
    xset:  unable to open display ":0"
    ^CTraceback (most recent call last):
    File "main.py", line 400, in <module>
        main_menu(win)
    File "main.py", line 387, in main_menu
        draw_text_middle(win, 'Press Any Key To Play', 60, (255,255,255))
    File "main.py", line 190, in draw_text_middle
        label = font.render(text, 1, color)
    KeyboardInterrupt
    XIO:  fatal IO error 0 (Success) onX server ":0"
        after 135 requests (135 knownprocessed) with 1 events remaining.
    exit status 1

This is awesome! I see you have tkinter, but could you guys add tcl / tk as a language please! It'd be awesome to have tcl / tk apps on the web.

Here you go: https://repl.it/@amasad/tcl-GUI

We'll add it as a top-level language soon.

Woah! This is so cool! Thank you so much! Runs my Tetris clone perfectly ahaha.

https://repl.it/@nickbarth/Tk-Tetris

Well now I'm sold.

Why do the games run at super low FPS? Seems like 3 FPS or such. Mac Mojave, Firefox 67.0b3 64bit

Which games?

In general: Repl.it infra is a multitenant container system and you might get unlucky sometimes and get a VM that's super crowded (reloading might work).

Btw, if you login we also give you more compute resources and things will run faster.

I've had the same issue on MacBook pro (Sierra) on Chrome. Both tetris and super mario were unplayable as they were to slow.

Hold on. Scaling up.

For the curious here is the cpu load avg thanks to the hackernews hug of death: https://imgur.com/a/QviYhG9

(Yellow line is a 100% saturation -- eek!)

This is why cloud development environments are a bad idea, instead companies should be focused on open source and client-side automated solutions.

I think that's a bit of a hastily generalization. We mentioned in the post (under Technology) that it's still beta quality.

More generally though we have millions of users that don't have the luxury of running a fancy local developer environment. Either they're on chromebooks or tablets or they don't have a computer altogether.

You don't need anything fancy to run a developer environment. Why not just build a local developer IDE app for Android, if you're the development experts? There are already self-hosted server solutions for development environments, and mobile developer applications for Android. The first thing you see on your website is "sign up" or "log in". Most of those "developers" are just getting started and will resent your products in a couple years. Just give them time.

For a Linux user, you can already build such a system yourself quite trivially by getting an FTP account, mounting it locally with curlftpfs, and then using SVN or CVS on the mounted filesystem. From Windows or Mac, this FTP account could be accessed through built-in software.

Like Dropbox? I’ll just leave this here: [1]. The details are seldom easy.

[1]: https://news.ycombinator.com/item?id=9224

Cool idea. Build it ;)

"Please don't post shallow dismissals, especially of other people's work. A good critical comment teaches us something."

https://news.ycombinator.com/newsguidelines.html

Quite impressive, you can basically run anything on a VNC, this could even be used for automated browser testing and many other things! Congrats!

Yes, I think we preinstall chrome webdriver on the base image too!

Automated browser testing via repl would be awesome... and a pretty sizable biz model choice

I'm really impressed by what this team is doing. When will we be running Word in multi player mode instead of Google Docs? Just half kidding.

https://support.office.com/en-us/article/collaborate-on-word...

This reminds me a lot of the new X11 graphics support we have in https://CoCalc.com -- http://blog.sagemath.com/cocalc/2018/11/05/x11.html

Chromium in Chrome? WTH? AWESOME!

Blew my mind.

How many levels deep did you get? I got 3 (excluding base reality) https://imgur.com/a/Zuh9d78

really a great, evocative demo-- i couldn't help but giggle a bit when it all loaded up, and i knew it was coming! =D

This is very cool. Any plans to support Elm lang in the future?

Pretty sick! Hows it work? I'd love to be able to have Pygame stuff show up right in a web browser and not have it be wrapped by repl.it.

Coming soon. This will leverage our repl.run product which allows you to ship any app -- web, terminal, desktop, etc -- as a web page https://repl.it/talk/announcements/BetaExplorers-Announcing-...

just awesome

Reply on news.ycombinator.com