Tehdään ohjelma, jossa liukupalkkien avulla voidaan säädellä kuvioiden kokoa, etäisyyttä toisistaan, väriä ja pyörityskulmaa. Ohjelma on seuraavanlainen.
var aSlider; // Luodaan muuttuja sSlider var bSlider; // Luodaan muuttuja bSlider var cSlider; // Luodaan muuttuja cSlider var dSlider; // Luodaan muuttuja dSlider function setup() { createCanvas(600, 600); // Ikkunan koko 600 x 600 noFill(); // Ei täyttöä aSlider = createSlider(1, 600, 100); // Luodaan liukupalkki aSlider, joka saa arvoja väliltä 1...600 aSlider.position(10, 20); // Liukupalkin aSlider paikka on 10 px oikealle ja 20 px alas bSlider = createSlider(30, 200, 90); // Luodaan liukupalkki bSlider, joka saa arvoja väliltä 30...200 bSlider.position(160, 20); // Liukupalkin bSlider paikka on 160 px oikealle ja 20 px alas cSlider = createSlider(0, 255, 128); // Luodaan liukupalkki cSlider, joka saa arvoja väliltä 0...255 cSlider.position(310, 20); // Liukupalkin cSlider paikka on 310 px oikealle ja 20 px alas dSlider = createSlider(-360, 360, 0); // Luodaan liukupalkki dSlider, joka saa arvoja väliltä -360...360 dSlider.position(460, 20); // Liukupalkin paikka on 460 px oikealle ja 20 px alas } function draw() { background(0); // Tyhjennä tausta ja väritä se mustaksi translate(width/2,width/2); // Origo ikkunan keskelle var halkaisija = aSlider.value(); // Määritellään muuttuja halkaisija, joka saa arvon liukupalkilta aSlider var vali = bSlider.value(); // Määritellään muuttuja vali, joka saa arvon liukupalkilta bSlider var vari = cSlider.value(); // Määritellään muuttuja vari, joka saa arvon liukupalkilta cSlider var kulma = dSlider.value(); // Määritellään muuttuja kulma, joka saa arvon liukupalkilta dSlider stroke(255,vari,0); // Reunaviivan väri, jossa vihreä sävy muuttuu liukupalkin mukaan rotate(radians(kulma)); // Pyöritä koordinaatistoa kulman verran for (var a = -16; a < 16; a++) { // Määritellään for silmukka, jossa a = -16,-15,-14,...,15 for (var b = -16; b < 16; b++) { // Määritellään for silmukka, jossa b = -16,-15,-14,...,15 ellipse(a*vali,b*vali,halkaisija,halkaisija); // Piirretään ympyrä muuttujien avulla } // Lopeta sisempi silmukka } // Lopeta ulompi silmukka } |
Kun ajat ohjelman, niin se näyttää tältä.