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