Aula 2 - Adicionando outras formas

Guilherme quer desenhar uma linha com o comando line(), que começa no primeiro pixel da esquerda e vai até o fim do outro lado em uma tela de 400 x 400 pixels, como mostra a figura a seguir:

• line(0, 0, 400, 400);

• line(0, 0, 400, 0);

• line(0, 400, 400, 0);

• line(400, 0, 0, 400);

Avalie as afirmativas a seguir sobre o uso de comandos e a manipulação de coordenadas no plano cartesiano e, em seguida, assinale a alternativa correta: I. O comando line() desenha uma linha reta conectando dois pontos definidos por coordenadas (x1, y1) e (x2, y2). II. O comando triangle() exige 3 valores de coordenadas, sendo um para cada vértice do triângulo. III. Para desenhar um triângulo na tela, o ponto de origem (0,0) está localizado no canto inferior direito da tela. IV. O ponto (0, 0) do plano cartesiano, em p5.js está localizado no canto superior esquerdo da tela.

• I e IV estão corretas.

• II e III estão corretas.

• I, II e IV estão corretas.

• Apenas III está correta.

Com base nesse código: if (mouseIsPressed) { circle(mouseX, mouseY, 10); } analise as afirmativas a seguir e as defina como verdadeiras (V) ou falsas (F): ( ) O código desenha um círculo de 10 pixels de diâmetro somente quando o botão do mouse é pressionado. ( ) O círculo será desenhado sempre no centro da tela, independentemente da posição do mouse. ( ) A posição do círculo é determinada pelas coordenadas atuais do mouse (mouseX, mouseY) quando o mouse é pressionado. ( ) O código desenhará múltiplos círculos automaticamente enquanto o mouse estiver pressionado e em movimento. Qual das alternativas abaixo apresenta a sequência correta de letras?

• V, F, V, V

• V, V, F, F

• F, F, V, F

• F, V, F, V

O código a seguir usa a função map() para controlar o movimento de uma bola com base na posição do mouse. No entanto, a movimentação está limitada a uma área específica. Com base no código acima, assinale a alternativa que descreve qual é a área de movimentação permitida para a bola.

• A bola pode se mover livremente na tela inteira.

• A bola só se move entre as coordenadas 130 e 170 tanto no eixo X quanto no eixo Y.

• A bola se move em todo o eixo Y, mas fica limitada no eixo X.

• O map() apenas define o tamanho dos círculos, não suas posições.

Considere o código a seguir, que utiliza map() para mudar a cor de um círculo com base na posição do mouse no eixo X: function setup() { createCanvas(400, 400); } function draw() { let cor = map(mouseX, 0, width, 0, 255); background(220); fill(cor, 100, 150); circle(200, 200, 100); } Classifique a afirmação a seguir como verdadeira (V) ou falsa (F): O valor da variável cor é ajustado entre 0 e 255, conforme a posição do mouse no eixo X.

• Verdadeiro

• Falso

Considere o código a seguir, que utiliza map() para mudar a cor de um círculo com base na posição do mouse no eixo X: function setup() { createCanvas(400, 400); } function draw() { let cor = map(mouseX, 0, width, 0, 255); background(220); fill(cor, 100, 150); circle(200, 200, 100); } Classifique a afirmação a seguir como verdadeira (V) ou falsa (F): A função fill(cor, 100, 150) define a cor de preenchimento do círculo com base na posição do mouse.

• Verdadeiro

• Falso

Considere o código a seguir, que utiliza map() para mudar a cor de um círculo com base na posição do mouse no eixo X: function setup() { createCanvas(400, 400); } function draw() { let cor = map(mouseX, 0, width, 0, 255); background(220); fill(cor, 100, 150); circle(200, 200, 100); } Classifique a afirmação a seguir como verdadeira (V) ou falsa (F): Se o mouse estiver no canto direito da tela, o círculo será preenchido com a cor preta.

• Verdadeiro

• Falso

Considere o código a seguir, que utiliza map() para mudar a cor de um círculo com base na posição do mouse no eixo X: function setup() { createCanvas(400, 400); } function draw() { let cor = map(mouseX, 0, width, 0, 255); background(220); fill(cor, 100, 150); circle(200, 200, 100); } Classifique a afirmação a seguir como verdadeira (V) ou falsa (F): O círculo sempre será desenhado na posição central da tela, independentemente da posição do mouse.

• Verdadeiro

• Falso

A função map() em p5.js é usada para reescalar um valor de um intervalo para outro e possui a seguinte estrutura: map(valor, início1, fim1, início2, fim2); Com base na estrutura da função, qual das opções abaixo ordena corretamente os parâmetros da função map() para reescalar o valor de mouseX de 0 a 400, de modo que ele seja convertido para um novo valor entre 50 e 300?

• mouseX, 0, 400, 50, 300

• mouseX, 50, 300, 0, 400

• mouseX, 0, 300, 400, 50

• mouseX, 400, 0, 300, 50

Considere o seguinte cálculo de distância entre dois pontos no plano cartesiano: distanciaX = mouseX - x; distanciaY = mouseY - y; distancia = sqrt(distanciaX*distanciaX + distanciaY*distanciaY); A partir do código acima, é possível afirmar que:

• I e II estão corretas.

• Apenas I está correta.

• I, II e III estão corretas.

• Apenas II está correta.