View on GitHub

beads-examples

Examples of Beads programs

Programming examples

These are examples with specifications posted in our GitHub repository, and are included in the SDK which you can download at Beadslang.org

Beads is not a minor rehash of Python or JS. It is a clean sheet design, carefully crafted to catch as many errors at compile time as possible so you spend less time debugging. These examples barely scratch the surface of the full range of Beads features, such as:

  1. can run in reverse (AKA time-travel-debugging)
  2. automatic refresh of screen areas when the underlying model changes
  3. protected arithmetic like Excel
  4. units of measure like 3 m + 2 ft (even at runtime)
  5. a proportional layout system that responds to size changes beautifully
  6. greatly simplified regular expressions
  7. a simple and flexible module system
  8. no make system needed for most projects

Example: Using HTTP to draw a wine list

whitelist_screenshot

This example shows you how to retrieve a wine list from an external database, and adjust the display to fit the screen.

Example: Realtime stock price graph

hoody

This is an example of a client + server program, showing how you can build both the client and the server in Beads. To develop this app, you start by first coding it as a standalone program, with fake data, and once you have the drawing part working well, you split off the data generation part into the server module. In this example you connect to the server (running the emitted JS code under Node.JS), and it will transmit to the client the prices. run here. Note that the server has to be running for the client to be able to connect. We don’t run the server 24/7, mention it on the Discord group to fire it up.

Example: Conway’s game of life

screenshot

This shows how short and simple programs can be when written in Beads. It is impossible to write a shorter version that performs the same function (this version auto-adjusts to the screen size).

Example: Neat looking liquid slider

screenshot

This is a rewrite of a CSS-mostly project from CodePen. Our version is interactive, and lets the user drag a control thumb to set the value, and it shows the dramatic difference between wrestling with the intricacies of CSS, and instead doing it in a straightforward imperative style that is much less tangled.

Example: Recursive structures

This shows how you can build a simple tree structure with up/down expand/contract buttons.

screenshot

Example: Sliding block puzzle

puzzle

Example: Translation tool

This is the handy graphical interactive localization utility for Beads. It allows you to visit Google translate to get your translation started, and lets you keep track of your translation progress, add new languages, etc.

Beads has a friendly and convenient localization methodology, by using suffixes in the source code after a string literal.

for a video explanation of how to use it

localize_screenshot

Example: Dijkstra’s pathfinder algorithm

This Beads language sample program runs a simulation of Dijkstra’s famous pathfinding algorithm.

You draw a wall with the mouse (right click to erase wall cells), and then you press ENTER and let the simulation run. You can also press SPACEBAR to go one step at a time.

pathfinder

Example: Temperature control

This is a simple temperature control which demonstrates the physical units of measurement in Beads, and how you can have a dual control and either one will update the model and refresh the other version of the control that uses the same data, all without locks or conflicts arising.

screenshot

Here is a short video talking about it.

Beads ep.005 video on YouTube

Example: Cycler utility

This handy utility shows how you can run a program inside another program in Beads (by using the monitor keyword instead of program on the first line of code).

screenshot

Here is a short video talking about it.

video example on YouTube

Example: Heat transfer simulation

In this example we show how you can use the physical units of measure features in the Beads language, where you can easily switch between the different temperature scales. Beads includes all the basic units used in engineering and science, with the unit conversions built into the language.

screenshot_300w

Example: Animate1 – Animation using the HTML Canvas

In this example we show how you can use the HTML canvas layer to achieve smooth animation effects.

animate3

Example: Fishing game

This example shows the State-Action-Model pattern method of programming, which is the natural way to program in Beads. You have state variables which are used in a read-only manner by the drawing code, and only the event tracking code updates state. screenshot

Example: Animate1 – Animation program execution

In this example we show a prototype of a way of illustrating program execution, as we call and return from functions:

example

Example: Beads versus Python

