Skip to content
← Back to Community
CodeFlow Experiment
Profile icon

CodeFlow Programming

Team: @pokingaround with @ceybes

⚡⚡⚡ This README is just a quick-start for the environment, please read our CODELAB if you want to explore the project! Also, check the project from Github Repo

We developed this language (programming environment/test platform for natural algorithmic conversation) to incorporate chatbots and natural language to create an algorithmic conversation experience. When the repo is run, the figure below will be seen. We included pixel values similar to a ruler on the screen to help better plan the user's code.

start screen

You can draw and animate things on the screen. The system is powered by p5.js, a Javascript client-side library for creating graphic and interactive experiences, based on the core principles of Processing. Let’s see one example to understand the experience better.

first example

To draw a rectangle on the canvas, you can simply say “Draw a rectangle”, “Draw a rect”, “rect”, “rectangle”, “Draw a rectangle at 100, 100”, “Rect at 120, 200, with size 300, 400”... These commands will all draw some rectangles at different positions with different size.

drawing rectangle

When the system processes your command, the result will automatically appear on the canvas.

Technical Specifications

Requirements: 🖥️ 🖥️ Python3.8 ~ Flask1.0.2 🖥️ Dialogflow (If you want to contribute, I can add you to the project) 🖥️ Javascript Libraries ~ p5.js, highlight.js, fuse.js, jquery

We used for easy prototyping, hosting the web server, and let others to easily fork and remix the application.

Flask is required to handle the webhook calls coming from the Dialogflow and generate unique responses for changing parameters.

We prototyped the chatbot with Dialogflow. It is easy to use and fast to integrate with different development environments. Although the platform is designed to answer the most popular use case scenarios for business applications, our experiment revealed some interesting use cases and possible development needs, if we want to achieve a more humanly experience.

We wanted to design this environment as accessible as possible, so, to run the application on every device, we wanted to develop a web application. We used p5.js to create graphics on canvas, highlight.js to show the resulted Javascript code in a readable-format, fuse.js to correct the code if some letters are not correctly typed to the chatbot, jquery to handle UI operations.


The project is an experiment on designing more human-friendly programming environments. It is an active project and open for contribution!

Profile icon
Profile icon
Profile icon
Profile icon