All posts by Richard Herz

Developing the Magic Hex Game with Claude Code

We have a couple drawers in our coffee table with many wind-up toys and some puzzles. One puzzle has a wooden tray in the shape of a hexagonal array and 19 small hexagonal right prisms or tiles, each with an integer from 1 to 19 printed on them. The goal is to place the tiles in the tray such that each of 5 horizontal and 10 diagonal rows add to 38.

Given a choice, and space, I prefer hands-on material objects over web apps. But this wooden puzzle or game has a couple drawbacks: there are too many pieces to keep track of, and one has to mentally recompute the rows sums over and over. It looked like a good condidate for a web app.

Around this time, my subscription to the Claude AI app came to include the Code tab. The Chat tab of Claude can write prompts to generate code snippets to complete web pages, which are called artifacts. In contrast, in the Code tab, in addition to writing prompts you can also directly edit folders of files on your client computer in order to develop complex projects. Having the code on your client lets you make changes in the code directly by yourself, as well as involving multiple files in the project.

I decided to use Claude Code to develop a web app version of the hex game, the Magic Hex Game (opens in new tab). My work spanned three days of part-time work to get a web app that works and looks well. Most work with Code involves writing prompts, which are written descriptions of what I would like Code to do for me.

In the first day, Code quickly got the major components working. I was very impressed. It did have a problem in that some of its “rows” had kinks. I first tried to write prompts to solve this problem but found that it was more effective to go into the Javascript file myself and edit the arrays that defined the rows. I was helped by the comments which Code had written in the file that showed the tile layout in the hex array.

Another help was that Code created, without being asked, a new screen coordinate system with integer increments of the width of a tile. This made it easy for me to specify locations. Code then had a function to convert from these coordinates to screen pixel coordinates, which are useful for small adjustments but not intuitive for layout design.

Adding the row sum indicators was pretty straightforward, first asking for a circle with a field inside for a sum and an arrow whose angle could be specified. Most time was spent getting the indicators placed correctly.

Most of the last two days of development involved adjusting sizes and positions of elements. This took more of my time than having Code get the major elements on screen and the functionality working. For questions on issues related to the project, I switched to Chat mode.

In conclusion, I was very impressed with Claude Code! Having the ability to edit code by hand in Code is an advantage over developing a project in Chat where you can’t edit the code in a project directly during development but must keep writing prompts.

Reactor Networks & React

I realized that the Reactor Networks web lab would be a candidate for converting to a React app. In this lab, web elements such as CSTRs and PFRs are added and removed from the web page. React’s self-contained components, which can be added and removed from the DOM, are designed for this purpose. At this point, I have decided to stick with plain Javascript and my current approach, which is similar to what React does.

In the current approach, functions that create a component such as a PFR are contained in separate JS files. When called, a function returns a template string (template literal) with the HTML that labels and displays the components. The standard JS function insertAdjacentHTML is used to add this component to the DOM. No external data is involved, so this is safe. The standard JS function remove is used to delete the component.

Please send us a message letting us know what you think at support@reactorlab.net

TypeScript and React in the development of web pages and apps

Reactor Lab’s Web Labs are written with plain HTML/CSS/Javascript with only the jQuery library and a plotting library added. Many web sites and apps are built using TypeScript and React. I used Claude AI to help me write an explanation of these tools.

TypeScript is a way to declare values in Javascript as to type, that is, what kind of value it is (function, number, boolean, string, array, etc.) and what operations can be performed on it. Declaring value types is a way to help avoid runtime errors.

JavaScript written with TypeScript is saved in .TS files. A TypeScript compiler continuously checks for type errors while compiling .TS files into standard JavaScript files that can be executed by a web browser alongside the project’s HTML and CSS files.

CSS files are written and handled normally when developing with TypeScript or React.

React enables building complex user interfaces (UI) by composing simple, self-contained components. These components encapsulate UI structure, state, and behavior, and can be reused within a project or shared across multiple projects.

React code in development is written using JSX, a JavaScript syntax extension that looks like HTML/XML embedded in JavaScript. React code is saved in .JSX files.

TypeScript and React can be used independently or can be used together. When TypeScript is used along with React, the code is saved in .TSX files.

The .TSX and .JSX files are run through a transpiler that processes the files and outputs standard Javascript files that can be run in a web browser. A short index.html file loads the Javascript files. In practice, modern build tools like esbuild or Vite handle both TypeScript compilation and JSX transpilation in a single step.

The Javascript files output by the transpiler contain calls to functions in the React runtime Javascript library, which is downloaded by the browser along with the other files in the project. The React runtime library handles the UI display by manipulating the Document Object Model (DOM), such as adding divs and buttons, etc., based on component state changes.

