browser

54 Articles

Pixel mashup with Wasm-4 logo and retro graphics

WASM-4: Retro Game Dev Right In Your Browser

December 8, 2024 by 12 Comments

Have you ever dreamt of developing games that run on practically anything, from a modern browser to a microcontroller? Enter WASM-4, a minimalist fantasy console where constraints spark creativity. Unlike intimidating behemoths like Unity, WASM-4’s stripped-back specs challenge you to craft games within its 160×160 pixel display, four color palette, and 64 KB memory. Yes, you’ll curse at times, but as every tinkerer knows, limitations are the ultimate muse.

Born from the WebAssembly ecosystem, this console accepts “cartridges” in .wasm format. Any language that compiles to WebAssembly—be it Rust, Go, or AssemblyScript—can build games for it. The console’s emphasis on portability, with plans for microcontroller support, positions it as a playground for minimalist game developers. Multiplayer support? Check. Retro vibes? Double-check.

Entries from a 2022’s WASM-4 Game Jam showcase this quirky console’s charm. From pixel-perfect platformers to byte-sized RPGs, the creativity is staggering. One standout, “WasmAsteroids,” demonstrated real-time online multiplayer within these confines—proof that you don’t need sprawling engines to achieve cutting-edge design. This isn’t just about coding—it’s about coding smart. WASM-4 forces you to think like a retro engineer while indulging in modern convenience.

WASM-4 is a playground for anyone craving pure, unadulterated experimentation. Whether you’re a seasoned programmer or curious hobbyist, this console has the tools to spark something great.

DIY 3D Hand Controller Using A Webcam And Scripting

October 25, 2024 by 3 Comments

Are you ready to elevate your interactive possibilities without breaking the bank? If so, explore [Caio Bassetti]’s tutorial on creating a full 3D hand controller using only a webcam, MediaPipe Hands, and Three.js. This hack lets you transform a 2D screen into a fully interactive 3D scene—all with your hand movements. If you’re passionate about low-cost, accessible tech, try this yourself – not much else is needed but a webcam and a browser!

The magic of the project lies in using MediaPipe Hands to track key points on your hand, such as the middle finger and wrist, to calculate depth and positioning. Using clever Three.js tricks, the elements can be controlled on a 3D axis. This setup creates a responsive virtual controller, interpreting hand gestures for intuitive movement in the 3D space. The hack also implements a closed-fist gesture to grab and drag objects and detects collisions to add interactivity. It’s a simple, practical build and it performs reliably in most browsers.

For more on this innovation or other exciting DIY hand-tracking projects, browse our archive on gesture control projects, or check out the full article on Codrops. With tools such as MediaPipe and Three.js, turning ideas into reality gets more accessible than ever.

FLOSS Weekly Episode 800: Champagning The Ladybird Browser

September 11, 2024 by 5 Comments

This week Jonathan Bennett and Aaron Newcomb chat with Andreas Kling about Ladybird, the new browser in development from the ground up. It was started as part of SerenityOS, and has since taken on a life of its own. How much of the web works on it? How many people are working on the project? And where’s the download button? Listen to find out!

Continue reading “FLOSS Weekly Episode 800: Champagning The Ladybird Browser” →

Turning Horrible Browser Controls Into A Game

July 15, 2024 by 7 Comments

With all of the various keyboards, mouses (mice?), and other human interface devices (HID) available for our computers, there’s no possible way for developers to anticipate every type of input for every piece of software they build. Most of the time everything will work fine as long as some basic standards are kept, both from the hardware and software sides, but that’s not always the case. [Losso] noticed a truly terrible volume control method when visiting certain websites while also using a USB volume knob, and used this quirk to build a Breakout game with it.

It turns out his volume control knob would interact simultaneously with certain video players’ built-in volume control and the system volume for the operating system, leading to a number of undesirable conditions. However, the fact that this control is built in to certain browsers in the first place led to this being the foundation for the Breakout clone [Losso] is calling KNOB-OUT. Unlike volume buttons on something like a multimedia keyboard, the USB volume control knob can be configured much more easily to account for acceleration, making it more faithful to the original arcade version of the game. The game itself is coded in JavaScript with the source code available right in the browser.

