1º SIMULADO DE PROGRAMAÇÃO JAVASCRIPT

Comando createCanvas()

No código ao lado, foi utilizado o comando createCanvas() para definir o

tamanho da tela em que as formas geométricas serão desenhadas:

O que acontece se você modificar os parâmetros de createCanvas(400,

400) para createCanvas(600, 200)?

• A área de desenho terá uma base menor e uma altura menor.

• A área de desenho terá uma base maior e uma altura menor.

• c) A área de desenho terá uma base menor e uma altura maior.

• A área de desenho permanecerá do mesmo tamanho.

Answer explanation

O valor 600 aumenta a largura, enquanto o valor 200 diminui a altura.

Modificando o tamanho de formas geométricas

O comando circle() ao lado, foi usado no código para desenhar círculos na tela. Veja o exemplo:

Organize os blocos a seguir para criar um círculo maior do que o da figura ao lado:

• 
• 
• 
• 
• 

Diferenças entre setup e draw

Organize essas opções nas categorias certas

Leia as afirmações a seguir sobre as funções setup() e draw():

Identifique a afirmação como verdadeira.

• A função setup() é chamada repetidamente durante o ciclo de execução

  do programa.

• A função draw() é responsável por desenhar na tela de forma contínua,

  enquanto o programa está rodando.

• O comando createCanvas() deve ser colocado dentro de draw() para

  garantir que a tela seja redesenhada a cada frame.

Desenhando linhas

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 400x400 pixels, como mostra a figura ao lado.

Organize os blocos abaixo para criar essa linha:

• 
• 
• 
• 

Comandos e coordenadas

Avalie as afirmativas a seguir sobre o uso de comandos e a manipulação de

coordenadas no plano cartesiano e, em seguida, assinale as duas alternativa que são corretas:

• O comando line() desenha uma linha reta conectando dois pontos definidos por coordenadas (x1, y1) e (x2, y2).

• O comando triangle() exige 3 valores de coordenadas, sendo um para cada vértice do triângulo.

• Para desenhar um triângulo na tela, o ponto de origem (0,0) está localizado no canto inferior direito da tela.

• O ponto (0, 0) do plano cartesiano, em p5.js está localizado no canto superior esquerdo da tela.

Comando if

Marcelo quer criar círculos em seu desenho e, por isso, elaborou o seguinte código ao lado:

Com base nesse código, analise as duas afirmativas que são verdadeiras

• 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.

Colorindo formas

Observe o código ao lado:

Em seguida, responda qual é a cor do quadrado e do círculo.

• Quadrado verde e círculo vermelho.

• Quadrado vermelho e círculo verde.

• Ambos, quadrado e círculo, verdes.

• Ambos, quadrado e círculo, vermelhos.

Novos comandos em p5.js o seguinte

Combine os comandos com suas respectivas descrições :

• Define a cor de preenchimento de formas.

• fill()

• Ignora a linha de código, usada para

• line()

• Adiciona uma linha entre dois pontos

• // (comentário)

Comandos em p5.js

Analise o seguinte código ao lado:

Identifique a afirmações verdadeiras (V) sobre as funções.

• A função createCanvas() é usada para definir as dimensões da tela de

  desenho.

• A função rect() desenha um círculo na tela.

• A função background() define a cor de fundo da tela.

• O código acima desenha um retângulo nas coordenadas (50, 50) com uma largura e altura de 100 pixels.

Função map ()

O código ao lador 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.