Please send us a message letting us know what you think at support@reactorlab.net

A little history of interactive simulations and PLATO

When I started teaching over 40 years ago, I first thought about writing a textbook. Since there were a couple good textbooks in the field, and since I was fascinated by the visual interface of the new Macintosh computers, which had just been released, I became interested in developing interactive computer simulations.

A colleague, who had written a couple textbooks in another field, once asked me how developing computer simulations compared to writing textbooks. I didn’t have a good answer on the spot, but later thought more about his question. One difference is that textbooks are expected to have a few typos, but computer programs must work. I learned later that the fact that programs must work meant to our patent office that they are “tools” and, thus, property of the university, unlike written articles and books, which are property of the individual professor!

My development of Reactor Lab started in earnest when Apple released HyperCard 2.0 in 1990. The drag and drop visual layout and very high level, plain English programming made it possible for a prof doing research as well as teaching to develop simulations. That said, designing, developing, and debugging computer programs is a very time consuming process.

Because of that, my wish is that, rather than relying on individuals or a small group to make educational simulations, as many resources could be applied to that endeavor as is applied to making computer video games!

As long ago as Reactor Lab was begun, other systems had appeared before. I recently rediscovered PLATO in the 1976 article “The Potential of PLATO” by Evan Jenkins. The PLATO project started at the University of Illinois in 1960 and was the first generalized computer-assisted instruction system.

By 1976, PLATO systems hosted interactive simulations of chemistry experiments. A couple screenshots from Jenkins article are shown below. Used in the experiments were plasma display screens with a 16×16 array of IR sources and detectors to detect where the student touched the screen. The first screen below shows separate components of a laboratory distillation system. The student touched on a component and then touched where it should be placed on the column. The second screen shows a completed system and a plot of results. Spots on the screen allowed student user to change temperatures.

In 1976 I finished graduate school at Berkeley and headed to GM Research. My computer use at Berkeley involved punch cards, and computers at GM were big IBMs in special rooms. It wasn’t until a couple years later that I purchased the first mobile lab computer at GM Research, a DEC PDP 11/03, to do experimental control and data collection. So PLATO in that era was at the forefront of computer development!

PLATO distillation column components in 1976 PLATO distillation column in operation

Please send us a message letting us know what you think at support@reactorlab.net

AI in education – thoughts after a few experiments

At the Web Labs page for AI experiments, I have posted six simulations to date. I am now thinking that current AI agents might not be so helpful for individual students to create simulations during a study session. I have found that it can take quite a few prompts to get a reasonable simulation. So my current thinking is that agent-created simulations may be useful for students in other contexts.

One context might be for students or student groups working on week-long or term projects. Another might be an instructor-led development of a simulation with classroom participation by students.

In many cases, I think the most productive uses of AI agents will be by instructors developing finished simulations for use by their students and for use by the instructors in demonstrations.

Please send us a message letting us know what you think at support@reactorlab.net

How can AI be used in education? Some thoughts

Artificial intelligence agents are getting more powerful by the day. For a couple months, I have been using GitHub Copilot in Visual Studio Code to help develop simulations and to learn about concepts in front-end web programming. In Copilot, you can select between a couple different AI agents. Recently, I subscribed to Anthropic’s Claude to use as a standalone app.

There has been concern expressed in media about students using AI to cheat on assignments and exams. I am not so concerned; “blue book” tests and personal interviews can let students show what they understand. Rather, I want to spend my time thinking how these tools can help people learn. Too many students, you say? Then you need to hire more human instructors, not fewer!

One practice I recommend to instructors is to model how you use AI to do your work and to learn new concepts and techniques. This can be done in live or recorded lessons.

I am thinking about how students themselves can use AI agents to help their studies. One idea is that a student could ask an AI agent to make a simulation that demonstrates a concept they are learning about.

That involves a couple different aspects. One learns how to clearly communicate concepts about a subject in the process of crafting a prompt that produces the desired result. And one learns from a well-crafted simulation.

See my experiments at Web Labs, AI experiments.

Please send us a message letting us know what you think at support@reactorlab.net

Intro to Web Labs

This is from the first page of the Web Labs wiki on our Github site:

Web Labs is a project of ReactorLab.net. Our purpose is to provide labs which help people understand physical systems through active participation.

Many of the labs are interactive simulations of the type “continuous simulation” or “system dynamics simulation.” In this type of simulation, the system evolves continuously as simulation time proceeds. The user can change input parameter values during evolution of the system, thus changing the simulation results.

