Uit Dutch Scratch-Wiki

Dit is een voorbeeld van een raster-tekening die gemaakt is voor de 1 Line Challenge op de Scratch-website.

Je ziet op deze pagina allemaal door de computer genereerde kunst. De programmeur voert wat code in, en de computer doet de rest.

Deze pagina is het vervolg van Raster-kunst tekenen. Je kunt die pagina het beste als eerste lezen. Hieronder vind je nog een aantal extra voorbeelden en wat extra trucjes die je ook kunt gebruiken als je zelf dit soort tekeningen wilt gaan maken.


Kleuren

In alle voorbeelden op deze pagina worden de kleuren die op het scherm verschijnen berekend via wiskundige formules. Dat zijn sommen waarmee je voor elke plek op het scherm de kleur kunt berekenen.

Scratch heeft alle kleuren van de regenboog verdeeld over 200 cijfers. Voor het maken van raster-tekeningen is het handig om globaal te weten welk cijfer welke kleur is.

  • 0 rood
  • 18 oranje
  • 33 geel
  • 66 groen
  • 100 lichtblauw
  • 133 blauw
  • 150 paars
  • 167 roze

Een compleet overzicht, vind je hier: https://scratch.mit.edu/projects/48936672/

Als de gemaakte som een uitkomst heeft die groter is dan 200, dan deelt Scratch het getal automatisch door 200. De rest van deze som, bepaalt de kleur.

Dus 466 wordt groen, want 466 / 200 = 2 rest 66.



Eenvoudigweg delen en/of vermenigvuldigen

X-maal-y-gedeeld-door-30.png

Bovenstaande ster maak je met een eenvoudige som:


maak penkleur (((x-positie) * (y-positie)) / (30))


180-maal-x-gedeeld-door-y.png

Met een eenvoudige deelsom krijg je bovenstaan patroon. Voor het getal 180 kun je ook een ander getal invullen. Probeer maar eens wat het resultaat is.


