Zum Inhalt springen
5/5 - (1 vote)

Dim XY 50
Gelände 0
Bremse (ms) 0
Turbo 0

Die Bedienelemente:

  • Dim XY: Die Breite und Höhe der Simulation.
  • Gelände:
    0 - keine Hindernisse
    1 - Strich mit Lücken
    2 - Quadrat mit Lücke
    3 - Quadrat mit 4 Lücken.
  • Bremse (ms): x MilliSekunden warten zwischen 2 Bildern.
  • Turbo: x Bilder werden beim zeichnen übersprungen.
  • Start: startet die Simulation neu.

Was ist das hier?
Eine Wahl-Simulation. Die Idee stammt aus Bild der Wissenschaft, "Computer Kurzweil".
Die hab ich hier programmiert in JavaScript.
Ausgangssituation: Jeder Pixel (Bürger) hat eine eigene Politische Meinung (Farbe).
In jedem Zeitschritt ändert ein Bürger seine Meinung, und nimmt stattdessen die Meinung (Farbe) eines zufälligen seiner 4 direkten Nachbarn an.

Ergebnis:
Irgendwann ( ... kann auch lange dauern, je nach "Dimension") sind alle einer Meinung. (Oha!)

Viel Spaß beim herumspielen mit der Simulation und den Einstellungen!

... und BITTE fleißig teilen! Die Seite ist noch neu und komplett unbekannt 🙁

Für den code hier klicken. (Für Interessierte.)