In this short 200 word example we take an existing Python program and rewrite it in Beads. They Python version draws to the console as if we were in 1970’s, while the Beads version runs in the browser (or could be emitted for Desktop or Mobile platforms), and resizes even while running without skipping a beat.

The Python version is slightly shorter, but imports 4 libraries, and uses about 15 external functions. Beads uses only 7 external functions, and they are the same ones used in every program. The Python version uses a complex multi-threaded scheme that requires semaphores and locking of critical sections. A rather advanced set of concepts. The Python version requires an external file to be read, because it doesn’t have a powerful literal syntax.

tree_blinking

Example: HTTP form that re-arranges its layout

It is very common to need to have input forms and collect user data. This example shows how beads can rearrange a form based on the pixel density and size of a screen. As you make the window larger or smaller it resizes all the elements. This is different than HTML Flex boxes, as it completely rearranges the form using IF statements and can accomodate a very wide range of display densities and sizes. This means your forms can work on mobile devices which can have pixel densities 5 times that of a desktop. Many desktop forms are unusable on mobile. Complexity rating: 1200 words

screenshot_wide screenshot_very_narrow screenshot_narrow

Example: Chess

The classic board game. Complexity rating: 1500 words

chess

Example: Tic-tac-toe client/server version

The classic board game, but in multiplayer form, where you can play or watch 12 different pairs of people playing across the internet, using TCP sockets. We write both the client and the server in Beads. The server publishes the game state, and the client subscribe to the published shared mutable state. Each of the players receives without any message handling code the updated state of the game. The clients make their moves by invoking remote function calls. You code the program as a standalone, then split the code into two parts. Client/server has never been so easy. No messy API’s for message handling, all encoding and decoding is done automatically, and packets are sent in binary not JSON for maxiumum compactness and performance. A complexity rating of 1500 words.

screenshot

Example: Tic-tac-toe game standalone version

The classic children’s game, two player (no AI). Complexity rating: 520 words

tictactoe

Example: Color picker utility

A handy tool for programming; shows the HTML named colors, sorted in a convenient to use sort order. Approx. 1300 words.

screenshot

Example: Bearsweeper game

The classic Minesweeper game, recast with a Bear in the starring role. Complexity rating: 1000 words

game1_small

Example: Lumberjack game

A very simple wood chopping game, built for little kids. A rewrite of an existing React/TS game that is can be run here. We compare the two implementations to see how it differs in word count, number of dependencies, memory usage. Complexity rating: 750 words

lumberjack_screenshot

Example: Calculator

The classic Apple calculator program, except without the bugs that Apple has! Complexity rating: 500 words calculator

Example: Snake game

The classic snake game as popularized by Nokia cellphones. Probably the most fun per line of code ever made. Program complexity rating: 500 words.

snake_animated

Example: FizzBuzz, graphical style

This is classic tiny program people write, where you take the numbers from 1 to 100, and draw either “Fizz”, “Buzz” or the number, depending on the remainder when dividing by 3 and 5. This one is a bit fancier than normal, shows how you can store persistent data using cookies, and how auto refresh occurs.

screenshot

Example: Sort method contest

The classic bubble sorting algorithm is pitted against the just slightly more complicated but a zillion times faster Quicksort amethod. Watch the two side by side sort the same number list, and see why Quicksort is so much more clever, by moving things larger distances. The larger the sample size the more terrible the bubble sort works. Program complexity rating: 440 words.

screenshot_bubble_400

Example: Scrolling to a block

This very short program shows how you can control the browser to scroll to a particular block on the screen.

screenshot

Example: Wristwatch simulation

This simple program simulates a wristwatch. Program complexity rating: 180 words.

watch_example_animated

Example: Analog clock

This simple program will draw a clock on the screen. This is among the shortest possible graphical programs one can imagine. Program complexity rating: 150 words.

clock_screenshot

Example: Fibonacci sequences

screenshot

This example shows you how to calculate the famous Fibonacci sequence of numbers.