Met een eenvoudige vraag kun je toch nog even bezig zijn. Hoe kun je elementen gelijk verdelen en daarna concentreren rond een kern? In zijn meest elementaire uitwerking zou dat deze (schetsmatige) resultaten moeten opleveren:
Het eerste en laatste blokje moeten blijven staan. We gaan het in javascript (met P5) maken. Hieronder zie je het eindresultaat wat jij vast op een andere manier ook kunt realiseren. Jouw cursor of vinger bepaalt hoeveel blokjes (bovenaan minder, vanonder meer) en de concentratiefactor (links niets, rechts hoog). Voor de mobiele versie klik hier!
P5 geeft je snel een canvas met grafische mogelijkheden.
Je kunt de editor van P5 gebruiken (https://editor.p5js.org/). Er zullen veel verschillende manieren zijn om ons probleem uit te werken, maar ik begin met het maken van wat variabelen. Deze waarden kunnen we dan aanpassen.P5 geeft je snel een canvas met grafische mogelijkheden.
De blokjes hoeven (voorlopig) niet te bewegen, dus eerst zet ik alles in de functie setUp:
We hebben nu een basis (download eventueel: script_verdeel_heers_basis.zip) en gaan proberen de blokjes op gelijke afstand neer te zetten. Probeer het zelf eerst zodat je onderstaande verdeling krijgt:
Alleen de afstand tussen de blokjes is wel wat puzzelwerk.
rechts – links is de lengte van de grijze rechthoek:
en dat moet je delen door het aantal blokjes (variable aantal) min één. Dat is dan de afstand tussen de blokjes. Telkens vermenigvuldigd met i geeft dat de x-positie van de rechthoekjes, waar je nog wel tot slot links bij op moet tellen omdat vanaf daar de rechthoekjes worden neergezet. Zelf spelen en experimenteren helpt je waarschijnlijk meer dan dit over te typen.
Leuk om de variabele aantal aan te passen: de blokjes komen dan. telkens perfect verdeeld te staan. Als aantal te hoog wordt, zie je natuurlijk één witte balk…
De versie die je nu hebt, zou overeen kunnen komen met dit bestand (script_verdeel_heers_basis_2.zip).
Het aanpassen van de positie
We gaan verder met het concentreren van de blokjes.
Dit is het hele script om de blokjes naar links te duwen. Nogmaals, het kan op meerdere manieren. In regel 16 wordt de factor (iedere keer opnieuw) berekend. Voor i=0 (linker blokje) is de factor 0 en voor i=aantal is defactor 1. de bewerking ** is machtsverheffen.Hier is gekozen voor een deel van de exponentiële functie ( y = x2), namelijk van 0 t/m 1 (voor de waarde van x). In dat deel loopt kromme van de grafiek eerste traag maar dan steeds steiler tot de waarde 1. Misschien wordt dat duidelijk is in onderstaand afbeelding, waar dat deel van de grafiek visueel wordt gemaakt (zie bestand: script_verdeel_heers_grafiek.zip).
De versie die je bovenaan zit, vind je in dit bestand (script_verdeel_heers_werkt_midden.zip” target=”_blank”). Hier is de variabele macht extra gebruikt om factor te berekenen. Het script splitst de rij blokjes op in een linker en een rechter gedeelte, zie regels 31 t/m 38:
Je kunt dit script natuurlijk eindeloos aanpassen bijvoorbeeld door een random afwijking te kiezen voor ieder blokje zodat er een “realistische” grafiek ontstaat. Veel plezier.
