Introdução à Programação Funções Matemáticas Bruno C. de Paula Introdução à Programação Funções Matemáticas 1º Semestre 2009 > PUCPR > Design Digital

23/03/2017 Resumo da aula O objetivo hoje é conhecer algumas funções matemáticas e sua aplicação na programação gráfica;

Motivação Vamos ver que tipo de arredondamentos, comparações, restrições, comparações e transformações podem ser feitas com números e onde tais operações se aplicam em situações reais de: Movimentação; Desenho; Texturização; Etc. 23/03/2017

Sintaxe introduzida: comparação entre números min (en/pt): obtém o mínimo entre 2 ou 3 números; max (en/pt): obtém o máximo entre 2 ou 3 números; 23/03/2017

Sintaxe Introduzida: restrições de valor abs (en/pt): retorna valor absoluto de um número; ceil (en/pt): arredonda para cima; floor (en/pt): arredonda para baixo; round (en/pt): arredondamento para o inteiro mais próximo; constrain (en/pt): restringe um valor a um intervalo; 23/03/2017

Sintaxe introduzida: normalização, mapeamento e interpolação Operações de “regra de 3”; norm (en/pt): Normaliza. Transforma um número de um intervalo para outro entre 0 e 1; map (en/pt): Mapeia. Converte um número de um intervalo para outro; lerp (en/pt): Interpola. Calcula um número entre 2 em um intervalo específico. 23/03/2017

Sintaxe introduzida: geração de números aleatórios random (en/pt): devolve um valor pseudo-aleatório; randomSeed (en/pt): escolhe a raiz do número aleatório; noise (en/pt): devolve valor de ruído de Perlin; noiseSeed (en/pt): ajusta a raiz do ruído de Perlin; noiseDetail (en/pt): ajusta o detalhe do ruído de Perlin. 23/03/2017

Sintaxe introduzida: expoentes e raízes sq (en/pt): Retorna o quadrado de um número; sqrt (en/pt): Calcula a raiz quadrada de um número; pow (en/pt): Devolve um número elevado a um expoente (potência). 23/03/2017

Sintaxe introduzida: funções diversas dist (en/pt): Calcula a distância entre 2 pontos; mag (en/pt): Calcula o comprimento de um vetor. Mesmo que dist(0,0,x,y); exp (en/pt): Retorna e (2.71...) elevado à uma potência; log (en/pt): Calcula o logaritmo neperiano de um número; 23/03/2017

Restrições e comparações min, max, abs, ceil, floor, round float a = min(2.3, 3.1); // valor mínimo println(a); // Exibe 2.3; float b = max(2.3, 3.1); // valor máx println(b); // Exibe 3.1; float c = abs(-12); // valor absoluto println(c); // Exibe 12.0 float d = ceil(12.2); // arredonda cima println(d); // Exibe 13 23/03/2017

constrain (valor, mínimo, máximo) int f = constrain(5, 10, 20); println(f); // Exibe 10 int g = constrain(30, 10, 20); println(g); // Exibe 20 Útil para restringir movimento do mouse; 23/03/2017

