Arte em Pixels

14/12/2022 14:28 Arte em Pixels
Projetos
Arte em Pixels
Neste projeto, você vai criar um editor de arte em
pixels.
Passo 1 Introdução
Crie um editor de pixel art. Além de usar HTML e CSS, você aprenderá como usar o JavaScript para adicionar
interatividade ao seu projeto.
O que você vai fazer
Experimente o projeto abaixo. Clique em uma cor na paleta e clique em um pixel para alterar sua cor.
O que você vai aprender

Este projeto abrange elementos das seguintes vertentes do Currículo de Fabricação Digital Raspberry Pi (http
s://rpf.io/curriculum):
Faça ilustrações 2D e 3D básicas (https://www.raspberrypi.org/curriculum/design/creator).
Use construções básicas de programação para criar programas simples (https://www.raspberrypi.org/c
urriculum/programming/creator)
https://projects.raspberrypi.org/pt-BR/projects/pixel-art/print 1/12
14/12/2022 14:28 Arte em Pixels
Informações adicionais para educadores

Se você precisar imprimir este projeto, por favor, use a versão para impressão (https://projects.raspberrypi.or
g/pt-BR/projects/pixel-art/print).
Use o link no rodapé para acessar o repositório deste projeto no GitHub, o qual contém todos os recursos
(incluindo um exemplo de projeto finalizado) na pasta ‘en/resources’.
14/12/2022 14:28 Arte em Pixels
Passo 2 O que você vai precisar
Hardware
Um computador capaz de acessar o site trinket.io (https://trinket.io)
Software
Este projeto pode ser concluído em um navegador web usando a aplicação online trinket.io (https://trinket.io).
14/12/2022 14:28 Arte em Pixels
Passo 3Crie uma grade de pixels
Vamos criar uma grade de pixels que você pode usar para criar pixel art.
A grade será parecida com uma tabela. As tabelas contêm linhas e as linhas contêm células que representam os
pixels.
Abra este trinket (http://jumpto.cc/web-pixel).

O projeto deve ficar assim:
Primeiro, vamos escrever um código para criar uma tabela com um fundo preto e colocar pixels brancos nela.
Adicione este código ao <body> do seu arquivo index.html para criar um <div>:
A tag <div> é uma caixa invisível à qual você pode atribuir um estilo. Este <div> tem o ID art, que você precisa,
então você pode adicionar estilos para a caixa.
Agora vá para o seu arquivo style.css e adicione o estilo de tabela para o <div> chamado art.
Isto cria uma tabela com uma borda e define o espaçamento dentro da grade.
Não parece muito interessante ainda, então você precisa colocar linhas de pixels dentro dela.
Volte para o seu arquivo index.html e adicione uma linha de três pixels dentro da caixa art. Se você quiser
economizar tempo, digite a primeira linha e copie e cole para criar as outras.
Observe que aqui você está usando class em vez de ID para dar estilo aos divs. Isto é porque haverão muitos
deles, portanto uma classe é mais útil.
Alterne para o arquivo style.css e adicione os seguintes estilos para as linhas e os pixels dentro de cada
linha:
14/12/2022 14:28 Arte em Pixels
Agora seus pixels se alinharão em uma grade com linhas pretas ao redor deles.
No seu arquivo index.html, adicione outras duas seções de pixel para criar uma grade de pixel 3×3. Você
pode usar novalmente o copiar e colar para economizar tempo.
Eu preciso de uma dica

Aqui está como seu código deve parecer:
14/12/2022 14:28 Arte em Pixels
Passo 4Desafio: redimensione sua grade
A grade 3 × 3 é pequena para pixel art. Você pode fazer a grade maior? 8 × 8 é um bom tamanho para pixel art.
Tente copiar e colar em vez de digitar tudo.
14/12/2022 14:28 Arte em Pixels
Passo 5 Colorindo os pixels
Este projeto usa três linguagens diferentes:

HTML é usado para organizar seu conteúdo
CSS diz ao conteúdo como ele deve se parecer usando os estilos
JavaScript é uma linguagem de programação que você pode usar para fazer uma página web responder às
interações com ela
Vamos adicionar um código JavaScript para colorir um pixel automaticamente quando você clicar nele.
Vamos criar uma função. As funções são blocos de código denominados que executam uma tarefa específica.
Podemos chamar uma função pelo seu nome quando queremos executar o código que ela contém.
Dentro do arquivo script.js, crie uma função com o nome setPixelColour. A função setPixelColour
precisa ter um pixel como entrada para que ele pode mudar a cor deste pixel.
Adicione este código dentro da função para definir a cor de fundo do pixel:
Observe que backgroundColor usa a ortografia americana de ‘cor’.

No momento, esse código não tem qualquer efeito.
Vá para index.html e adicione o seguinte código ao primeiro pixel para que quando você clicar neste pixel, a
função setPixelColour seja chamada:
O this nos parênteses é a variável de entrada para a função setPixelColour, que permite saber qual pixel para
terá cor definida, para - this (este) pixel!
Teste seu código clicando no primeiro pixel. Ele deve ficar preto.
14/12/2022 14:28 Arte em Pixels
Você adicionou código onclick apenas para o primeiro pixel, então clicar nos outros pixels não fará nada ainda.
14/12/2022 14:28 Arte em Pixels
Passo 6 Desafio: torne todos os pixels clicáveis
Você pode tornar todos os pixels clicáveis? Para economizar tempo, você pode copiar e colar o código necessário.
Teste seu código, criando uma desenho rápido de pixel art.
Dica: você pode clicar em Autorun para limpar todos os pixels.
14/12/2022 14:28 Arte em Pixels
Passo 7 Adicione uma paleta de cores
Você achou ruim não poder mudar a cor de um pixel de volta ao branco se cometeu um erro? Vamos consertar isso
criando uma paleta de cores para que você possa escolher as cores da caneta com um clique.
Adicione este código na parte inferior do seu arquivo style.css para criar um estilo de caneta:
Agora crie uma paleta com cores de caneta preta e branca usando o estilo de caneta que você acabou de
criar. Adicione o seguinte código ao seu index.html abaixo do tag <body>:
style = permite que você adicione o código CSS dentro de seu arquivo HTML, o que é conveniente aqui.
Precisamos adicionar um código para que, quando uma das cores da paleta for clicada, a cor da caneta seja
alterada.
Alterne para o js e crie uma variável chamada penColour (cor da caneta) no topo do arquivo. Defina o valor
da variável de 'black' (preto).
Crie uma variável em JavaScript

Uma variável permite armazenar dados em um programa. As variáveis têm um nome e um valor.
Esta variável tem o nome animal e o valor "gato":
var animal = "gato";
Esta variável tem o nome pontuacao e valor 30:
var pontuacao = 30;
Para criar uma variável, atribua-lhe um nome e um valor. O nome da variável sempre será precedida da palavra
reservada var, e não deve conter nenhum espaço.
14/12/2022 14:28 Arte em Pixels
Eu preciso de uma dica
Abaixo da variável, crie uma nova função chamada setPenColour com uma pen (caneta) como entrada. Veja
a função setPixelColour que você já criou para ajudá-lo.
Crie uma função em JavaScript

Você pode criar uma função usando o seguinte código. Substitua name_of_function (nome da função) pelo
nome da sua função - certifique-se de incluir apenas letras, números e sublinhados no nome que você escolher.
function name_of_function(){
O código que você quer que faça parte da função deve estar entre chaves { e }.
Você pode chamar a função digitando o nome da função:
name_of_function();
Dentro da função setPenColour, adicione código para definir a variável penColour como a cor da pen
(caneta) dada como entrada.
Você vai precisar também usar a variável de penColour quando você mudar a cor de um pixel.
Altere a função setPixelColour para usar a variável penColour em vez de black (a cor preta):
No arquivo index.html, adicione o código necessário para chamar a função setPenColour quando uma
cor na paleta for clicada.
Teste se você pode alternar a cor da caneta entre preto e branco para preencher ou excluir pixels.
14/12/2022 14:28 Arte em Pixels
Passo 8Desafio: adicione mais cores à paleta
Você consegue adicionar mais cores à paleta?

Escolha as cores que você deseja usar em seu pixel art e adicione-as ao seu código. Em seguida, crie algumas
imagens legais de pixels.
Dica: A cor verde brilhante é chamada de chartreuse. Aqui está uma lista de nomes de cores (https://www.w3
schools.com/colors/colors_names.asp) a partir do qual você pode escolher suas favoritas.
Você pode usar a Ferramenta de Captura no Windows (ou uma alternativa se não estiver usando o Windows) para
salvar uma cópia da sua arte em pixel como um arquivo de imagem.
Tradução Contribuída pela Comunidade
Este projeto foi traduzido por Denis Silva e revisado por Tiago Almeida.
Nossos incríveis voluntários de tradução nos ajudam a dar as crianças em todo o mundo a oportunidade de
aprender a programar. Você pode nos ajudar a alcançar mais crianças traduzindo nossos projetos - leia mais em
rpf.io/translate (https://rpf.io/translate).
Publicado por Raspberry Pi Foundation (https://www.raspberrypi.org) sob Creative Commons license (ht
tps://creativecommons.org/licenses/by-sa/4.0/).
Ver projeto e licença no GitHub (https://github.com/RaspberryPiLearning/pixel-art)

Arte em Pixels

Enviado por

Dados do documento

Descrição original:

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Arte em Pixels

Enviado por

Direitos autorais:

Formatos disponíveis

14/12/2022 14:28 Arte em Pixels

O que você vai aprender

Informações adicionais para educadores

Passo 2 O que você vai precisar

Passo 3Crie uma grade de pixels

Abra este trinket (http://jumpto.cc/web-pixel).

Eu preciso de uma dica

Passo 4Desafio: redimensione sua grade

Passo 5 Colorindo os pixels

Este projeto usa três linguagens diferentes:

Observe que backgroundColor usa a ortografia americana de ‘cor’.

Passo 6 Desafio: torne todos os pixels clicáveis

Dica: você pode clicar em Autorun para limpar todos os pixels.

Passo 7 Adicione uma paleta de cores

Crie uma variável em JavaScript

Esta variável tem o nome animal e o valor "gato":

var animal = "gato";

Esta variável tem o nome pontuacao e valor 30:

var pontuacao = 30;

Eu preciso de uma dica

Crie uma função em JavaScript

Passo 8Desafio: adicione mais cores à paleta

Você consegue adicionar mais cores à paleta?

Você também pode gostar