Home

STEMCstudio User Guide and Wiki

Welcome to the STEMCstudio wiki!

This is the official documentation for https://www.stemcstudio.com

NOTE: (Oct 3, 2022): This Wiki will soon be replaced by a more up-to-date book. For now you would be advised to use the examples and programs found through the STEMCarXiv as the most reliable sources.

STEMCstudio vision

Expressing and clarifying mathematical and physical ideas through computational modeling.

STEMCstudio in a nutshell.

STEMCstudio is a revolutionary web-based live-programming environment that has been optimized for scientific and educational computing to enhance mathematical, physical, and computational learning. STEMCstudio goes beyond introductory programming environments by providing a sophisticated and scalable - yet easy to use - development experience that allows larger, more complex, computational projects to be tackled without the software engineering hassles of building and deployment. The remarkable and distinguishing features that make this possible are IntelliSense, modular programming, and seamless 3rd party library integration. STEMCstudio is ideal for advanced high-school students, undergraduate students, educators and researchers.

Features and Benefits

STEMCstudio has many other features that have been thoughtfully integrated to enhance the learning environment.

• TypeScript language with optional typing providing syntax and semantic checking, and context assistance in an Integrated Intelligent Development Environment.
• Mainstream Programming Language (TypeScript) with extensive Community and Microsoft support.
• Multi-module/file projects for optimal code organization and reuse.
• Online and in-browser minimizing setup effort and requiring no install.
• Side-by-Side code and output to minimize context switching.
• General Purpose Web-Based Programming paradigm for utility and relevancy.
• GitHub integration for archiving student portfolio and ownership.
• Integrated Testing Framework (Jasmine) for student feedback.
• README markdown file for instructor and student notes.
• Publish/Search capability for program discovery (STEMC arXiv).
• Realtime distributed collaborative editing for mentoring and teamwork.
• Multi-programming-language (HTML, GLSL shaders, TypeScript, CSS, JSON) for flexibility.
• Graphics Processor Unit (GPU) programming using GLSL shaders and WebGL support.
• Dedicated libraries for 3D Computer Graphics.
• Dedicated libraries for Physics, S.I. Units, Physics Engine, and Graphs for rapid prototyping.
• Dedicated libraries for Geometric Algebra for 21st Century geometry.
• Mathematical Operators and Geometric Algebra features for STEM applications.
• MathJAX enabled for Mathematical notation support.
• External Library and CDN support.
• Sophisticated graphing using plot.ly.
• Geogebra-like scripting and diagramming capability using JSXGraph.
• URL sharing of projects.
• Developed with modern tooling to be responsive to change requests.

STEMCstudio philosophy and goals

• Computers are about insight, not just numbers.
• Leverage the synergies between computing, mathematics, and physics to make the whole student learning experience more satisfying and productive.
• Support the modernization of the mathematics and science curriculum.
• Support learning fundamentals and essential subject elements.
• Support access for all.
• Make mathematical and physical modeling an active learning experience.
• Support a constructive, modeling and inquiry-based pedagogy.
• Support an integrated computing and STEM curriculum.
• Consolidate the tools needed for computing across all STEM disciplines, reducing cognitive load for students and teachers alike.
• Support new ways of teaching Geometry and Geometric Algebra by using 3D Computer Graphics.
• Introduce modern software development best practices to the student.

A Brief History of STEMCstudio development

STEMCstudio began in 2010 as a quest to create visualization software for Geometric Algebra, the 21st Century mathematical notation for geometric concepts. It quickly became apparent that the available technologies (Java, Scala, OpenGL) created a software engineering barrier to entry for potential STEM students.

The first breakthrough came with the use of Python running in the browser. By running in the browser, the software engineering barrier was immediately lowered because no installation was required. Additionally, using Python's special methods allowed mathematical notation and the rich set of Geometric Algebra operators to be supported. Using Skulpt as the Python to JavaScript converter and WebGL for 3D computer graphics, the web-based programming environment called geometryzen.org was conceived. At the same time, libraries were provided for Geometric Algebra and Units of Measure.

But the additional layer of Python to JavaScript conversion had a downside. The choice was either to be faithful to Python and run slowly in order to simulate Python correctly, or to use a Python-like language that was more like JavaScript and ran fast but was non-standard. It also became apparent that meaningful student projects would require more flexibility and better code organization using multi-file projects. A less obvious problem is that any popular JavaScript library would require a shim layer and new documentation in order to present a Python Application Programming Interface (API).

