Forem: Mohammad Sarabi

The Art of Chaos: Generating Stunning Fractals with JavaScript

Mohammad Sarabi — Wed, 08 Oct 2025 13:39:56 +0000

Believe it or not, the beautiful fractal star below was not carefully designed by an artist, nor was it generated by a complex mathematical formula. It was generated by a game of chance, following simple rules, over and over.

Chaos Game is a simple method used for creating a fractal using a polygon and an initial random point inside it, then following a set of rules to iteratively creatie a sequence of points.

In this article, we will first explore the magic of Chaos Game and how it is generated. Then we will build a simple version from scratch using HTML Canvas. Finally I will introduce you to chaos-game, an open-source library that I built to generate a wide variety of fractals at lightning speed with high performance using web workers and OffscreenCanvas.

What is the Chaos Game?

To create a fractal using the Chaos Game algorithm, you generally follow this simple set of rules:

Start with N points as the vertices of a polygon (like a triangle).
Pick a starting point by choosing any random point inside the polygon.
Randomly select one of the vertices.
Move a fraction of the distance (for example 0.5) from your current point toward the chosen vertex.
Draw a dot at this new location.
Use this new point as your current location and go back to step 3.

By following these simple rules for a triangle with a jump distance of 0.5 thousands of time, you will see that the triangle does not get filled with random noise. Instead, it will magically form the famous Sierpiński triangle. You can see the process in action in the GIF below.

A Simple Implementation from Scratch

Now that we understand the rules, let's bring it to life. We will build a minimal version of the Chaos Game for a triangle. All we need is a simple HTML file.

Step 1: The Playground

First, we will set up a basic index.html with a <canvas> element as our sheet of paper, and a <script> to hold the logic.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Chaos Game</title>
    <style>
        body {
            background-color: #111;
            display: grid;
            place-items: center;
            height: 100vh;
            margin: 0;
        }
    </style>
</head>
<body>
<canvas id="chaos-canvas" width="800" height="800"></canvas>

<script>
    // Our JavaScript will go here!
</script>
</body>
</html>

We set the width and height of the canvas and give it an id to easily find it with JavaScript.
The simple CSS inside the <style> tag centers the canvas on a dark background.

Step 2: The Logic

Inside the <script> tag, we will bring the Chaos Game to life.

Setting Things Up

First, we get a reference to the canvas and its context, and prepare the canvas for drawing.

