Pomppivat pallot
Tehdään vielä ohjelma, jossa arvotaan 200 kappaletta palloja taulukkoon. Jokasielle pallolle määrätään satunnaisesti alkupaikka (x,y), nopeus vaaka-suunnassa vx ja nopeus pystysuunnassa vy, sekä pallon väri ( R G B A). Jos pallo törmää ikkunan reunaan, niin silloin käänetään pallon nopeus vx tai vy vastakkaiseksi. Vaaka suuntaisesta (oikealle tai vasemalle) törmäyksestä muuttuu nopeus vx vastakkaiseksi ja pystysuuntaisesta törmäyksestä (ylös tai alas) muuttuu nopeus vy vastakkaiseksi. Ohjelman koodi on seuraava.
var pallot = []; // Luodaan tyhjä taulukko
var r = 30; // Pallon säde
var tausta = 0; // Tausta-muuttujan arvo 0
function setup() {
createCanvas(600, 600); // Ikkunan koko 600 x 600
for (var a = 0; a < 200; a++) { // Luodaan 200 solua taulukkoon
pallot[a] = { x:random(50,550), // Vaakasuuntainen paikka
y:random(50,550), // Pystysuuntainen paikka
vx : random(-10,10), // Vaakasuuntainen nopeus
vy : random(-10,10), // Pystysuuntainen nopeus
R : random(255), // Punainen
G : random(255), // Vihreä
B : random(255), // Sininen
A : random(255) // Peittävyys eli läpinäkyvyys
};
}
}
function draw() {
if (tausta == 0) {
background(220); // Tyhjennä tausta
}
for (var a=0; a<200; a++) {
pallot[a].x = pallot[a].x +pallot[a].vx; // Muuta vaakasuuntaista paikkaa
pallot[a].y = pallot[a].y +pallot[a].vy; // Muuta pystysuuntaista paikkaa
fill(pallot[a].R, pallot[a].G, pallot[a].B, pallot[a].A); // Aseta pallon väri
ellipse(pallot[a].x,pallot[a].y,2*r,2*r); // Piirrä pallo
if (pallot[a].x < (width-r)) { // Jos törmää oikeaan reunaan
pallot[a].vx = -pallot[a].vx // lähde vasemapaan päin
}
if (pallot[a].x > r) { // Jos törmää vasempaan reunaan
pallot[a].vx = -pallot[a].vx // Lähde oikeaan päin
}
if (pallot[a].y < (height-r)) { // Jos törmää alareunaan
pallot[a].vy = -pallot[a].vy // Lähde ylöspäin
}
if (pallot[a].y > r) { // Jos törmää yläreunaan
pallot[a].vy = -pallot[a].vy // Lähde alaspäin
}
}
}
function mousePressed() { //Jos hiirellä napsautetaan
if (tausta == 0) { // Jos tausta on 0
tausta = 1; // niin muuta arvoksi 1
} else { // Jos tausta on 1
tausta = 0; // niin muuta arvoksi 0
}
}
|
Kun ajat ohjelman niin se toimii seuraavasti. Kokeile napsauttaa hiirellä kuvan päällä, mitä huomaat?
Kaksiulotteinen taulukko ja Noise-funktio
Luodaan neljä 2-ulotteista taulukkoa. Yhdessä taulukko-taulukossa on ympyrän halkaisija, joka on alussa arvottu satunnaisesti. Lisäksi meillä on R-, G- ja B-taulukot, jossa on arvottu kullekkin ympyrälle väriarvot. Laitamme yhteen taulukkoon 100:n ympyrän arvot siten, että siinä on 10×10 = 100 solua. Kun haluamme käydä kaksi-ulotteisen taulukon kaikki solut läpi, niin silloin tarvitsemme kaksi sisäkkäistä for-silmukkaa. Sisemmällä silmukalla käymme läpi taulukon sarakkeet ja ulomalla silmukalla käymme läpi taulukon rivit. Kokonainen ohjelma on seuraava.
var taulukko = []; // Luodaan tyhjä taulukko halkaisijaa varten
var R = []; // Luodaan tyhjä taulukko punaista värisävyä varten
var G = []; // Luodaan tyhjä taulukko vihreää värisävyä varten
var B = []; // Luodaan tyhjä taulukko sinistä värisävyä varten
function setup() {
createCanvas(600, 600); // Ikkunan koko
noStroke(); // Ei reunaviivaa
frameRate(5); // Ruudun päivitys nopeus 5 Hz
for (var a = 0; a <= 10; a++) { // Luodaan sarakkeet
taulukko[a] = [];
R[a] = [];
G[a] = [];
B[a] = [];
for (var b = 0; b <= 10; b++) { // Luodaan rivit
taulukko[a][b] = noise(random(100))*width/8;
R[a][b] = random(255);
G[a][b] = random(255);
B[a][b] = random(255);
}
}
}
function draw() {
background(0);
for (var a= 0; a <= 10; a++) {
for (var b = 0; b <= 10; b++) {
taulukko[a][b] = taulukko[a][b]+0.01; // Kasvata arvoa 0.01 verran
fill(R[a][b],G[a][b],B[a][b]); // Aseta ympyrän väri
taulukko[a][b] = noise(taulukko[a][b])*width/8; // Muuta halkaisijaa satunnaisesti noise-funktion avulla
ellipse(60*a,60*b,taulukko[a][b],taulukko[a][b]); // Piirrä ympyrä
}
}
}
|
Koska pallon halkaisijaa muutetaan laskurin ja noise-funktion avulla, niin pallot suurenevat ja pienenevät satunnaisesti. Lopputulos näyttää tältä.
Generatiivinen taide
Tehdään ohjelma, jossa ikkunan koko on 600 x 600. Ikkuna on jaettu 10×10 pikselin kokoisiin soluihin, jolloin muodostuu 60×60 solua, joka on myös taulukon koko. Jokaiselle solulle on määrätty väriarvo. Jos väriarvo on 0, niin väri on musta. Alussa kaikkien solujen väriarvo on 0. Jos hiirellä napsautetaan jossain kohtaa ikkunaa, niin silloin siihen kohtaan lisätään luku 2000. Mutta välittömästi tätä lukua aletaan siirtää vireisiin soluihin, kunnes luku on 0. Lukujen siirtäminen tapahtuu automaattisesti, koska siirtäminen on draw-lohkon sisällä, joka siis oli ikuisessa silmukassa. Niin kauan kun luku on suurempi kuin 6, niin solu väritetään valkoiseksi. Luomalla useita ehtoja ja värejä kun luku saa arvoja 6:sta 0:aan, niin voimme kuvata värin leviämisen ympäristöön eri väreillä. Koska itse laitamme väripisteet ohjelman suorituksen aikana, niin sanomme että kyseessä on ns. generatiivinen taide eli toisin sanoen ohjelma reagoi meidän toimintaan ja luo samalla taidetta etukäteen määrätyn säännön mukaisesti. Katsotaan koodia tarkemmin.
var taulukko = []; // Luodaan tyhjä taulukko
function setup() {
createCanvas(600, 600); // Ikkunan koko
noStroke();
for (var a = 0; a < 60; a++) { // Luodaan sarakkeet
taulukko[a] = [];
for (var b = 0; b < 60; b++) { // Luodaan rivit
taulukko[a][b] = 0; // Alkuarvo on nolla (= väri musta)
}
}
}
function draw() {
for (var a = 1; a < 59; a++) { // Silmukka ei ala nollasta, eikä mene viimeiseen soluun
for (var b = 1; b < 59; b++) { // koska pistettä ei voi siirtää yli taulukon
if (taulukko[a][b] >= 4) { // Jos on vähintään solun arvo 4
taulukko[a][b] = taulukko[a][b] - 4; // Niin vähennä väriarvoa 4:llä
taulukko[a+1][b] = taulukko[a+1][b] + 1; // Siirrä yksi oikealle
taulukko[a-1][b] = taulukko[a-1][b] + 1; // Siirrä yksi vasemmalle
taulukko[a][b+1] = taulukko[a][b+1] + 1; // Siirrä yksi alas
taulukko[a][b-1] = taulukko[a][b-1] + 1; // Siirrä yksi ylös
}
}
}
for (var c = 0; c < 60; c++) {
for (var d = 0; d < 60; d++) {
if (taulukko[c][d] == 0 ) { fill(0,0,0); } // Aseta väri arvon mukaan
if (taulukko[c][d] == 1 ) { fill(255,0,0); }
if (taulukko[c][d] == 2 ) { fill(255,0,255); }
if (taulukko[c][d] == 3 ) { fill(0,0,255); }
if (taulukko[c][d] == 4 ) { fill(0,255,255); }
if (taulukko[c][d] == 5 ) { fill(0,255,0); }
if (taulukko[c][d] == 6 ) { fill(255,255,0); }
if (taulukko[c][d] > 6 ) { fill(255,255,255); }
rect(c*10,d*10,10,10); // Piirrä neliö
}
}
fill(255,255,255); // Aseta valkea väri
rect(mouseX,mouseY,10,10); // Hiiren kohdistin on neliö
}
function mousePressed () { // Kun hiirtä on napsautettu, niin aseta soluun luku 2000
if ((mouseX >= 10) && (mouseX < (width-10)) && (mouseY >= 10) && (mouseY < (height-10))) {
taulukko[round(mouseX/10.0)][round(mouseY/10.0)] = 2000;
}
}
|
Napsauta hiirellä ruudussa, niin monta kertaa kuin haluat. Jokainen napsautus asettaa 2000 hiekanjyvää, jotka leviävät ympärille.