Some labs are not dynamic but provide one set of outputs with each experiment. Labs 13-15 and 16-18 are like this.

A lab is composed of one or more JavaScript objects representing process units. Each process unit object contains data describing its current and past state, and methods which provide for changes in the unit’s state as simulation time proceeds. A process unit may exchange data with other process units.

In Dynamic labs, simulation time proceeds in incremental steps. At each step, all process units update their inputs from other units, then update their own state based on their current state and the state of the other units from which they get inputs. The methods by which units update their state involve algebraic and ordinary differential equations, and also may involve partial differential equations. This method of stepping in time is the Euler method of approximate solution of ordinary differential equations. Web Lab’s approximate solutions should not be used to design actual systems.

Design Philosophy

We are developing the Labs using plain JavaScript, with few or no libraries.

We construct labs using one or more “process units” which are independent objects but which can send and receive data from each other. This independence allows new labs to be constructed by using existing process units from old labs and adding new units. This is an example of modular simulation.

We have tried to make the code easy to read and understand. Because of this reason, relatively many lines are used to specify lab units and plot info.

For example, in process_plot_info.js there are many lines like this to specify a plot:

plotInfo[pnum]['xAxisShow'] = 1; // 0 false, 1 true
plotInfo[pnum]['xAxisMin'] = 0;
plotInfo[pnum]['xAxisMax'] = 1000;
...
etc.

And in a process unit’s initialize method, variables are specified like this:

initialize : function() {
//
let v = 0;
this.dataHeaders[v] = 'k_300';
this.dataInputs[v] = 'input_field_RateConstant';
this.dataUnits[v] = '(units depend on order)';
this.dataMin[v] = 0;
this.dataMax[v] = 1000;
this.dataDefault[v] = 1.0e-7;
//
v = 1;
...
etc.

The specifications could be shortened by loading values as indexed elements into a single array. That, however, would make the code more difficult to read and write.

While our strategy does result in more lines of code, they don’t all have to be typed separately, with use of copy, paste and edit.

Please send us a message letting us know what you think at support@reactorlab.net

Design your own reactor network in Web Labs

The desktop version of Reactor Lab had a lab that allowed you to design a reactor network with units that you selected and placed on a flowsheet. See our Annual report 2005 at the Desktop Lab tab above. That desktop version was built with the development tool LiveCode. If you have a LiveCode subscription, you can run a copy of the desktop Lab you download from our github site.

We are focusing on our Web Labs, now that we no longer support the desktop version. Today we posted our web version of the networks lab at the Web Labs tab, Reactors, Reactor Networks lab.

This web version was built with simple Javascript with no added libraries. It works by inserting and removing html code linked to Javascript objects as units are added and deleted from the flowsheet. This lab is less complex than apps which also build flowsheets, such as Aspen Plus and COCO, but this lab is easy to use to gain basic understanding of reactors and system dynamics.

Below are three screenshots: one from the new Web Lab (top) and two from the desktop Lab. In the bottom screenshot, you can see a reactor network that utilizes both local desktop units and remote units, where the local and remote units exchange messages over the Internet during a dynamic simulation.

Please send us a message letting us know what you think at support@reactorlab.net

Reactor Networks in Reactor Lab's Web Labs
Reactor Networks in Reactor Lab’s Web Labs (2025)
Reactor Networks in the Desktop Reactor Lab, circa 2005
Reactor Networks in the Desktop Reactor Lab (2005)
Reactor Networks in desktop Reactor Lab
Reactor Networks in desktop Reactor Lab exchanging messages with remote unit on Internet during dynamic simulation (2009)

Please state dimensional units!

I have been looking into developing a Web Lab simulation of a fluidized bed gasifier. Reaction rate equations are needed.

Trying to get rate equations from research papers has been frustrating because the dimensional units of terms in equations are often not stated.

To an editor or peer reviewer, it may look like the author has given all the required equations to duplicate their work, but you learn the truth when you try to use those equations, not just read them!

Please make sure you explicitly state the dimensional units for all terms in all equations, or example units if more than one set of consistent units can be used. Stating dimensional units is mandatory for equations with numerical constants. If equations are dimensionless, please state that.

Reviewers and editors, please check to make sure authors have done this.

On a related note, I ask that chemists reporting reaction rates please state for which type of reactor those rates and equations apply. Usually, a chemist is using a batch reactor, e.g., a test tube or flask but we should not have to assume that. Some chemists might even use a continuous stirred tank (beaker) reactor.

Please send us a message letting us know what you think at support@reactorlab.net