In 2012, another breakthrough happened. Microsoft released the language TypeScript, an enhancement to JavaScript for managing the complexity of large projects. Such a language would provide two benefits in the STEM arena. The first would be that TypeScript would allow for an Intelligent Development Environment (IDE), reducing the cognitive load for students and allowing them to focus on the STEM task at hand. A student would be able to use IDE features like context assist popups, hover-over documentation, and be alerted to syntax and semantic errors. In addition, TypeScript would execute as fast as JavaScript, making realistic simulations possible. Finally, TypeScript and JavaScript are mainstream languages of the web era.

Around 2014, STEMCstudio was conceived. The vision had shifted to encompass the idea of a more general-purpose programming tool that would support the integration of computing into the STEM curriculum. Several features were added that were informed by software development best practices that also made sound pedagogical sense. In particlular, multiple file support, automated testing, source code management, search, and documentation.

Between 2015 and 2019, STEMCstudio development continued by adding features that reduced the friction when creating and evolving applications in STEMCstudio. The philosophy is to make the use of the development environment as simple as using a pencil; and like the pencil, the student or educator is not even aware of it. These features included refactoring to rename symbols and files, navigation to symbol definitions and to type definitions, and the ability to find where a symbol is used. The collaboration feature was improved by the addition of a chat capability. Other features added include an Embedding Builder, Editor Preferences, and the ability to customize the workspace appearance.

In 2020, STEMCstudio was presented at the 1st annual JSXGraph conference. This began a collaboration to streamline the use of STEMCstudio for authoring Learning Management System (Moodle) questions. This was a surprising development as STEMCstudio had been conceived for students and educators to used in a more Project Based Learning mode. The collaboration resulted in two workflows for authoring questions; one is specific to JSXGraph and the other is completely general and can be used to author any type of interactive question. A STEMCviewer was also created that loads completed applications rapidly.

Architecturally, STEMCstudio has become a hybrid AngularJS/Angular application built using the Angular CLI and in a @nrwl mono-repository. This positions STEMCstudio in 2021 for a full conversion to Angular, giving a more elegant user experience, and better performance.

Web Application Development Paradigm

STEMCstudio is a general-purpose, browser-based, programming environment optimized to support investigations of a computational, mathematical, and geometric nature. STEMCstudio uses a web application development paradigm typically involving an HTML file, one or more TypeScript files, and a CSS stylesheet. This flexible starting point makes it possible to create any kind of application that runs in a browser.

Design Philosophy

STEMCstudio is designed to provide the extensibility and flexibility required by an expert while at the same time being approachable for a novice programmer. Adherence to modern web-development standards for languages, editing, source code management, and collaboration, results in an environment that is familiar to any professional web developer and allows skills to be transferred into commercial and research settings.

Languages

STEMCstudio programs are defined using the standard browser languages of JavaScript, Hypertext Markup Language (HTML) and Cascading Stylesheets (CSS), but with one significant difference. STEMCstudio employs the open-source language TypeScript, originally developed by Microsoft and now maintained actively by Microsoft and the open-source community. TypeScript is simply JavaScript with additional optional typing and features taken from future JavaScript standards and releases such as ES6 and ES7.

TypeScript was developed to reduce the cognitive load when scaling up programs in size and complexity. While research programs in education tend to be fairly small, the same benefits are accrued. In addition, TypeScript facilitates the so-called Intelligent Development Environment by allowing code completion, context-sensitive help, and semantic error checking. These features have benefits in an educational and research environment because they allow the user to stay focussed on the task at hand and minimize the time spent being side-tracked by simple typing mistakes.

In STEMCstudio, the TypeScript compiler transpiles the program source code into JavaScript in a background thread which enables the code to be executed in the browser. This architecture allows STEMCstudio to run on inexpensive Chromebook computers.

Mathematical Notation and Geometric Algebra