const canvas = document.getElementById('chaos-canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'white';  // the color of the drawn dots

const width = canvas.width;
const height = canvas.height;

Rule 1: Define the polygon

We will define the three corners of a triangle using their {x, y} coordinates. We add 50px padding so they are not at the edge of the canvas.

const vertices = [
    {x: width / 2, y: 50},           // Top
    {x: 50, y: height - 50},         // Bottom-left
    {x: width - 50, y: height - 50}, // Bottom-right
];

Rule 2: Pick a starting point

For simplicity, we start at the center of the canvas, but any random point inside the canvas will work.

let currentPoint = {x: width / 2, y: height / 2};

Rule 3: Pick a random vertex

Rules 3 to 6 will repeat many times, so we define a gameloop() function that we can repeatedly call. Inside it, we will select one of the vertices at random.

function gameLoop() {
    const randomIndex = Math.floor(Math.random() * vertices.length);
    const targetVertex = vertices[randomIndex];
}

Rule 4: Move halfway to the target

Now inside our gameloop function, we calculate the midpoint between our current point and the chosen vertex using the (a + b) / 2 formula

function gameLoop() {
    // ...

    currentPoint.x = (currentPoint.x + targetVertex.x) / 2;
    currentPoint.y = (currentPoint.y + targetVertex.y) / 2;
}

Rule 5: Draw a dot at the new location

At the new location we calculated before, we draw a dot as a 1 pixel rectangle.

function gameLoop() {
    // ...

    ctx.fillRect(currentPoint.x, currentPoint.y, 1, 1);
}

Rule 6: Go Back to Step 3 and Repeat

Now that we draw a dot, we can go back to step 3 and repeat the whole process. Steps 3-6 are contained inside our gameLoop function, so we only need to schedule this function for the next frame using requestAnimationFrame.

function gameLoop() {
    // ...

    requestAnimationFrame(gameLoop);
}

// To initially start the game!
gameLoop();

Putting It All Together

Here is the complete code. You can save this as an index.html file and open it to see the Chaos Game in action.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Simple Chaos Game</title>
    <style>
        body {
            background-color: #111;
            display: grid;
            place-items: center;
            height: 100vh;
            margin: 0;
        }
    </style>
</head>
<body>
<canvas id="chaosCanvas" width="800" height="800"></canvas>

<script>
    const canvas = document.getElementById('chaosCanvas');
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = 'white';

    const width = canvas.width;
    const height = canvas.height;

    // 1. Define the vertices of a triangle
    const vertices = [
        {x: width / 2, y: 50},         // Top
        {x: 50, y: height - 50},      // Bottom-left
        {x: width - 50, y: height - 50}, // Bottom-right
    ];

    // 2. Pick a starting point
    let currentPoint = {x: width / 2, y: height / 2};

    function gameLoop() {
        // 3. Roll the dice: pick a random vertex
        const randomIndex = Math.floor(Math.random() * vertices.length);
        const targetVertex = vertices[randomIndex];

        // 4. Take a leap: move halfway
        currentPoint.x = (currentPoint.x + targetVertex.x) / 2;
        currentPoint.y = (currentPoint.y + targetVertex.y) / 2;

        // 5. Mark your spot: draw a 1x1 pixel
        ctx.fillRect(currentPoint.x, currentPoint.y, 1, 1);

        // 6. Repeat
        requestAnimationFrame(gameLoop);
    }

    // Start the game!
    gameLoop();
</script>
</body>
</html>

When you open this you will see the famous Sierpiński triangle slowly emerge from the chaos and noise. As you watch it form, you might notice a few limitations which will bring us to the next section.

The Limitations and Challenges

If you run the code above, you will notice a few things:

It is slow. To get a high-density, crisp image, you need millions or even billions of points. Our simple loop will take forever to achieve that.
We can put steps 3-5 inside a loop to repeat 1000 or 10000 times before waiting for the next browser redraw. This partially counters the slowness, but it will block the main thread and freeze the UI for that duration.
What if you want to use a pentagon, change the default 0.5 jump, change the colors, or add extra vertices? What if you want to restrict the selection of the vertices in a certain way, for example not to select a vertex twice in a row? Our simple script will quickly become too complex.

Supercharging It With `chaos-game` Library

The limitations above drove me to write an open-source, high-performance library for generating high quality fractals very fast, without blocking the main thread. You can play with it at https://m-sarabi.ir/chaos-game/

Using a Web Worker to handle the heavy lifting of all the calculations will ensure that the main thread stays smooth and responsive.
Iterating the whole process in a tight loop in the worker can make it lightning fast without being throttled by requestAnimationFrame.
With a wide range of settings, like sides, size, colors, restrictions and more, it is possible to create many different forms of fractals.
Points drawn on top of each other will increase the intensity of that pixel controlled by gamma correction, which will add depth to the final fractal. You can still get the classic one by setting gammaExponent to 0.

Getting started with the library

Using the chaos-game library as an npm package can be as easy as creating a few buttons and a canvas and wiring them up to the ChaosGame.

On the Chaos Game GitHub page you can see all the settings, the API methods, how to set it up, and maybe drop a ⭐️ on it.

Here you can see a basic usage example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Chaos Game</title>
    <script src="https://cdn.jsdelivr.net/npm/chaos-game@1.2.0"></script>
    <style>
        body {
            background-color: #111;
            color: #eee;
            text-align: center;
        }
        .controls {
            margin: 1rem;
        }
        canvas {
            border: 1px solid #555;
        }
    </style>
</head>
<body>
<h1>Chaos Game JS</h1>
<div class="controls">
    <button id="playBtn">Play</button>
    <button id="stopBtn">Stop</button>
    <button id="resetBtn">Reset</button>
    <button id="downloadBtn">Download PNG</button>
    Sides: <input type="number" id="sidesInput" value="5" min="3"/>
</div>
<canvas id="chaosCanvas" width="800" height="800"></canvas>
<script>
    const canvas = document.getElementById('chaosCanvas');

    // Initialize the game
    const chaosGame = new ChaosGame(canvas,
            {
                canvasSize: 1000,
                sides: 5,
                jumpDistance: 0.618, // The golden ratio
                centerVertex: true,
                restriction: 'no-repeat',
                fgColor: '#FFD700',
                bgColor: '#1A1A1A',
                solidBg: true,
                symmetrical: true,
            });

    // Wire up the controls
    document.getElementById('playBtn').onclick = () => chaosGame.play();
    document.getElementById('stopBtn').onclick = () => chaosGame.stop();
    document.getElementById('resetBtn').onclick = () => chaosGame.reset();
    document.getElementById('downloadBtn').onclick = () => chaosGame.download();

    document.getElementById('sidesInput').onchange = (e) => {
        chaosGame.updateSetting('sides', parseInt(e.target.value));
    };
</script>
</body>
</html>

Conclusion

We started with a simple set of rules for the Chaos Game and saw how beautiful patterns can emerge from chaos with these rules. We built a basic implementation of the Chaos Game in JavaScript, and saw its limitations. Then we saw how a Web Worker-based library like chaos-game can unlock its full potential.

The real fun of the Chaos Game is exploration. You can experiment with the live demo at https://m-sarabi.ir/chaos-game/ right now. Try it with a hexagon, a jump of 0.5858, and center vertex. Or maybe try it with a square, midpoints, and a jump of 2/3.

You can find the chaos-game library on GitHub, npm, and jsDelivr.
Give it a star if you found this interesting!
I'd love to see what you create! Share your fractals and findings in the comments below.
Feel free to open an issue on GitHub if you find any bugs or have a suggestion.

Thanks for reading.

DataPatternX: Candlestick Pattern Analysis Starter Kit

Mohammad Sarabi — Sun, 25 Aug 2024 16:08:37 +0000

This is a submission for the Neon Open Source Starter Kit Challenge : Ultimate Starter Kit

My Kit: DataPatternX

Introducing DataPatternX, a versatile and powerful starter kit designed to simplify candlestick pattern detection and data visualization in financial datasets. Whether you're a seasoned data analyst or just getting started with market analysis, DataPatternX offers a streamlined, modular approach to identifying key market patterns using PostgreSQL and Python.

Project Overview

DataPatternX is structured to ensure ease of use and scalability. The project is organized into key modules:

DataPatternX/
│
├── .env                  # Environment variables
├── requirements.txt      # Python dependencies
├── README.md             # Project documentation
├── DataPatternX.py       # Entry point for running your project
├── .gitignore            # Git ignore file
├── LICENSE               # License information
│
├── config/               # Configuration settings
│   └── config.py
│
├── db/                   # Database connection and query execution
│   ├── connection.py
│   └── queries.py
│
├── pattern_query/        # SQL queries for pattern detection
│   ├── patterns.py
│   └── sql_files/
│       ├── engulfing_bearish.sql
│       ├── engulfing_bullish.sql
│       ...
│
└── plotter/              # Plotting functions and classes
    └── plot_chart.py

DataPatternX is structured to ensure ease of use and scalability. The project is organized into key modules:
Configuration (config/): Manage your environment variables and settings efficiently.
Database Operations (db/): Seamlessly connect to your PostgreSQL database and execute pattern detection queries.
Pattern Queries (pattern_query/): Leverage SQL files to detect various candlestick patterns like engulfing, morning star, and more.
Visualization (plotter/): Generate dynamic and insightful candlestick charts using Plotly, complete with markers highlighting detected patterns.
Main Script (DataPatternX.py): The entry point for running your project, with options for querying patterns, saving results, and plotting charts.

Key Features

Pattern Detection: Supports a variety of candlestick patterns with customizable SQL queries.
Database Flexibility: Easily connect to any PostgreSQL database.
Data Visualization: Create detailed candlestick charts with pattern markers.
Modular Design: Each component is designed to be reusable and extendable. Example usage:

  py DataPatternX.py -t ohlc_data Hammer Engulfing_bullish --plot --save patterns.csv

Link to Kit

You can find the full project on GitHub: DataPatternX. The repository includes a comprehensive README with setup instructions, making it easy to get started.

m-sarabi / DataPatternX

DataPatternX is a starter kit for seamless data pattern analysis. It connects to a PostgreSQL database (e.g., Neon Serverless Postgres), retrieves complex data patterns, and plots charts. The kit includes modules for database connection, query execution, chart plotting, and easy CLI tools for efficient interaction.

DataPatternX

Overview

This starter kit is designed to help you quickly set up a project that connects to a database retrieves candlestick pattern data using complex queries, manages pattern files, and plots charts. The project is modular and easy to extend, making it suitable for various applications.

Features

Database Connection: Easy database connection using db/connection.py.
Data Retrieval: Retrieves data patterns from the database using complex SQL queries defined in db/queries.py.
Chart Plotting: Plots charts using the data retrieved, implemented in plotter/plot_chart.py.
Main Integration: Orchestrates all components in DataPatternX.py.

Getting Started

Prerequisites

Python 3.x (tested with Python 3.12)
PostgreSQL (or a serverless option such as Neon Serverless PostgreSQL)

Installation

Clone the repository:

git clone https://github.com/yourusername/starter-kit.git
cd starter-kit

Install the required Python packages:
```
pip install -r requirements.txt
```
Set up your database. You can use a local SQL instance or a serverless option like Neon Serverless PostgreSQL.

Configuration

To…

View on GitHub

My Journey

While working on DataPatternX, I aimed to create a tool that would not only simplify pattern detection but also make the process more intuitive for users. The choice of PostgreSQL, especially with the flexibility offered by modern solutions like Neon’s serverless Postgres, was driven by its robust support for window functions, essential for the accurate detection of patterns in time series data. Python, with its rich ecosystem of data libraries, complemented this by providing the tools necessary for analysis and visualization.

However, my journey with this project took an unexpected turn. Despite my enthusiasm as an Iranian developer to participate in the Neon Open Source Starter Kit Challenge, I discovered that I was ineligible due to my nationality. Although this was disheartening, I chose to complete and share the project regardless. The experience was rewarding, and I hope it serves as a valuable resource for the community.

Conclusion

Building DataPatternX allowed me to explore the intersection of financial data analysis and open-source development, pushing the boundaries of what I could achieve despite the challenges. I invite you to check out the project, write your thoughts, and explore what it has to offer.

Your feedback is highly valued

How to Switch Your Website to Dark Mode Using CSS and JavaScript

Mohammad Sarabi — Thu, 22 Aug 2024 20:54:50 +0000

Introduction

Dark mode is a display setting that uses a dark background with light text and elements. It has gained popularity because it looks good and offers several practical benefits.

The benefits of dark mode include:

Reduced Eye Strain: Dark mode can be easier on the eyes, especially in low-light environments, as it reduces the amount of bright light emitted from screens.
Improved Battery Life on OLED Screens: On OLED (Organic Light Emitting Diode) screens, dark mode can save battery life because black pixels are essentially turned off, consuming less power compared to displaying bright colors.

In this tutorial, we will cover how to switch your website to dark mode using CSS and JavaScript. We will start with a simple light-themed web page template and transform it into a website with a toggleable light/dark mode, allowing users to switch between light and dark themes smoothly.

Setting Up the Project

Let's start with a simple light-themed web page template. Then, we'll transform it into a website with a toggleable light/dark mode, allowing users to switch between light and dark themes.

Implementing Dark Mode Styles

Choosing the Colors

The first step is to list all the colors we are using and choose a dark-theme version for each one. In the table below, I have listed all the colors on the page and their corresponding dark versions.

Name	Light version	Dark version
`body-bg`	`#f4f4f4`	`#121212`
`primary-text`	`#333333`	`#e0e0e0`
`header-footer-bg`	`#333333`	`#181818`
`header-footer-text`	`#ffffff`	`#ffffff`
`section-bg`	`#ffffff`	`#1f1f1f`
`secondary-text`	`#006baf`	`#1e90ff`
`shadow`	`rgba(0, 0, 0, 0.1)`	`rgba(0, 0, 0, 0.2)`

Custom Variables

We then use CSS variables to create a dark and light class on body with those variables.

body.dark {
    --body-bg: #121212;
    --primary-text: #e0e0e0;
    --header-footer-bg: #1f1f1f;
    --header-footer-text: #ffffff;
    --section-bg: #1f1f1f;
    --secondary-text: #1e90ff;
    --shadow: rgba(0, 0, 0, 0.2);
}

body.light {
    --body-bg: #f4f4f4;
    --primary-text: #333333;
    --header-footer-bg: #333333;
    --header-footer-text: #ffffff;
    --section-bg: #ffffff;
    --secondary-text: #006baf;
    --shadow: rgba(0, 0, 0, 0.1);
}

You can read about CSS variables in Using CSS custom properties. Essentially, they are entities defined using two dashes (--) that store values for reuse in a document. CSS variables make maintenance easier by allowing changes to update automatically.

Dynamic Element Colors

We use the var() CSS function to insert the values of the CSS variables. This way, we can dynamically change the color and update one variable to reflect changes across the entire document, instead of changing each one manually.

Here is an example of the nav element and its children:

body {
  background-color: var(--body-bg);
  color: var(--primary-text);
}

header, footer {
  background-color: var(--header-footer-bg);
  color: var(--header-footer-text);
}

article {
  background-color: var(--section-bg);
  box-shadow: 0 4px 8px var(--shadow);
}

a {
  color: var(--secondary-text);
}

Toggle Light/Dark Mode with JavaScript

Now we can change the class of the body to dark or light to switch the theme. First, add a button to the header and set the changeTheme() function for its click event:

<button onclick="changeTheme()" class="theme-toggle">
    <svg> <!-- icon --> </svg>
</button>

Define the changeTheme() function that toggles the class of the body:

function changeTheme() {
    if (document.body.classList.contains('light')) {
        document.body.classList.remove('light');
        document.body.classList.add('dark');
    } else {
        document.body.classList.remove('dark');
        document.body.classList.add('light');
    }
}

And now users can change the theme of the website by clicking on the button.

You can see the code of the tutorial in the CodePen below

Next Steps

Additionally, you could store the user's theme preference in local storage. Updating the changeTheme() function to save the selected theme and check for it when the page loads will ensure the user's choice is remembered and applied automatically on their next visit.

function changeTheme() {
    if (document.body.classList.contains('light')) {
        document.body.classList.remove('light');
        document.body.classList.add('dark');
    } else {
        document.body.classList.remove('dark');
        document.body.classList.add('light');
    }

    // Save the current theme in localStorage
    const theme = document.body.classList.contains('dark') ? 'dark' : 'light';
    localStorage.setItem('theme', theme);
}

document.addEventListener('DOMContentLoaded', function () {
    // Get the saved theme from localStorage when the page loads
    const savedTheme = localStorage.getItem('theme') || 'light';
    document.body.classList.add(savedTheme);
});

Adding the color-scheme: dark; property when in the dark theme can also ensure that some elements, which are otherwise hard to style, will have their styles changed by the browser.

body.dark {
  color-scheme: dark;
}

Conclusion

In conclusion, adding dark mode to your website can improve user experience by reducing eye strain and extending battery life on OLED screens. By following this guide, you can easily set up a light/dark mode toggle using CSS and JavaScript. Customize the dark mode to fit your design.

Share your implementations or ask questions in the comments below.

How to Create a Matrix Rain Effect with JavaScript

Mohammad Sarabi — Wed, 21 Aug 2024 13:10:56 +0000

We all remember the iconic raining code from The Matrix. If you have ever wanted to create a similar effect in your own project, this tutorial will show you step by step how to create it.

This tutorial is an oversimplified version of my rain-fall library, which is fully customizable with fonts, colors, size, and more, and is fully responsive. Here is a link to the GitHub repository where you can find the complete source code, examples, and a demo.

The rain-char library demo is available in m-sarabi.ir/rain-char

Getting Started

First, let's set up our environment.
We will create an HTML file where we'll include a canvas element for rendering the rain effect:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RainChar Effect</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }

        canvas {
            display: block;
            background-color: black;
        }
    </style>
</head>
<body>
<canvas id="rain-effect"></canvas>
<script src="script.js"></script>
</body>
</html>

In this HTML setup, we have a full-screen canvas where our rain effect will be rendered.

The RainChar Class

Let's now walk through the core functionality of our RainChar class.

1. Constructor

In the constructor, we first define the parameters of our rain effect: font, size, characters, background color, and font color.

We then set up the canvas determining the size and filling the background color.

Then we create the particle array that will store each character's position and size.

class RainChar {
    constructor(font, charSize, chars, bg, fg) {
        // Defining the parameters
        this.font = font;
        this.charSize = charSize;
        this.chars = chars;
        this.bg = bg;
        this.fg = fg;

        // Setting up the canvas
        const canvas = document.getElementById('rain-effect');
        this.context = canvas.getContext('2d');
        this.size = [canvas.offsetWidth, canvas.offsetHeight];
        canvas.width = this.size[0];
        canvas.height = this.size[1];

        this.context.fillStyle = this.bg;
        this.context.fillRect(0, 0, ...this.size);

        // Creating the particles array
        this.particles = [];
        const particleCount = this.size[0] * this.size[1] / (this.charSize ** 2) / 10;

        for (let i = 0; i < particleCount; i++) {
            // We will create an array of particles using the newParticle method that we define later in the code.
            this.particles.push(this.newParticle());
        }
    }
}

The number of characters is roughly one-tenth of the area of the canvas divided by the size of the character.

2. Creating New Particles

We represent each particle as an object with a random position and size.

    newParticle() {
        return {
            x: Math.random() * this.size[0],
            y: -Math.random() * this.size[1] * 2,
            size: Math.floor(Math.random() * (this.charSize * 2 - this.charSize / 2) + this.charSize / 2),
        };
    }

Particle size is a random value between half and double the character size.

Each particle will be positioned somewhere outside the canvas at the top, later we animate them downward.

3. Drawing Particles

Now that we have an array of particles (we created the array of particles in the constructor using the newParticle method), We have to render each one on the canvas. We define the drawParticles method to handle the rendering:

    drawParticles() {
        this.context.fillStyle = this.fg;
        this.particles.forEach(particle => {
            this.context.font = `${particle.size}px ${this.font}`;
            const randomChar = this.chars[Math.floor(Math.random() * this.chars.length)];
            this.context.fillText(randomChar, particle.x, particle.y);
        });
    }

We set the fill style to the font color.

For each particle, we set the font size and get a random character from the chars.

Lastly, we render the particle on the canvas with the fillText method.

4. Updating Particles

For each particle, after we draw it on the canvas, we need to move it downward by the particle size, simulating the falling effect.

    updateParticles() {
        this.particles.forEach(particle => {
            if (particle.y > this.size[1]) {
                Object.assign(particle, this.newParticle());
            } else {
                particle.y += particle.size;
            }
        });
    }

We check if the particle has reached the bottom of the canvas. If it has, we reset it by assigning it a new particle using the newParticle() method.

5. Clearing the Canvas

Before redrawing the particles, we need to clear the canvas. We do this by partially erasing the previous frame, creating a smooth trail effect.

    clearCanvas() {
        this.context.globalAlpha = 0.25;
        this.context.fillStyle = this.bg;
        this.context.fillRect(0, 0, ...this.size);
        this.context.globalAlpha = 1;
    }

With the globalAlpha property we control how strong the erasing is. It can control the length of the trail.

6. The Play Method

Finally, we need to create the animation by continuously clearing the canvas, drawing particles, and updating their positions.

    play() {
        this.clearCanvas();
        this.drawParticles();
        this.updateParticles();
        setTimeout(() => {
            this.play();
        }, 50);
    }

The play method calls the clearCanvas, drawParticles, and updateParticles methods in a loop, using the setTimeout to call the play method every 50 milliseconds for roughly 20 frames per second, with higher frame rates resulting in faster animation.

Putting It All Together

We can now create an instance of the RainChar class and start the animation by calling the play method:

const chars = 'ABCDEFGHIJKLMNOPRSTUVWXYZ';
const rain = new RainChar('monospace', 20, chars, 'black', 'lime');
rain.play();

We have created an instance of the RainChar class and called the play method to start the animation.

You can see the code of this tutorial in action in the Codepen below:

Conclusion

With RainChar, you can easily add a dynamic and eye-catching rain effect to your web projects. The library is fully customizable, allowing you to experiment with different fonts, colors, and character sets, and is responsive to resizing. Try it out, and see what stunning visuals you can create!

Feel free to explore the GitHub repository for more examples and customization options. If you have any questions or improvements, don’t hesitate to drop a comment below! If you liked it please share it with your friends!

Deploying Your Telegram Bots on Cloudflare Workers: A Step-by-Step Guide

Mohammad Sarabi — Mon, 19 Aug 2024 08:57:42 +0000

Are you ready to build a Telegram bot without the hassle of managing servers? With Cloudflare Workers, you can deploy your bot in minutes, leveraging a powerful, scalable platform that takes care of all the heavy lifting. In this guide, we'll walk you through the entire process - from setting up your development environment to deploying a fully functional Telegram bot - all using a simple, easy-to-follow template in TypeScript. Let's dive in and get your bot up and running.

🚀 Why Choose Cloudflare Workers for Your Telegram Bot?

Cloudflare Workers is a serverless platform that allows developers to run JavaScript, TypeScript, or Python code at the edge, close to your users, with minimal latency. By leveraging this platform, you can deploy a Telegram bot that is not only lightning-fast but also highly scalable. No need to manage servers, handle scaling, or deal with complex infrastructure - Cloudflare takes care of everything for you.

📚 Step-by-Step Guide to Building Your Bot

Now let's dive into the process.

👷Create a New Worker Project

1- Set Up Your Development Environment

Before we start building, you'll need to install wrangler, Cloudflare's command-line tool for managing Workers:

npm install wrangler

Tip: If you don't have npm installed, you can easily get it by downloading and installing Node.js from nodejs.org.

2- Create a New Worker Using the Telegram Bot Template

Once wrangler is set up, navigate to the directory where you'd like your worker files to reside. Run the following command to create your worker:

npm create cloudflare@latest MY_WORKER_NAME

Replace MY_WORKER_NAME with your preferred name for the worker. If this is your first time using wrangler it will prompt you to connect to your Cloudflare account and authenticate via a browser window-just follow the instructions.

When prompted for the template, select Template from a GitHub repo and enter:

https://github.com/m-sarabi/cloudflare-telegram-bot

Then select Typescript when asked.

Please give this repository a Star ⭐️.

3- Initialize Git and Skip Deployment

During the setup, you'll be asked if you want to use Git for version control and if you wish to deploy your worker immediately. I suggest selecting No for both, holding off until we've configured everything.

You should see the message: SUCCESS Application created successfully!

🤖 Set Up Your Telegram Bot with `@BotFather`

1- Use the /newbot command to create your bot.
2- Follow the prompts and take note of the API token provided.

Next, we'll set up environment variables in the wrangler.toml file within your project directory. So add these lines to the file:

[vars]
SECRET = "<SECRET>"
TOKEN = "<API_TOKEN>"

SECRET: Replace <SECRET> with a random token that ensures requests come from your set webhook. It can be 1–256 characters, including A-Z, a-z, 0-9, _, and -.
API_TOKEN: Replace <API_TOKEN> with the API token you got from @BotFather.

After setting these variables, run this command inside your project directory:

npm run cf-typegen

This command regenerates the worker-configuration.d.ts file, reflecting your newly set variables.

💻 Writing Your Bot Logic

Now, let's get into the fun part - coding the bot! In this example we will create this:

Scenario: When a user sends the /start command, the bot displays a message with a button. Upon pressing the button, the bot removes it and sends a follow-up message.

Handle the /start Command

All update handler functions are in the src/Telegram/handlers directory.

We'll start by responding to the /start command with a message and an inline button. Modify src/Telegram/handlers/handleMessage.ts like so:

import { tg } from '../lib/methods';

export async function handleMessage(message: tgTypes.Message) {
    const messageText = message.text;
    const chatId = message.chat.id;
    if (messageText === '/start') {
        await tg.sendMessage({
            text: 'Welcome to my bot! Press the button to accept my rules!',
            chat_id: chatId,
            reply_markup: {
                inline_keyboard: [
                    [{
                        text: 'I Accept',
                        callback_data: 'accept_rules'
                    }]
                ]
            }
        });
    }
}

This code snippet sends a message with an inline keyboard button using the tg.sendMessage method.

Handle Inline Button Presses

When the user presses the inline button, we want the bot to acknowledge this action. Modify src/Telegram/handlers/handleCallbackQuery.ts:

import { tg } from '../lib/methods';

export async function handleCallbackQuery(callbackQuery: tgTypes.CallbackQuery) {
    const data = callbackQuery.data;
    const messageId = callbackQuery.message?.message_id;
    const chatId = callbackQuery.message?.chat.id;
    if (messageId && chatId) {
        if (data === 'accept_rules') {
            await tg.editMessageReplyMarkup({
                chat_id: chatId,
                message_id: messageId,
                reply_markup: undefined
            });
            await tg.sendMessage({
                chat_id: chatId,
                text: 'Thanks for accepting my rules.'
            });
        }
    }
}

This code listens for accept_rules data query and on match removes the inline button and sends a follow-up message using the tg.editMessageReplyMarkup method.

🔗 Registering Your Webhook

With your bot logic in place, it's time to deploy your worker and connect it to Telegram via a webhook.

1- Run wrangler deploy to deploy your worker.
2- Navigate to your Cloudflare dashboard and select Workers & Pages.
3- Next to your project name, click Visit.
4- In the URL bar, append /registerWebhook (e.g., https://my-project.my-username.workers.dev/registerWebhook) and hit enter. If you see "Webhook registered" you've done it correctly!

Once deployed and registered, you can interact with your bot on Telegram. Start by clicking Start (or sending /start), and you should see the welcome message with the inline button.

🧠 Conclusion

Building and deploying Telegram bots has never been easier thanks to Cloudflare Workers. By following this guide, you've harnessed the power of serverless technology to create a bot that's not only scalable and fast but also easy to maintain.

Whether you're building a simple bot for personal use or deploying something more complex for a business, this template provides a solid foundation. Happy coding!

🔗 Resources & Further Reading

Cloudflare Workers Documentation
Telegram Bot API
GitHub Repository for the Template
m-sarabi / cloudflare-telegram-bot

Telegram bot worker to be used on cloudflare workers
Cloudflare Telegram Bot Template

This repository provides an easy-to-use, fully documented template for building Telegram bots using Cloudflare Workers, written in TypeScript It is designed to balance staying as close as possible to the Telegram Bot API while providing ease of use and effortless deployment of serverless Telegram bots on the Cloudflare platform.

Step by step guide

Create a new worker using this template
1. Install wrangler by running npm install wrangler
Note

If you need to install npm, download and install node.js from nodejs.org
1. Go to a directory that you want your worker files to be in and run npm create cloudflare@latest MY_WORKER_NAME Replace MY_WORKER_NAME with a name you like for your worker.
Note

If you are running it for the first time, it will open the browser to connect to your Cloudflare account, follow its instructions.
1. For "What would you like to start with?" Choose Template from a…
View on GitHub

Forem: Mohammad Sarabi

The Art of Chaos: Generating Stunning Fractals with JavaScript

What is the Chaos Game?

A Simple Implementation from Scratch

Step 1: The Playground

Step 2: The Logic

Setting Things Up

Rule 1: Define the polygon

Rule 2: Pick a starting point

Rule 3: Pick a random vertex

Rule 4: Move halfway to the target

Rule 5: Draw a dot at the new location

Rule 6: Go Back to Step 3 and Repeat

Putting It All Together

The Limitations and Challenges

Supercharging It With chaos-game Library

Getting started with the library

Conclusion

DataPatternX: Candlestick Pattern Analysis Starter Kit

My Kit: DataPatternX

Project Overview

Key Features

Link to Kit

m-sarabi / DataPatternX

DataPatternX

Overview

Features

Getting Started

Prerequisites

Installation

Configuration

My Journey

Conclusion

How to Switch Your Website to Dark Mode Using CSS and JavaScript

Introduction

Setting Up the Project

Implementing Dark Mode Styles

Choosing the Colors

Custom Variables

Dynamic Element Colors

Toggle Light/Dark Mode with JavaScript

Next Steps

Conclusion

How to Create a Matrix Rain Effect with JavaScript

Getting Started

The RainChar Class

1. Constructor

2. Creating New Particles

3. Drawing Particles

4. Updating Particles

5. Clearing the Canvas

6. The Play Method

Putting It All Together

Conclusion

Deploying Your Telegram Bots on Cloudflare Workers: A Step-by-Step Guide

🚀 Why Choose Cloudflare Workers for Your Telegram Bot?

📚 Step-by-Step Guide to Building Your Bot

👷Create a New Worker Project

🤖 Set Up Your Telegram Bot with @BotFather

💻 Writing Your Bot Logic

Handle the /start Command

Handle Inline Button Presses

🔗 Registering Your Webhook

🧠 Conclusion

🔗 Resources & Further Reading

m-sarabi / cloudflare-telegram-bot

Telegram bot worker to be used on cloudflare workers

Cloudflare Telegram Bot Template

Step by step guide

Create a new worker using this template

Supercharging It With `chaos-game` Library

🤖 Set Up Your Telegram Bot with `@BotFather`