jckr/react-sim

Boilerplate components to create a model simulation with React

Hello. 👋

This is a GitHub profile. There's content here.

Overview

A collection of repositories and code exists below. There are several languages, tools, and more.

Technologies

Languages and tools are used here. Specifics exist.

Additional Data Points

GitHub offers metrics and stats. Some might be viewed here.

Contact

Connections can be made through appropriate channels.

---

Thank you for visiting.

None of this has been written by an AI. All human-made. Thank you.

react-sim's Issues

on mobile, clicking on buttons sometimes double tap

See https://stackoverflow.com/questions/46167604/ios-html-disable-double-tap-to-zoom

doc updates

• home page should link to boids example
• there should be a "guide" page for initData and for updateData
• model props should include hooks and styling

buttons are clunky

step-in icon not centered, clicking might select content.
in general for controls, clicking can select content.

add search to doc website

Create a component to generate videos / gifs from models

All of this can happen client side.

we can turn frames to images: https://www.npmjs.com/package/dom-to-image
we can then compile images to gifs: https://www.npmjs.com/package/animated_gif
or to videos: https://bgrins.github.io/videoconverter.js/

So, we can create a wrapper to a model which will record an image at each tick, and then when complete, will create an animation.

We may need a onTick() hook in order to fire dom-to-image when the inner model animation refreshes, rather than having 2 animations which may not be synchronous.

tutorial fixes

• tutorial mentions a reset button which we've taken away,
• tutorial mentions a state where cells don't change, we should initialize the model in those steps with a dataset that will work that way

examples page

examples page should look more like a gallery with thumbnails for various examples.

Snake example issues

• "longest path" algorithm should check for "boring" hamiltonian circuits first ie see if the current path can fit on some dumb criss cross pattern that fills the screen ("framed z"). snakes in the initial position are guaranteed to match one of these.
• natural movements. when possible, the snake should follow the shortest path from head to fruit. This means: if there is a complete path that goes from tail to head (ie - existing snake), then shortest path from head to fruit, then complete path from fruit to tail, snake should always choose that option. else, snake stays on its current complete path.
  each time a fruit spawns, we check if such a better path can be found. if we find that better path, we stick to it and won't reevaluate until there's a new fruit. If we can't find that path, we stick to the current path - possibly until we hit the fruit on that path.
  We've tried that approach but snake would somehow collide. with better testing and better function definition we can isolate the problems and make it work. besides, having first step done will make the "open space" more likely to be convex and so there should be more path possibilities.
• we've tried rendering the frame with dom elements, and sure it's possible but it doesn't look great. let's scrap this and do canvas. Each segment of the snake can be done as a "pill" of length 2 x 1 with rounded ends. we could even alternate colors to stripe the snake. the head can be a circle with eyes added to the first "pill".

TOC

right now, the TOC is entirely a MDX component. This is great because it's so simple to set up. No need to organize the data on one hand and render it on the other. But there's only one level of indentation and no way to collapse sections etc.

opening this issue to consider if there are better ways to do that.

New example idea: maze generation

• https://codepen.io/collection/DNdMyr

website issues

• react-sim links to jckr.github.io
• most examples way too wide for mobile
• not all links work
• TOC links look like they need 2 clicks to work
• custom control doesn’t show
• simple model doesn't show
• in arranging controls, in the example the controls don’t wrap nicely and are cluttered on mobile

fibonacci example

idk what is the point of the html fibonacci spiral example. it becomes super clunky as dom struggles to have elements of such different sizes with wild values for scale.

icon.now.sh domain stopped working

Change of vocabulary

Working with React-Sim there are some notions which are ambiguous and some names should be changed. Some thoughts:

• Frame -> View. There's an ambiguity between Frame as is, the cel in an animated movie where image is actually rendered, and frame as in RequestAnimationFrame and some kind of time unit. withFrame becomes withView, canvasFrame becomes canvasView, etc.

• Model -> Simulation. (or Sim). If we use View, and something else is called Model, this is reminiscent of MVC. But Model in React-Sim isn't really the same thing (it's closer to the C).

• no change to initData, updateData, Controls, withControls, etc.

dependabot alert about react version

animation between model updates

right now, there is no distinction between:

• the data of the model, which changes each time we run updateData,
• the visual attributes for rendering, which are passed to frames.

but it could be valuable to separate them and to be able to update the latter without necessarily changing the former.
for instance, we can imagine a simulation where we update data every 100ms, but want a smooth animation, so we want to re-render every 1/60s.