Elementary cellular automaton
How do I make an elementary cellular automaton?
Left click toggle force [0,1], right clear.. What is a elementary cellular automaton? How do you make a elementary cellular automaton? This script and codes were developed by Findoff on 03 October 2022, Monday.
Elementary cellular automaton - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>elementary cellular automaton</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <script src='https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5.1/dat.gui.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/seedrandom/2.4.2/seedrandom.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Elementary cellular automaton - Script Codes JS Codes
document.addEventListener('DOMContentLoaded', function(){ var canvas = document.createElement('canvas'); document.body.appendChild(canvas); document.body.style.padding = '0px'; document.body.style.margin = '0px'; document.body.style.overflow = 'hidden'; var w = canvas.width = window.innerWidth; var h = canvas.height = window.innerHeight; var ctx = canvas.getContext('2d'); var opts = { }; var gui = new dat.GUI(); function opt(name, value, min, max){ opts[name] = value; return gui.add(opts, name, min, max); } opt('info', "click (toggle,clear)"); opt('rule', 151, 0, 255).step(1).listen(); opt('next', function(){opts.rule = (opts.rule+1)%256;}); opt('prev', function(){opts.rule = (opts.rule+255)%256;}); opt('animate', false); opt('seed', 0).listen(); opt('randomSeed', randomSeed); opt('animateSeed', true); opt('cellSize', 16, [32,16,8,4]); opt('alpha', 0.2, [1,0.5,0.2,0.1,0.05,0.01]); opt('clear', clear); opt('progress', true); opt('progressMod', 1, 1, 50).step(1); var colors = ['#000','#080','#555', '#a00']; var cells = new Int32Array( (w/4>>0) * (h/4>>0) ), wc, hc; function randomSeed(){ opts.seed = Math.floor(Math.random()*0x7fffffff); } function clear(){ for(var i=0; i<cells.length; ++i) cells[i] = 0; } var frame = 0; var oldRule = 0; function progress(){ ++frame; if(opts.progress & opts.rule === oldRule ){ if(frame % opts.progressMod == 0) for(var i=0; i<wc; ++i) if(cells[i] < 2) cells[i] = cells[i+wc] & ~2; }else{ Math.seedrandom(opts.seed); for(var i=0; i<wc; ++i){ var v = Math.random() < 0.5 ? 0 : 1; if(cells[i] < 2) cells[i] = v; } } oldRule = opts.rule; var rule = []; for(var i=0; i<8; ++i) rule[i] = opts.rule >> i & 1; for(var y=1; y<hc; ++y){ for(var x=0; x<wc; ++x){ var n1 = (y-1) * wc; var n2 = y * wc; if( cells[n2+x] > 1 ) continue; cells[n2+x] = rule[ ( cells[ (x+wc-1)%wc + n1 ] & 1) + ( cells[ (x+wc+0)%wc + n1 ] & 1)*2 + ( cells[ (x+wc+1)%wc + n1 ] & 1)*4 ]; } } } function render(){ ctx.globalAlpha = opts.alpha; wc = Math.ceil(w / opts.cellSize); hc = Math.ceil(h / opts.cellSize); var cellSize = opts.cellSize; progress(); for(var y=0; y<hc; ++y){ for(var x=0; x<wc; ++x){ var n = x + y * wc; ctx.fillStyle = colors[cells[n]]; ctx.fillRect(x*cellSize, y*cellSize, cellSize, cellSize); } } window.requestAnimationFrame(render); } canvas.addEventListener('contextmenu', function(e){e.preventDefault();}, false); var value = false; canvas.addEventListener('mousedown', function(e){ var n = (e.layerX/opts.cellSize>>0) + (e.layerY/opts.cellSize>>0)*wc; value = cells[n] = e.button > 0 ? 0 : (cells[n] | 2)^1; }, false); canvas.addEventListener('mouseup', function(e){ value = false; }, false); canvas.addEventListener('mousemove', function(e){ if(value === false) return; var n = (e.layerX/opts.cellSize>>0) + (e.layerY/opts.cellSize>>0)*wc; cells[n] = value; }, false); clear(); render(); setInterval(function(){ if(opts.animate) opts.rule = (opts.rule+1) % 256; if(opts.animateSeed) randomSeed(); }, 1000)
}, false);
Developer | Findoff |
Username | findoff |
Uploaded | October 03, 2022 |
Rating | 3.5 |
Size | 2,685 Kb |
Views | 42,504 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Linear-feedback shift register | 3,009 Kb |
Let it snow | 2,600 Kb |
Stick waves 2 | 2,827 Kb |
Through penises... | 2,057 Kb |
Screeps body calculator | 6,315 Kb |
Ant | 2,365 Kb |
Connected levers | 2,758 Kb |
Deflectors vs asteroids | 3,565 Kb |
Insect builder v0 | 3,425 Kb |
Lightning | 2,284 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
HTM5 picture dropzone | Jaysalvat | 2,576 Kb |
A form arranged using automatic placement. | Vikasford | 2,103 Kb |
Email Marketing Mock | Kristenzirkler | 8,224 Kb |
A Pen by Alex Bergin | Abergin | 3,347 Kb |
SVG Hover Animations | Kjbrum | 10,557 Kb |
Hello People | Danburrows | 2,365 Kb |
Resize image | Happyhj | 1,892 Kb |
WRENCH - STAFF | Lolita-adams | 1,608 Kb |
Material design buttons | Fischaela | 4,381 Kb |
Slider for stackoverflow | KKOKU | 3,222 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!