Mouse restringido via constrain 23/03/2017 Mouse restringido via constrain void draw() { background(255); // Cor de fundo float mx = constrain(mouseX, 30, 60); // Restringe o x entre 30 e 60 float my = constrain(mouseY, 10, 90); // Restringe o y entre 10 e 90 rectMode(CORNERS); // Modo de desenho de retângulos rect(30, 10, 60, 90); // Desenha um retângulo ellipse(mx, my, 5, 5); // Desenha uma elipse que acompanha o mouse } 23/03/2017

Normalização Regra de três; Conversão de um valor para um intervalo entre 0 e 1; float h = norm(0, 0, 255); println(h); // Exibe 0; float i = norm(127, 0, 255); println(i); // Exibe 0.49... float(j) = norm(255, 0, 255); println(j); // Exibe 1. 23/03/2017

Normalização 23/03/2017 float x; void setup() { size(300,200); // Configura a tela // Escolhe a fonte: textFont(createFont("Arial",18)); } void draw() background(128); // Cor de fundo // Regra de 3 com mouseX entre 0 e width x = norm(mouseX, 0, width); // Exibe mouseX e x text("mouseX = "+mouseX, 20, 20); text("x = " + x, 20, 40); 23/03/2017

Mapeamento Regra de três; Conversão de um valor de um intervalo para outro; float k = map(20, 0, 100, 0, 255); println(k); // Exibe 51.0 23/03/2017

Mapeamento 23/03/2017 float y; void setup() { size(200,300); // Configura a tela // Escolhe a fonte: textFont(createFont("Arial",18)); } void draw() background(128); // Cor de fundo // Regra de 3 y = map(mouseY, 0, height, 100, 200); // Exibe mouseX e x text("mouseY = "+mouseY, 20, 20); text("y = " + y, 20, 40); rectMode(CORNERS); rect(25, 100, 175, y); 23/03/2017

Mapeamento 23/03/2017 float corR = 0; float corG = 0; float corB = 0; void draw() { // Regra de 3 corR = map(mouseX, 0, width, 0, 255); corG = map(mouseY, 0, height, 0, 255); background(corR, corG, corB); } 23/03/2017

Mapeamento e restrição (1) 23/03/2017 Mapeamento e restrição (1) float corR = 0; float corG = 0; float corB = 0; void setup() { size(300,200); textFont(createFont("Arial",18)); } void draw() // Regra de 3 corR = map(mouseX, 0, width, 0, 255); corG = map(mouseY, 0, height, 0, 255); // Altera a cor pelo mouse if(mousePressed && mouseButton==LEFT) { corB = corB - 1; if(mousePressed && mouseButton==RIGHT) { corB = corB + 1; corB = constrain(corB, 0, 255); background(corR, corG, corB); text(corR + ", " + corG + ", " + corB, 20, 20); 23/03/2017

23/03/2017 float corR = 0; float corG = 0; float corB = 0; void setup() { size(300,200); textFont(createFont("Arial",18)); } void draw() // Regra de 3 corR = map(mouseX, 0, width, 0, 255); corG = map(mouseY, 0, height, 0, 255); // Altera a cor pelo mouse if(mousePressed && mouseButton==LEFT) { corB = corB - 1; if(mousePressed && mouseButton==RIGHT) { corB = corB + 1; corB = constrain(corB, 0, 255); background(corR, corG, corB); text(corR + ", " + corG + ", " + corB, 20, 20); 23/03/2017

Geração de números pseudo-aleatórios Permite que se dê a ilusão da remoção do determinismo de um programa; random(min, max): Retorna um número pseudo-aleatório entre os 2 intervalos; float m = random(-10,10); println(m); // Não sei! Com certeza exibe um número entre -10 e 10 23/03/2017

Pontos aleatórios 23/03/2017 void draw() { float x = random(0, width); float y = random(0, height); point(x, y); } 23/03/2017

Linhas aleatórias 23/03/2017 void draw() { frameRate(1); float y1 = random(0, height); float y2 = random(0, height); float s = random(1, 10); strokeWeight(s); stroke(0, 128); line(0, y1, width, y2); } 23/03/2017

Retângulos aleatórios 23/03/2017 Retângulos aleatórios float x, y, h, w, r, g, b; void draw() { x = random(0, width); y = random(0, height); w = random(10, 30); h = random(10, 30); r = random(0, 255); g = random(0, 255); b = random(0, 255); fill(r,g,b); rect(x, y, w, h); } 23/03/2017

+ Linhas aleatórias 23/03/2017 float x=0, y=0, y2=0; void setup() { size(800, 50); } void draw() y2 = height/2+random(0, 10); line(x, y, x+1, y2); y = y2; x = x + 1; 23/03/2017

Movimento Browniano 23/03/2017 float x, y; void setup() { size(300, 300); x = width/2; y = height/2; } void draw() x = x + random(-3, 3); y = y + random(-3, 3); ellipse(x, y, 5, 5); 23/03/2017