JSFiddle - React, Tailwind, and code Playground

by smarko

HTML

<div id="info">What is this: what you see here is partially interactive visualization of the algorithm, which simulates "if enough signals in, then one signal out". Simulation starts with preset nodes being active and continues progressively until there's nothing left to change. Randomly placed circles, which present nodes of a graph, can be moved by dragging them and it is possible to rearrange them in a way that no line crosses another. Two more colorfull 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. Red color would indicate that a node has had enough input signals for a moment as is now in the cooldown mode, but such appears only with certain kind of initialization of nodes. The source code reveals more details, containing also the method named initTekoneuronit, wherein you could change the initial connections between the nodes.</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>

CSS

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

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

#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

// Tekoneuronit v0.46

// What is this: what you see here is partially interactive visualization of the algorithm, which simulates "if enough signals in, then one signal out". Simulation starts with preset nodes being active and continues progressively until there's nothing left to change. Circles, which present nodes of a graph, can be moved by dragging them and it is possible to arrange them in a way that no line crosses another. Two more colorfull 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. Red color would indicate that a node has had enough input signals for a moment as is now in the cooldown mode, but such appears only with certain kind of initialization of nodes. You may edit the method named initTekoneuronit to change the initial connections between the nodes.

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

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

var Tekoneuroni = function Tekoneuroni(id, connectedToId, output_delay_left, output_ready) {
	
	this.cooldown_time = 0.6;
	this.inputsignal_timewindow_length = 3.0;
	this.inputsignal_amount_minimum = 2;
	this.cooldown_trigger_amount = 2;
	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.id = id;
	this.connectedToId = connectedToId;
	this.output_delay_left = output_delay_left;
	this.output_ready = output_ready;
	
	if (output_ready) {
		this.output_ready_count = 1;
	}
	
	this.cx; // used only in the init phase
	this.cy; // used only in the init phase
	
};
		
var tekoneuronit;
initTekoneuronit();

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

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

var xmlns =...