<script>// ------------variable Einstellungen------------
var
welt_dim_x = 50	 
,welt_dim_y = 50
,Speed 		= 0
,auslassen 	= 0	
,how_big 	= 1
;
// --END of -----------variable Einstellungen------------
//pixelated--
document.write('<canvas style="image-rendering:pixelated; width:80%; float:left;" id="welt" width="'+(welt_dim_x) + '"height="'+(welt_dim_y) + '"></canvas>');
//auto-------document.write('<canvas style="padding-right:10px; height:70vh; max-height: 60vw;                            float:left;" id="welt" width="'+(welt_dim_x+1) + '"height="'+(welt_dim_y+1) + '"></canvas><br>');
var 
anz_bilder_gezeichnet = 0	
,welt_canvas 	= document.getElementById("welt") 
,welt 			= welt_canvas.getContext("2d")
,pixel  		= []
,ersparnis		= 0
,wand_slider	= 0
;
function init()	// Wahlsimulation
{	for	( var x = 1;	x <= welt_dim_x; x ++ )	
{   
pixel[x]=[];
for	( var y = 1; y <= welt_dim_y; y ++ )	{	
var r = 20 + Math.floor(Math.random()*200);
var g = 20 + Math.floor(Math.random()*200);
var b = 20 + Math.floor(Math.random()*200);
pixel[x][y] = "rgb("+r+","+g+","+b+")"; 
Pixel_zeichnen(x,y)	}
}
//-- Wände herstellen
init_wand(wand_slider);
}
// Wand  
function init_wand(wand_type)
{	
if (wand_type == 3) // Wand  Viereck - an den Ecken offen.
{	x1 = Math.floor(welt_dim_x/4);
x2 = 3*x1;
y1 = Math.floor(welt_dim_y/4);
y2 = 3*y1;
for (	x = x1 ;		x <= x2-2 	;x ++){	pixel[x][y1] = "rgb(0,0,0)";	Pixel_zeichnen(x,y1);	}//Linie oben
for (	x = x1+2 ;		x <= x2 	;x ++){	pixel[x][y2] = "rgb(0,0,0)";	Pixel_zeichnen(x,y2);	}//Linie unten
for (	y = y1+2 ;		y <= y2 	;y ++){	pixel[x1][y] = "rgb(0,0,0)";	Pixel_zeichnen(x1,y);	}//Linie l
for (	y = y1 ;		y <= y2-2 	;y ++){ pixel[x2][y] = "rgb(0,0,0)";	Pixel_zeichnen(x2,y);	}//Linie r
}
if (wand_type == 2) // Wand  Viereck - an 1 Ecke offen.
{	
x1 = Math.floor(welt_dim_x/4);
x2 = 3*x1;
y1 = Math.floor(welt_dim_y/4);
y2 = 3*y1;
for (	x = x1 ;		x <= x2 ;	x ++){	pixel[x][y1] = "rgb(0,0,0)";		Pixel_zeichnen(x,y1);	}//Linie oben
for (	x = x1 ;		x <= x2 ;	x ++){	pixel[x][y2] = "rgb(0,0,0)";		Pixel_zeichnen(x,y2);	}//Linie unten
for (	y = y1 ;		y <= y2 ;	y ++){	pixel[x1][y] = "rgb(0,0,0)";		Pixel_zeichnen(x1,y);	}//Linie l
for (	y = y1 ;		y <= y2-4;	y ++){	pixel[x2][y] = "rgb(0,0,0)";		Pixel_zeichnen(x2,y);	}//Linie r
}
if (wand_type == 1) // Wand  Horizontale Linie
{	
y = Math.floor(welt_dim_x/2);
// 1
x_start = 1
x_end = Math.floor((welt_dim_x/3)); 
for (	x = x_start ;		x <= x_end ;x ++)  {
pixel[x][y] = "rgb(0,0,0)";
Pixel_zeichnen(x,y);
}
// 2
x_start = x_end+2 ; 
x_end= Math.floor(3*welt_dim_x/4);   
for (x = x_start ; x <= x_end ;x ++)  {
pixel[x][y] = "rgb(0,0,0)";
Pixel_zeichnen(x,y);
}
// 3
x_start = x_end+2 ; 
x_end 	= welt_dim_x; 
for (x = x_start ; x <= x_end ;x ++)  {
pixel[x][y] = "rgb(0,0,0)";
Pixel_zeichnen(x,y);
}
}
} //end funvtion
function Pixel_zeichnen(x, y){welt.fillStyle = pixel[x][y],	welt.fillRect( x, y, how_big, how_big)}  
function Zeitschritt() // Wahlsimulation
{
//ersparnis= 0;
for (var i=0 ; i<= auslassen ; i++) {
for		( var x = 1;	x <= welt_dim_x ; x ++ )	{	
for	( var y = 1;	y <= welt_dim_y ; y ++ ) 		{	
if (pixel[x][y] != "rgb(0,0,0)") 					{
switch (1 + Math.floor(Math.random()*4))			{   
case 1: ny = y-1; nx = x; break;
case 2: nx = x+1; ny = y; break;
case 3: ny = y+1; nx = x; break;
case 4: nx = x-1; ny = y; break;
}
//-----Ränder miteinander verbunden.----------			
//if (nx > welt_dim_x)	nx = 1;
//if (nx < 1 )			nx = welt_dim_x;
//if (ny > welt_dim_y)	ny = 1;
//if (ny < 1)				ny = welt_dim_y;
//-----Ränder bilden Grenzen.----------
if (nx > welt_dim_x) 	nx = welt_dim_x
if (nx < 1 ) 			nx = 1
if (ny > welt_dim_y) 	ny = welt_dim_y
if (ny < 1)				ny = 1;
//---------------------------------Tausch
if ( pixel[x][y] != pixel[nx][ny] )					{
if ( pixel[nx][ny] != "rgb(0,0,0)")						{
pixel[x][y] = pixel[nx][ny]; 
welt.fillStyle = pixel[x][y], 
welt.fillRect( x, y, how_big, how_big);
}//if
}//Farben ungleich
}//wand
}// y          
}// x
}// i
pausecomp(Speed); 
}// function
function pausecomp(millis)
{
var date = new Date();
var curDate = null;
do { curDate = new Date(); }
while(curDate-date < millis);
}
// --- Slider Turbo
function updateAuslassenSlider(slideAmount)
{ 
auslassen  = slideAmount;
var output = document.getElementById("turbo");
output.innerHTML = auslassen;	
}
function updateDimensionSlider(slideAmount) 
{	
welt_dim_x = slideAmount;	 
welt_dim_y = slideAmount;
// Grafik neu ...
welt_canvas.height = welt_dim_y; 
welt_canvas.width = welt_dim_y;
var output = document.getElementById("dimension");
output.innerHTML = welt_dim_y;	
init();
}
function updateWandSlider(slideAmount)
{	
wand_slider = slideAmount;	
var txt = "keine";
if (wand_slider == 1 ) txt="Linie";
if (wand_slider == 2 ) txt="quad 1";
if (wand_slider == 3 ) txt="quad 4";
var output = document.getElementById("wand");
output.innerHTML = txt;	
init()
}
function updateBremseSlider(wert)
{
Speed = wert;
var output = document.getElementById("bremse");
output.innerHTML = Speed;	
}
function updateStartfarbenSlider(wert)
{
Startfarben=wert;
if (Startfarben == 1 ) txt="max.";
if (Startfarben == 2 ) txt="2";
//if (Startfarben == 3 ) txt="quad 4";
var output = document.getElementById("startfarben");
output.innerHTML = txt;	
}
//############# MAIN ############################################################################
//############# MAIN ############################################################################
//############# MAIN ############################################################################
init();
setInterval(Zeitschritt, 0);
// END ############ MAIN ############################################################################
// END ############ MAIN ############################################################################
// END ############ MAIN ############################################################################
</script>
<br><table>
<tbody><tr>
<td>Dim XY</td>
<td id="dimension">50</td>
<td>
<input name="dimension" type="range" min="20" max="200" step="10" value="50" onchange="updateDimensionSlider(this.value)">
</td>
</tr>
<tr>
<td>Gelände</td>
<td id="wand">0</td>
<td>
<input name="wand" type="range" min="0" max="3" step="1" value="0" onchange="updateWandSlider(this.value)">
</td>
</tr>
<tr>
<td>Bremse (ms)</td>
<td id="bremse">0</td>
<td>
<input name="bremse" type="range" min="0" max="1000" step="1" value="0" onchange="updateBremseSlider(this.value)">
</td>
</tr>  
<tr>
<td>Turbo</td>
<td id="turbo">0</td>
<td>
<input name="auslassen" type="range" min="0" max="10" step="1" value="0" onchange="updateAuslassenSlider(this.value)">
</td>
</tr>  
</tbody></table>
<button type="button" onclick="init()">START</button>

Ein Gedanke zu „Wahlsimulation“

  1. IRRbert

    Diese kleine Programmierübung dient der Vorbereitung weiterer und weit interessanterer Programme. Zum Präsentieren musste ich mich aber erstmal mit einem web-System beschäftigen. In dem hier zu sehenden Falle WordPress. Bis jetzt klappt ja alles wunderbar. 🙂

    Gruss IRR

Schreibe einen Kommentar