If you’d like to play [Losso]’s game here’s a direct link to it although sometimes small web-based projects like these tend to experience some slowdown when they first get posted here. And, if you’re looking for some other games to play in a browser like it’s the mid-00s again, we’re fans of this project which brings the unofficial Zelda game Zelda Classic to our screens.

Fork! Ladybird Browser And SerenityOS To Go Separate Ways

July 2, 2024 by 10 Comments

In the monthly Ladybird Browser update video which we’ve placed below, SerenityOS founder [Andreas Kling] announced an interesting development. The browser has been forked from the OS that has been its progenitor, and both projects will now proceed separately. This frees the browser from the SerenityOS insistence on avoiding external libraries, and allows it to take advantage of stable, fast, and mature open source alternatives. This is already paying dividends in compatibility and speed, and is likely to lead further towards a usable everyday browser as time goes by.

As the world of fully-featured web browser engines has contracted from a number of different projects to little more than Google’s Blink and Mozilla’s Gecko, Ladybird has found itself in an unexpected position. It is vital that the browser market retains some competition and does not become a Google monoculture, so while it might not seem so at first glance, the news of Ladybird going alone has the potential to be one of the most far-reaching open source stories of the year.

If you’d like to try Ladybird you’ll have to get your hands slightly dirty and build it yourself, but we’d expect ready-built versions to appear in due course. We took a look at an earlier version of Ladybird last year, as well as SerenityOS itself.

Continue reading “Fork! Ladybird Browser And SerenityOS To Go Separate Ways” →

Play Giant Tetris On Second-Floor Window

May 28, 2024 by 11 Comments

Sometimes it seems like ideas for projects spring out of nothingness from a serendipitous set of circumstances. [Maarten] found himself in just such a situation, with a combination of his existing Tetris novelty lamp and an awkwardly-sized window on a second-floor apartment, he was gifted with the perfect platform for a giant playable Tetris game built into that window.

To make the giant Tetris game easily playable by people walking by on the street, [Maarten] is building as much of this as possible in the browser. Starting with the controller, he designed a NES-inspired controller in JavaScript that can be used on anything with a touch screen. A simulator display was also built in the browser so he could verify that everything worked without needing the giant display at first. From there it was on to building the actual window-sized Tetris display which is constructed from addressable LEDs arranged in an array that matches the size of the original game.

There were some issues to iron out, as would be expected for a project with this much complexity, but the main thorn in [Maarten]’s side was getting his controller to work in Safari on iPhones. That seems to be mostly settled and there were some other gameplay issues to solve, but the unit is now working in his window and ready to be played by any passers-by, accessed by a conveniently-located QR code. Tetris has been around long enough that there are plenty of unique takes on the game, like this project from 2011 that uses Dance Dance Revolution pads for controllers.

CADmium Moves CAD To The Browser

May 23, 2024 by 43 Comments

For plenty of computer users, the operating system of choice is largely a middleman on the way to the browser, which hosts the tools that are most important. There are even entire operating systems with little more than browser support, under the assumption that everything will be done in the browser eventually. We may be one step closer to that type of utopia as well with this software tool called CADmium which runs exclusively in a browser.

As the name implies, this is a computer-aided design (CAD) package which looks to build everything one would need for designing project models in a traditional CAD program like AutoCAD or FreeCAD, but without the burden of needing to carry local files around on a specific computer. [Matt], one of the creators of this ambitious project, lays out the basic structure of a CAD program from the constraint solver, boundary representation (in this case, a modern one built in Rust), the history tracker, and various other underpinnings of a program like this. The group hopes to standardize around JSON files as well, making it easy to make changes to designs on the fly in whatever browser the user happens to have on hand.

While this project is extremely early in the design stage, it looks like they have a fairly solid framework going to get this developed. That said, they are looking for some more help getting it off the ground. If you’ve ever wanted something like this in the browser, or maybe if you’ve ever contributed to the FreeCAD project and have some experience, this might be worth taking a look at.