Every page on Elementari has two sides.

  1. Layout - the front side of the page where you design the layout (similar to PowerPoint)
  2. Event Graph - the back side of the page where you can code events and interactions to play by connecting blocks together. Elementari’s Event graph is a unique visual coding environment built for interactive storytelling.

In the top picture, the code uses functions in parallel (or conconcurrent). The code says: “On page start, the frog will move 300px and then rotate 360 degrees in one second.”

The second picture’s code uses the functions in sequence. The code says: “On page start, the frog will move 300px for 1 second and then rotate 360 degree for 1 second..”

eventgraph.png

Example of Elementari Coding

What can students learn by using Elementari to code?

On top of core literacy skills, students develop computational thinking skills when they make their stories interactive. Computational thinking is "thinking (or problem solving) like a computer scientist.” It is analyzing a problem and expressing a solution in a way that a computer can understand. Computational thinking is fundamentally about using mathematical and computational concepts closely related to computer science. These concepts include: sequences, logic, variables, conditionals, events, and functions.

How is visual coding used in the real world?

There are many visual programming tools used in the industries of 3d animation, game design, visual flows, and business logic. Many of them adopt a node-based visual scripting system (just like Elementari). Below are some examples of visual coding from prominent industry standard tools.

unreal engine.png

Unreal Engine Blueprint

Unreal Engine is one of the most powerful game development engines for professional use. The visual coding system is built into the software. The image on the left is a simple example of animation from Unreal Engine’s Event Graph.

In 2019 there were over 100 games gamescon 2019. Unreal Engine has been used to develop indie games to huge hits such as Fortenite, Kingdom Hearts 3, Final Fantasy VII Remake.

blender.png

Blender Nodes

Blender is a free and open source software for 3D animation. The image on the right is a simple use case of a Color Ramp Node.

Blender has been used by professionals to create commercials, anime, games, and feature films. The credit sequence of Wonder Woman and graphics for the Emmys 2018 were created in Blender!

dataflow ibm.png

DataStage Flow by IMB

DataStage Flow Designer by IBM. which is used for data integration and workflow applications. It can be used to automate maintenance of server databases. Similarly SQL Server Integration Services by Microsoft does the same.

Both of these services are used by large scale enterprises.

Visual coding can be more than coding

Node based visual scripting is graphically very similar to flow charts. Flow charts generally are used to visualize a workflow, process, and logic. They allow us to graphically decompose a process into parts and spell out the logic.

Flow charts are used when creating any standard operating procedure (SOP), a set of step-by-step instructions compiled by an organization to help workers carry out complex routine operations. SOPs aim to achieve efficiency, quality output and uniformity of performance, while reducing miscommunication and failure to comply with industry regulations.

Flow charts can be used in any field to:

  1. Document and analyze a process.
  2. Standardize a process for efficiency and quality.
  3. Communicate a process for training or understanding by other parts of the organization.
  4. Identify bottlenecks, redundancies and unnecessary steps in a process and improve it.

Flow charts are also used by most computer programmers to write "pseudocode" which outlines the logic and process of the code. Once the flow chart pseudocode is outlined, communicated, and agreed upon, then the programmers move forward with writing the code out in the specified language or frameworks used (Java, Python, Javascript, etc).