Código original:
void setup() {
size(640, 360);
noStroke();
}
void draw() {
background(0);
// Scale the mouseX value from 0 to 640 to a range between 0 and 175
float c = map(mouseX, 0, width, 0, 175);
// Scale the mouseX value from 0 to 640 to a range between 40 and 300
float d = map(mouseX, 0, width, 40, 300);
fill(255, c, 0);
ellipse(width/2, height/2, d, d);
}
Apresentação:
Map pode ser entendido como uma proporção(ou escala lembrando mapas) entre dois intervalos como mostrado no código.O exemplo mostrado indica na variável "c":
c = map(posição x do mouse (valor de referência) , inicio do projetor representada por 0(proporção inicial 1), final do projetor representado por width(proporção final), Green 0(proporção inicial 2),Green 175(proporção final 2)
Então quando mais o mouse se move para a direita maior será o G(RGB),porém não atinge simplesmente o mesmo valor do X do Mouse mas sim uma proporção como se a largura do projetor fosse exatamente 175,dando liberdade a escolha do tamanho do projetor sem encontrar tanto problemas e mais aplicações.
Alteração:
Código:
void setup() {
size(640, 360);
noStroke();
}
void draw() {
background(0);
// Scale the mouseX value from 0 to 640 to a range between 0 and 175
float c = map(mouseX, 0, width, 0, 225);
// Scale the mouseX value from 0 to 640 to a range between 40 and 300
float d = map(mouseX, 0, width, 1, 380);
fill(255, c, 0);
ellipse(width/2, height/2, d, d);
}
Alterando alguns valores podemos fazer com que a variável "c" chegue até um valor maior(aumentando a variação de cor) , deixar o circulo com um diâmetro muito menor que o original e aumentar o seu tamanho no extremo.
