Tehdään vielä ohjelma, jossa liukupalkin avulla voidaan valita piirrettävä kuvio. Sovitaan, että ensimmäinen liukupalkki voi saada arvoja 0, 1, 2 ja 3. Sijoitetaan ensimmäisen liukupalkin arvo muuttujalle valinta. Jos valinta saa arvo on 0, niin silloin piirretään neliö. Jos valinta saa arvo on 1, niin silloin piirretään tasakylkinen kolmio. Jos valinta saa arvo on 2, niin silloin piirretään ellipsi. Jos valinta saa arvo on 3, niin silloin piirretään neljäkäs. Toisella liukupalkilla suurennetaan ja pienennetään kuviota. Toinen liukupalkki voi saada arvoja väliltä 0.1 … 5, joka on kerroin. Kun tämä arvo välitetään scale-komennolle, niin kuvio joko suurenee (koko > 1) tai pienenee (koko < 1). Kolmas liukupalkki voi saada arvoja väliltä -180…180 eli kuvio voi siis pyöriä vasta- tai myötäpäivään 180°:tta. Kun tämä arvo välitetään komennolle: rotate(radians(kulma)); niin kuviota voidaan pyörittää.
Kokonainen ohjelma on seuraavanlainen.
var aSlider; // Määritellään muuttuja aSlider
var bSlider; // Määritellään muuttuja bSlider
var cSlider; // Määritellään muuttuja cSlider
function setup() {
createCanvas(600, 600); // Ikkunan koko
aSlider = createSlider(0, 3, 0); // Ensimmäinen liukupalkki
aSlider.position(10, 20);
bSlider = createSlider(0.1, 5, 1); // Toinen liukupalkki
bSlider.position(210, 20);
cSlider = createSlider(-180, 180, 0); // Kolmas liukupalkki
cSlider.position(410, 20);
}
function draw() {
background(200,150,0); // Tyhjennä tausta
fill(0,0,255); // Täyttöväri sininen
translate(width/2, height/2); // Origo ikkunan keskelle (=pyörityskeskipiste)
var valinta = aSlider.value(); // Määritellään muuttuja valinta
var koko = bSlider.value(); // Määritellään muuttuja koko
var kulma = cSlider.value(); // Määritellään muuttuja kulma
scale(koko); // Skaalaa kuviota isommaksi tai pienemmäksi
rotate(radians(kulma)); // Pyöritä kuviota kulman verran
if (valinta == 0) { // Jos valinta on yhtä suuri kuin 0, niin
rect(-50,-50,100,100); // piirrä neliö ikkunan keskelle
}
if (valinta == 1) { // Jos valinta on yhtä suuri kuin 1, niin
triangle(0,0,-50,-50,50,-50); // piirrä kolmio ikkunan keskelle
}
if (valinta == 2) { // Jos valinta on yhtä suuri kuin 2, niin
ellipse(0,-0,200,100); // piirrä ellipsi ikkunan keskelle
}
if (valinta == 3) { // Jos valinta on yhtä suuri kuin 3, niin
quad(0,0,50,25,100,0,50,-25); // piirrä neljäkäs ikkunan keskelle
}
}
|
Voit testata ohjelman tästä.
Arpominen
Kerrataan arpomiskomento. Tehdään ohjelma, jossa ensimmäisellä liukupalkilla säädetään arvottava kuvio. Kuvio voi olla neliö, kolmio, ympyrä tai neljäkäs. Toisella liukupalkilla määräämme arvon värin peittävyyden (0 = täysin läpinäkyvä, 255 = täysin peittävä). Kolmannella liukupalkilla määräämme kuvion koon. Kokonainen ohjelma on seuraavanlainen.
var aSlider; // Määritellään muuttuja aSlider
var bSlider; // Määritellään muuttuja bSlider
var cSlider; // Määritellään muuttuja cSlider
function setup() {
createCanvas(600, 600); // Ikkunan koko
aSlider = createSlider(0, 3, 0); // Ensimmäinen liukupalkki
aSlider.position(10, 20);
bSlider = createSlider(0, 255, 200); // Toinen liukupalkki
bSlider.position(210, 20);
cSlider = createSlider(0.5, 5, 1); // Kolmas liukupalkki
cSlider.position(410, 20);
background(0); // Tyhjennä tausta ja väritä se mustaksi
}
function draw() {
var valinta = aSlider.value(); // Määrittele muuttuja valinta ja annna sille arvo ensimmäisestä liukupalkista
var vari = bSlider.value(); // Määrittele muuttuja vari ja annna sille arvo toisesta liukupalkista
var koko = cSlider.value(); // Määrittele muuttuja koko ja annna sille arvo kolmannesta liukupalkista
fill(random(255),random(255),random(255),vari); // Arvo satunnainen väri, jossa peittävyys arvo muuttujasta: vari
push(); // Koordinaatisto muistiin
translate(random(600),random(600)); // Siirrä koordinaatistoa satunnaiseen paikkaan
scale(koko); // Suurenna tai piennennä kuviota
if (valinta == 0) { // Jos valinta on yhtä suuri kuin 0
rect(0,0,100,100); // niin piirrä neliö
}
if (valinta == 1) { // Jos valinta on yhtä suuri kuin 1
triangle(0,0,50,0,0,50); // niin piirrä kolmio
}
if (valinta == 2) { // Jos valinta on yhtä suuri kuin 2
ellipse(0,0,100,100); // niin piirrä ympyrä
}
if (valinta == 3) { // Jos valinta on yhtä suuri kuin 3
quad(0,0,50,25,100,0,50,-25); // niin piirrä neljäkäs
}
pop(); // Palauta koordinaatisto muistista
}
|
Voit testata ohjelmaa tästä.