Ruusukuviot – kuvioita laskukaavojen avulla
Ruusukuviot matematiikassa saadaan sin- ja cos-funktioiden avulla. Idea on laskea laskukaavojen avulla ympyrän kehäpisteitä siten, että myös ympyrän säde muuttuu cos-funktion avulla, jolloin pienet muutokset kulman arvossa muuttavat myös kuviota. Tämä muutos-kerroin on ilmaistu muuttujassa k, joka taas on kahden muuttujan n ja d suhde. Kun n:n ja d:n arvoja muutetaan liukupalkeilla, niin kuvio muuttuu jatkuvasti. Kun muutat arvoja liukupalkeilla, niin sen jälkeen kannattaa napsauttaa hiiren painiketta, niin ikkuna tyhjennetään vanhoista kuvioista ja piirtäminen alkaa alusta.
var n; // Määritellään muuttuja n var d; // Määritellään muuttuja d var laskuri=0; // Määritellään laskuri-muuttuja ja annetaan sille alkuarvo var aSlider; // Määritellään muuttuja aSlider var bSlider; // Määritellään muuttuja bSlider function setup () { createCanvas(600,600); // Määritellään ikkunan koko aSlider = createSlider(1, 50, 23); // Luodaan liukupalkki aSlider aSlider.position(10, 20); bSlider = createSlider(1, 50, 32); // Luodaan liukupalkki bSlider bSlider.position(210, 20); background(0); // Tyhjennä tausta ja väritä se mustaksi strokeWeight(5); // Viivan paksuus 5 stroke(random(255),random(255),random(255)); // Asetetaan satunnainen viivan väri } function draw () { var n = aSlider.value(); // Määritellään muuttuja n ja sijoitetaan siihen arvo liukupalkista aSlider var d = bSlider.value(); // Määritellään muuttuja d ja sijoitetaan siihen arvo liukupalkista dSlider var k = n/d; // Määritellään muuttuja k ja sijoitetaan siihen arvo laskukaavasta n/d laskuri++; // Kasvatetaan laskuria yhdellä translate(width / 2, height / 2); // Origo ikkunan keskelle var r = 250*cos(radians(k*laskuri)); // Säde r = 0...250 var x = r*cos(radians(laskuri)); // Laske kehäpiste x var y = r*sin(radians(laskuri)); // Laske kehäpiste y if (laskuri%200==0){ // Joka 200 välein eli kun laskuri on jaollinen 200:lla stroke(random(255),random(255),random(255)); // Arvo uusi väri } point(x,y); // Piirrä piste (x,y) } function mousePressed () { // Kun hiiren jotain painiketta painetaan, niin background(0); // Tyhjennä tausta ja väritä se mustaksi } |
Kun ajat ohjelman, niin ohjelman suoritus näyttää tältä. Muuta liukupalkkien arvoja ja napsauta hiirellä ruudussa, jolloin ikkuna tyhjenee ja piirtäminen alkaa alusta.
Noise-funktio
Noise-funktio on satunnais-funktio, joka voi saada arvoja väliltä 0…1. Idea on laitaa syötteenä laskurin arvoja noise-funktioon, jossa laskuri muuttuu pienin askelin, tällöin satunnainen muutos edelliseen arvoon on pieni. Oheinen esimerkki havainnolistaa asiaa.
var x = 0.0; // Määritellään muuttuja x ja annetaan sille desimaaliluku alkuarvoksi function setup() { createCanvas(600, 600); // Ikkunan koko on 600 x 600 } function draw() { background(0); // Tyhjennetään tausta ja väritetään se mustaksi x = x + 0.01; // Kasvatetaan laskuria 0.01:llä var d = noise(x) * width; // Määritellään muuttuja d ja sijoitetaan siihen lukuarvo, joka saadaan laskutoimituksesta 0..1*600 // Tällöin d:n arvot vaihtelevat välillä 0...600 satunnaisesti pienin askelin fill(255,255-d/2.0,0); // Muutetaan täyttöväriä muuttujan d-mukaan. Kun d on pieni, niin väri keltainen, Kun d on suuri, niin väri punainen ellipse(300,300,d,d); // Piirretään ympyrä ikkunan keskelle, jossa halkaisija d voi vaihdella välillä 0..600. } |
Ohjelman suoritus näyttää nyt tältä.
Pallo seuraa hiirtä
Tehdään vielä ohjelma, jossa ympyrä seuraa hiirtä. Hiiren paikka ilmaistaan neliöllä. Jos ympyrä saa kiinni neliön, niin silloin piste-laskuri kasvaa yhdellä , jonka jälkeen arvotaan ympyrälle uusi satunnainen paikka.
var a = 300; // Määritettään muuttuja a ja annetaan sille alkuarvo 300 var b = 300; // Määritettään muuttuja b ja annetaan sille alkuarvo 300 laskuri = 0; // Määritettään muuttuja laskuri ja annetaan sille alkuarvo 0 function setup() { createCanvas(600, 600); // Ikkunan koko on 600x600 textSize(50); // Tekstin koko on 50 } function draw() { background(255,255,0); // Tyhjennetään tausta ja väritetään se keltaiseksi var x = mouseX // Määritellään muuttuja x ja annetaan sille arvoksi // tämän hetkinen hiiren vaakasuuntainen paikan arvo var y = mouseY // Määritellään muuttuja y ja annetaan sille arvoksi // tämän hetkinen hiiren pystysuuntainen paikan arvo if (x > a) { // Liiku oikealle a++; } if (x < a) { // Liiku vasemmalle a--; } if (y > b) { // Liiku alas b++; } if (y < b) { // Liiku ylös b--; } if ((a == x) && (b == y)) { // Jos pallon keskipiste koskettaa neliön keskipistettä laskuri++; // Kasvata laskuria (= pisteet) a = round(random(width)); // Arvo uusi vaakasuuntainen paikka pallolle b = round(random(height));// Arvo uusi pystysuuntainen paikka pallolle } fill(255,0,0); // Aseta punainen väri ellipse(a,b,50,50); // Pallo fill(0,0,255); // Aseta sininen väri rect(x-10,y-10,20,20); // Neliö fill(0); // Aseta musta väri text(laskuri,50,50); // Tulosta pisteet eli laskuri-muuttujan arvo paikkaan (50,50) } |
Ohjelma toimii seuraavasti