STEMCstudio recognizes the importance of Geometric Algebra as the foundation for coordinate-free computation and meets the challenge of natural operator syntax by employing optional operator overloading. Operator overloading is achieved by a post-processing step that runs after TypeScript to JavaScript transpilation. In this post-processing step, operator syntax is converted to function calls on special class methods. This post-processing step also respects the mathematical conventions that have been adopted for operator precedence (relative strength of operator binding to operands) allowing parenthesis to be dropped and so avoiding cluttered notation. Operator overloading may be enabled in user-defined classes.

3D Graphics and the EIGHT library

One advantage of a programming tool for browser-based applications is that users have access to the parallel processing power and flexibility of a programmable Graphics Processing Unit (GPU) pipeline. In the browser, this graphics API has the name WebGL and is now supported in most major browsers including Google Chrome (recommended for STEMCstudio), Firefox, Safari, and Internet Explorer 11.

STEMCstudio supports both close-to-the-metal programming directly against the WebGL API (with TypeScript IDE support) as well as a layered API that integrates with Geometric Algebra through the open-source EIGHT library. At the highest level of abstraction, the EIGHT library provides off-the-shelf mathematical shapes such as cubes, spheres, cones and cylinders, parameterized surfaces and curves, arrows and basis representations. These high-level abstractions are useful for Physics simulations and demonstrations. At the lowest level, but just above the raw WebGL API, EIGHT provides convenient and very flexible access to the graphics pipeline. This is useful for geometric explorations of translations, rotations, and scaling.

It should be noted that the programmable nature of the WebGL pipeline makes it possible to use WebGL for 2D as well as 3D applications.

2D Graphics and the HTML5 Canvas

The document object model (DOM) has the HTML5 canvas (HTMLCanvasElement) which may be used for either WebGL or for 2D applications directly. The canvas API is particularly well suited to plotting, labeling, keyboard and mouse manipulation. STEMCstudio incorporates the following popular APIs that use the the canvas API or Scalable Vector Graphics (SVG) for 2D graphics:

1. JSXGraph: 2D Euclidean graphics similar to Geogebra except that user can directly script the behavior.
2. Plotly: Various data graphing.
3. d3: Dynamic Data Driven documents.

Editor

The STEMCstudio editor is based upon the powerful and popular HTML-based multi-language editor known as ACE.

The editor supports syntax coloring, undo-redo, search-replace, syntax error highlighting (HTML, TypeScript, GLSL), line numbering, and code folding.

Source Code Management

Browsers intentionally sandbox the execution environment by preventing access to the users' file system. This is to prevent malicious scripts downloaded from the web from attacking the users' system. This leaves a browser based IDE with two options for saving a user project. One option is to save the code to a cache in the browser known as local storage. The other is to save the user project source code to the cloud. STEMCstudio does both. When STEMCstudio detects a pause in the users' keystrokes, it saves the code automatically to Local Storage (which is backed up by the file system and thus persists across browser sessions). STEMCstudio also supports on-demand persistence of code to the popular source-code repository known as GitHub. Code is stored in the form of a Gist. A Gist is a project containing only files and no folders. Code is stored in the users' personal GitHub account and so the user of STEMCstudio has full ownership of their projects and code.

A futher benefit of saving code to the GitHub cloud is the creation of a permanent URL which allows projects to be shared by sharing the URL.

Publishing, Searching, and the STEMC arXiv (temporarily removed)

Having your code safely tucked away in your own GitHub account is all very well, but how can others users search and find your interesting projects? STEMCstudio introduces a publishing paradigm called the STEMC arXiv (the X is to be pronounce like Chi). You may publish your projects to this archive. This means that your project will be indexed based upon its title, the author name, and keywords, establishing a searchable link to your GitHub Gist project (the archive does not store your project content).

This feature was withdrawn because it did not offer a way to satisfactorily curate examples. A new design is anticipated to allow educators to share and find useful examples.

Age 10 to 100+

The standards-based nature of STEMCstudio and the use of contemporary programming tools makes it meaningless to assign a narrow age range for prospective users. Certainly, the use of JavaScript (or TypeScript) sets a lower age bound. The proliferation of coding camps for youngsters suggests that JavaScript may provide a suitable recreational introduction to a "serious" language for a 10-year-old. However, just as JavaScript is used by software professionals, STEMCstudio should present few limitations in a higher educational setting. With this spectrum of ages in mind, combined with it STEMCstudios' flexibility, STEMCstudio may be used on a continuum of computer-integrated learning of mathematics and the sciences.