switch backdrop to ()

Description

The block changes the Stage’s backdrop to the specified one.

Example

RGB Image Processing Using AI and Block Coding in PictoBlox

Learn how to explore the fundamentals of digital colours using PictoBlox’s Image Processing extension. This project demonstrates how to break down any image into its primary colour components by converting the stage into green and blue channels in a continuous loop!

Introduction

This project teaches students how to break down a full-colour image into its three primary colour channels — red, green, and blue — using PictoBlox’s AI-powered Image Processing extension. Each channel reveals different information about the original image, laying the groundwork for understanding how neural networks and machine learning models process visual data.

The block-coded script runs automatically when the green flag is clicked, cycling through three stages:

Stage 1 — Red Channel: Displays how the red colour intensity is distributed across the image
Stage 2 — Green Channel: Reveals the green colour information within the scene
Stage 3 — Blue Channel: Shows the blue component that completes the full RGB model

Prerequisites

Step 1: Open PictoBlox

Step 2: Add the Image Processing Extension

Click the Add Extension button (purple icon) at the bottom left of the screen.
Search for ‘Image Processing‘ in the extension library.
Click Add. The Image Processing extension will now appear in your palette side.

Step 3: Prepare Your Backdrops

This project uses three custom backdrops labelled:

Image Processing Red Channel
Image Processing Green Channel
Image Processing Blue Channel

To add these backdrops, click the Choose a Backdrop button and upload or create each one. These backdrops act as contextual labels that tell the audience which channel is currently being displayed.

STEM Concepts Behind RGB Image Processing

What is the RGB colour model?

Every digital image on a screen is made up of millions of tiny pixels. Each pixel contains three values – one for red, one for green, and one for blue – each ranging from 0 to 255. By combining these three channels, screens produce over 16 million colours. This is the foundation of all digital imaging systems, from smartphone cameras to satellite imagery used in AI-based remote sensing.

How AI Uses Colour Channels in Computer Vision

Modern AI and machine learning models, particularly Convolutional Neural Networks (CNNs), process images channel by channel. When a model identifies a face, detects a tumour in an X-ray, or classifies a plant species, it analyses the R, G, and B pixel values independently before combining that information. Understanding this concept is the first step toward building your own image classification models using AI.

RED

The red channel highlights warm tones and high-contrast edges in an image. It is particularly important in face recognition and skin-tone detection algorithms.

GREEN

The green channel carries the most luminance (brightness) information. It is the primary channel used in night-vision imaging and vegetation analysis (NDVI) in environmental AI.

BLUE

The blue channel captures sky, water, and cool-tone details. It plays a key role in atmospheric correction in satellite imagery and underwater computer vision applications.

Step-by-Step Code Walkthrough

The complete script runs inside a ‘forever’ loop triggered by the ‘When Green Flag Clicked’ event. Here is how to structure each section:

Red Channel Block Sequence

Place a ‘Wait 1 Seconds’ block from Control palette to give the project a startup pause.
Add a ‘Switch Backdrop to ‘Image Processing Red Channel’ block from the looks palette.
Add a ‘Convert Stage Image to Red Channel’ block from the Image Processing palette.
Place a ‘Wait 3 Seconds’ block to let you observe the result.
Add a ‘Reset All’ block to restore the original image.
Place another ‘Wait 1 Seconds’ block before transitioning to the next channel.

Green Channel Block Sequence

Repeat the same pattern as the Red Channel but replace the backdrop and the conversion block place inside the forever block:

Add ‘Switch Backdrop to ‘Image Processing Green Channel’.
Place a ‘Wait 1 Seconds’ block from the Control palette.
Add ‘Convert Stage Image to Green Channel’.
Add ‘Wait 3 Seconds’, then ‘Reset All’, then Wait 1 Second.

Blue Channel Block Sequence

Complete the cycle with the Blue Channel:

Add ‘Switch Backdrop to ‘Image Processing Blue Channel’.
Place a ‘Wait 1 Second’ block from the Control palette.
Add ‘Convert Stage Image to Blue Channel’.
Add ‘Wait 3 Seconds’, then ‘Reset All’, then ‘Wait 1 Second’.

Understanding the Output: What Does Each Channel Show?

When you run the project, you will observe three distinct visual outputs. Here is how to interpret what you see through an AI and computer vision lens:

Red Channel Output: Areas that appear bright white have high red intensity (value close to 255). Dark areas have little to no red pigment. This is similar to how thermal imaging highlights heat signatures.
Green Channel Output: The green channel often appears brightest in natural scenes because human eyes are most sensitive to green light. AI-based plant health monitoring systems exploit this channel heavily.
Blue Channel Output: Blue dominates in sky, water, and artificially lit scenes. Security cameras and face-detection systems often rely on blue-channel data in low-light conditions.

Real-World AI and Machine Learning Connections

This project is not just a visual exercise — it directly connects to how professional AI systems operate:
Medical Imaging AI: MRI and CT scan analysis software separates image channels to detect anomalies in tissue that are invisible to the naked eye.
Autonomous Vehicles: Self-driving car AI processes RGB frames from cameras at 30+ frames per second, extracting lane markings, traffic signs, and obstacles from each colour channel.
Agricultural Drones: Precision farming drones use colour channel separation to assess crop health using the Normalised Difference Vegetation Index (NDVI) — a key metric derived from red and green channel data.
Facial Recognition Systems: Modern biometric systems use colour channel decomposition as a preprocessing step before running face-matching algorithms.

