JSFiddle - React, Tailwind, and code Playground

by smarko

HTML

<div id="info">What is this: what you see here is interactive visualization of the algorithm, which simulates "if enough signals in, then as many signals out as possible" (with certain additional features). Two more colorful greens indicate that a node has just been activated or that there is some output delay left, light green indicates that a node is about to output a signal and red indicates that node is in a cooldown mode meaning that incoming signals won't be noticed for a moment. Try this: click or touch all of the outermost nodes once and let process advance until nothing seems to happen.</div>
<div id="innertimerdisplay">0.0</div>
<div id="content">
<svg width="800" height="800" viewBox="0 0 800 800" id="graph">
<defs>
<marker id="triangle"
viewBox="0 0 10 10" refX="0" refY="5" 
markerUnits="strokeWidth"
markerWidth="8" markerHeight="6"
orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z" />
</marker>  
<pattern id="diagonalHatch" width="10" height="10" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">
  <line x1="0" y1="0" x2="0" y2="10" style="stroke:black; stroke-width:1" />
</pattern>
</defs>
</svg>
<br/><button id="resetbutton">Reset signals</button>
</div>

CSS

body {
	margin: 10px 10px 40px 10px;
	font-family: Tahoma, Geneva, sans-serif;
}

#innertimerdisplay {
	font-size: 10pt;
	color: #bbbbbb;
	margin: 20px;
}

#infodisplay {
	position: absolute;;
	top: 20px;
	left: 20px;
	font-size: 10pt;
	color: #bbbbbb;
	margin: 0px;
}

#info {
	font-size: 9pt;
	line-height: 1.4em;
}

#content {
	text-align: center;
}

#graph {
	border: 1px solid #dddddd;
}

.initnode {
	background-color: red;
	transition: background-color 5s;
}

.triggerednode {
	background-color: green;
	transition: background-color 1s;
}

#resetbutton {
	margin-top: 14px;
}

JavaScript

// Symbet v0.51

// What is this: what you see here is interactive visualization of the algorithm, which simulates "if enough signals in, then as many signals out as possible" (with certain additional features). Two more colorful greens indicate that a node has just been activated or that there is some output delay left, light green indicates that a node is about to output a signal and red indicates that node is in a cooldown mode meaning that incoming signals won't be noticed for a moment.

// Try this: click or touch all of the outermost nodes once and let process advance until nothing seems to happen.

// Copyright 2014, 2016 Marko Seppänen, http://hoito.org

var TIME_SLICE_LENGTH = 0.2;
var TIME_TO_RUN = 100.0;
var REFRESH_RATE = 1000;

var Symbe = function Symbe(id, connectedToIds, output_delay_left, output_ready, cx, cy) {

	this.cooldown_time = 0.6;
	this.inputsignal_timewindow_length = 3.0;
	this.inputsignal_amount_minimum = 2;
	this.cooldown_trigger_amount = 4;
	this.output_ready_count = 0;
	this.output_delay_length = 0.4;
	this.inputjoins_max = 10;
	this.inputsignal_count = 0;
	this.output_delay_left = 0;
	this.cooldown_time_left = 0;
	this.output_ready = false;
	this.cooldown_triggered = false;
	this.inputsignal_first_arrival;

	this.total_output_ready_count = 0;

	this.id = id;
	this.connectedToIds = connectedToIds;
	this.output_delay_left = output_delay_left;
	this.output_ready = output_ready;

	if (output_ready) {
		this.output_ready_count = 1;
	}

	this.cx = cx;
	this.cy = cy;

};

var symbet;
initSymbet();

var innertime = 0.0;
var refreshId;
var stop = false;

var circles = new Array();
var lines = new Array();

var xmlns = "http://www.w3.org/2000/svg";

var selectedElement = 0;
var currentX = 0;
var currentY = 0;
var currentMatrix = 0;
var dx = 0;
var dy = 0;

var incomingLines = new Array();
var outgoingLines = new Array();


// document ready
$(function() {

	var svgDoc = document.getElementsByTagName('svg')[0];

	for (var i = 0; i <...