maak penkleur ((180) *((x-positie) / (y-positie))


Xkwadraat-maal-y-kwadraat-delen-door-4000.png

Voor weer een andere ster met een mooi patroon er om heen, kun je de x-waardes en de y-waardes ook met zichzelf vermenigvuldigen.


maak penkleur ((((x-positie) * (x-positie)) * ((y-positie) * (y-positie))) / (4000))


3-maal-xkwadraat-plus-ykwadraat.png

De twee kwadraten optellen in plaats van vermenigvuldigen, geeft weer een heel ander effect. In deze formule kun je een ander getal dan 3 invullen voor een net weer wat ander patroon.


maak penkleur ((3) *(((x-positie) * (x-positie)) + ((y-positie) * (y-positie)))



Absoluut: maakt van een min een plus

Er is nog een trucje dat je kunt gebruiken bij het maken van raster-tekeningen. Bij de groene blokken, kun je "wortel" vervangen door "absoluut" via het groene driehoekje.

([absoluut v] van (x-positie))

Als je de "absoluut" van een getal neemt, dan maak je er altijd een positief getal van. Dus als er een min voor staat, haal je die min weg. Een voorbeeld: op het moment dat de x-waarde -100 is, rekent de computer dus met 100.

Y-plus-abs-x-plus-wil-getal-1-20.png

Om de strepen omhoog en omlaag te krijgen in bovenstaande tekening, gebruik je deze formule:


maak penkleur ((y-positie) + ([absoluut v] van (x-positie)))

In dit geval werkt het gebruik van het absoluut-blokje als een soort spiegel. De tekening die rechts gemaakt is, wordt aan de linkerkant van het scherm in spiegelbeeld getekend.

Andersom werkt het ook. Kun jij bedenken wat voor tekening je krijgt als je de absoluut van de y-positie neemt in plaats van van de x-positie?

maak penkleur ((x-positie) + ([absoluut v] van (y-positie)))



Ruis toevoegen met willekeurige getallen

Om bovenstaande tekening te maken is nog een extra blok toegevoegd:

(willekeurig getal tussen (1) en (20))

Met dit blok creëer je wat ruis in je tekening. Hierdoor verdwijnen de scherpe randen. Dit trucje kun je bij allerlei raster-tekeningen toepassen. Probeer het maar eens. Je telt het willekeurige getal er gewoon bij op, zoals hieronder te zien is:

maak penkleur ((y-positie) + (([absoluut v] van (x-positie)) + (willekeurig getal tussen (1) en (20))))



Modulo: delen met rest

De functie modulo geeft weer andere mogelijkheden. Voor het woord "modulo" staat het getal dat gedeeld wordt, erna staat het getal waar je door deelt, en de uitkomst van dit blok is de rest van deze deling. Dat geeft vaak wat blokkerige patronen.

Y-mod-50-min-x.png

maak penkleur (((y-positie) modulo (50)) - (x-positie))


110-plus-xmod45-maal-ymod45-delen-door-35.png

maak penkleur ((110) + ((((x-positie) modulo (45)) * ((y-positie) modulo (45))) / (35)))

Met bovenstaande formule kun je leuk experimenteren. Alle getallen kun je veranderen om te kijken wat er dan gebeurt. Probeer maar eens uit!


Wortel-xmaalx-plus-ymaaly-plus-ymod10-plus-xmod10.png


maak penkleur ([wortel v] van (((x-positie) * (x-positie)) * ((y-positie) * (y-positie))) 

Met bovenstaande code maak je de gekleurde cirkels. Hier is de wortel-functie gebruikt in plaats van de afstand tot de oorsprong uit deel 1 van Raster-kunst tekenen.

Om er vervolgens een soort mozaïek van te maken, kun je de modulo-functie gebruiken. De hele formule voor bovenstaande tekening is (zonder penblok dit keer, anders paste het niet):

Lange-formule.png



Sinus en tangens

Zoals in deel 1 al te lezen was, kun je met de sinus-functie mooie plaatjes maken. Hier nog een voorbeeld:

Sinx-maal-siny-maal-360.png


maak penkleur ((([sin v] van (x-positie)) * ([sin v] van (y-positie))) * (360))



Een net iets andere formule, waarbij het eerste keerteken door een plus is vervangen, geeft ook een mooi effect.


360-maal-sinx-plus-sinusy.png

maak penkleur ((([sin v] van (x-positie)) + ([sin v] van (y-positie))) * (360))



Tangens is ook een interessante functie om te gebruiken. Hieronder een voorbeeld van een mooie raster-tekening die hiermee gemaakt is:


110-plus-tanx-maal-tany.png


maak penkleur ((110) + (([tan v] van (x-positie)) * ([tan v] van (x-positie))) 


Vlakken

Je kunt je rastertekening ook eenkleurige vlakken geven. Dit kan op twee manieren;

Booleans

Booleans zijn de groene blokjes met hoeken aan de uiteinden. Normaal gesproken doe je deze alleen in holtes met dezelfde vorm (zoals in het als-dan-blok), maar je kunt ze ook in een getalveld zetten!

De waarde van deze blokken is dan 0 of 1. Als de vergelijking in het blok waar is, krijgt het blok de waarde 1. En als het niet waar is, gaat de computer met een 0 rekenen.

Omdat de waarde dus nooit hoger dan 1 is, is het handig om de uitkomst te vermenigvuldiging met een groter getal als je dit in rastertekeningen wilt gebruiken. Anders zie je het effect nauwelijks.

Ruitjes.png

De bovenstaande ruitjes zijn gemaakt met de volgende som;


maak penkleur (<([sin v] van ((x-positie)*(5)))<([cos v] van ((y-positie)*(5)))>*(30))

Afronden

Door je al bestaande som te delen door bijvoorbeeld 40, het dan af te ronden en het dan weer te vermenigvuldigen met hetzelfde getal, verminder je het aantal kleuren in je rastertekening. Er ontstaan dan duidelijke vlakken en contourlijnen.

Dit heet posterization (een versimpelde vorm van). Om het aantal verschillende kleuren te bepalen gebruik je de volgende som;

((200)/(n))

Posterization.gif

De bovenstaande rastertekeningen zijn gemaakt met de volgende som, waarbij n oploopt van 1 naar 10;


maak penkleur ((afgerond ((((x-positie)*(y-positie))/(30))/((200)/(n))))*((200)/(n)))

Penhelderheid

Je kunt je raster-tekeningen nog extra mooi maken door ook het penhelderheid-blok te gebruiken. Dan leg je er als het ware een doorzichtig papiertje overheen dat op de ene plaats doorzichter is dan op de andere.

Hieronder een aantal voorbeelden.


Penhelderheid-1a.png

Zonder penhelderheid-blok is dit dezelfde tekening als de gekleurde cirkels in deel 1. Hieronder bijbehorende code:

Penhelderheid-1b.png



Penhelderheid-2a.png

De versie zonder penhelderheid-blok vind je onder het kopje "Modulo: delen met rest". Hieronder weer de code waarmee deze tekening is gemaakt.

Penhelderheid-2b.png



Penhelderheid-3a.png

Onder het kopje "Eenvoudigweg delen en/of vermenigvuldigen" vind je dezelfde ster, alleen dan zonder het extra effect door het penhelderheid-blok. Hieronder de gebruikte code:

Penhelderheid-3b.png


De ideeën voor de code voor de penhelderheid komen uit dit mooie project van de Portugese Scratcher @icampeao: https://scratch.mit.edu/projects/115968459/


Voorbeeld

De Scratcher @TRKler heeft een mooi project gemaakt waarvoor informatie uit deze pagina's is gebruikt: https://scratch.mit.edu/projects/138068065/.