Output

Conclusion

Congratulations! You have successfully built an RGB image processing project in PictoBlox that demonstrates one of the most fundamental concepts in artificial intelligence and machine learning — colour channel analysis. In this project, you learned how digital images are structured using the RGB colour model, how AI systems process image data channel by channel, and how to use block coding to automate a sequential image analysis workflow. These skills form the foundation of computer vision — one of the fastest-growing areas of AI and technology today.

Object Counting Bot in Block Coding using Object Detection

Learn how to use the Object Detection extension of PictoBlox's Machine Learning Environment to count specific targets in images by writing Block code.

Introduction

In this example project we are going to create a Machine Learning Model which can count number of nuts and bolts from the camera feed or images.

Object Detection in Machine Learning Environment

Object Detection is an extension of the ML environment that allows users to detect images and making bounding box into different classes. This feature is available only in the desktop version of PictoBlox for Windows, macOS, or Linux. As part of the Object Detection workflow, users can add classes, upload data, train the model, test the model, and export the model to the Block Coding Environment.

Opening Image Detection Workflow

Alert: The Machine Learning Environment for model creation is available in the only desktop version of PictoBlox for Windows, macOS, or Linux. It is not available in Web, Android, and iOS versions.

Follow the steps below:

Open PictoBlox and create a new file.
Select the Block Coding Environment.
Select the “Open ML Environment” option under the “Files” tab to access the ML Environment.
You’ll be greeted with the following screen.
Click on “Create New Project”.
A window will open. Type in a project name of your choice and select the “Object Detection” extension. Click the “Create Project” button to open the Object Detection window.

You shall see the Object Detection workflow. Your environment is all set.

Collecting and Uploading the Data

Uploading images from your device’s hard drive

Now it’s time to upload the images which you downloaded from another source or captured from your camera. Click on the “Select from device” option from the Import Images block.
Now click on the “Choose images from your computer” and go to the folder where you downloaded your images.
Select all images which you want to upload then click on “open” option.
Now page of PictoBlox looks like:

Making Bounding Box – Labelling Images

Labeling is essential for Object Detection. Click on the “Bbox” tab to make the labels.

Notes: Notice how the targets are marked with a bounding box. The labels appear in the “Label List” column on the right.
To create the bounding box in the images, click on the “Create Box” button, to create a bounding box. After the box is drawn, go to the “Label List” column and click on the edit button, and type in a name for the object under the bounding box. This name will become a class. Once you’ve entered the name, click on the tick mark to label the object.
File List: It shows the list of images available for labeling in the project.
Label List: It shows the list of Labels created for the selected image.
Class Info: It shows the summary of the classes with the total number of bounding boxes created for each class.
You can view all the images under the “Image” tab.

Training the Model

In Object Detection, the model must locate and identify all the targets in the given image. This makes Object Detection a complex task to execute. Hence, the hyperparameters work differently in the Object Detection Extension.

Go to the “Train” tab. You should see the following screen:
Click on the “Train New Model” button.
Select all the classes, and click on “Generate Dataset”.
Once the dataset is generated, click “Next”. You shall see the training configurations.
Specify your hyperparameters. If the numbers go out of range, PictoBlox will show a message.
Click “Create”, It creates new model according to inserting value of hyperparameter.
Click “Start Training”, If desired performance is reached, click on the “Stop”
1. Total Loss
2. Regularization Loss
3. Localization Loss
4. Classification Loss
After the training is completed, you’ll see four loss graphs:

Note: Training an Object Detection model is a time taking task. It might take a couple of hours to complete training
You’ll be able to see the graphs under the “Graphs” panel. Click on the buttons to view the graph.
1. Graph between “Total loss” and “Number of steps”.
2. Graph between “Regularization loss” and “Number of steps”.
3. Graph between “Localization” and “Number of steps”.
4. Graph between “Classification loss” and “Number of steps”.

Evaluating the Model

Now, let’s move to the “Evaluate” tab. You can view True Positives, False Negatives, and False Positives for each class here along with metrics like Precision and Recall.

Testing the Model

The model will be tested by uploading an Image from device:

Export in Block Coding

Click on the “PictoBlox” button, and PictoBlox will load your model into the Block Coding Environment if you have opened the ML Environment in the Block Coding.

Code

The idea is simple, we’ll add image samples in the “Backdrops” column. We’ll keep cycling through the backdrops and keep predicting the image on the stage.

Add testing images in the backdrop and delete default backdrop.
Now, come back to the coding tab and select the Tobi sprite.
We’ll start by adding a when flag clicked block from the Events palette.
Add () bounding box block from the Machine Learning palette. Select the “hide” option.
Follow it up with a set detection threshold to () block from the Machine Learning palette and set the drop-down to 0.5.
Add switch backdrop to () block from the Looks palette. Select any image.
Add a forever block from the Control palette
Add analyse image from() block from the Machine Learning palette. Select the “stage” option.
Add () bounding box block from the Machine Learning palette. Select the “show” option.
Add two blocks of say () for () seconds from the Looks palette.
Inside the say block add join () () block from operator palette.
Inside the join block write statement at first empty place and at second empty place add get number of () detected? from the Machine Learning palette.
Select the “Nut” option for first get number of () detected and for second choose “Bolt” option.
Add the () bounding box block from the Looks palette. Select the “hide” option.
Finally, add the next backdrop block from the Looks palette below the () bounding box block.

Final Result