IntroToDrawingFixed

This is just a screen grab of our interactive coding talk-through, prepared to make captioning and translation easier. It is better to watch our talk-throughs here:
https://www.khanacademy.org/cs/programming/

Nós precisamos começar tentando entender formas, o básico.

Mas não se preocupe, logo, suas formas estarão voando através da tela, mudando de cor e fazendo todo tipo de coisas legais que se consegue com programação

Só fique conosco!

Então vamos começar desenhando retângulos.

A gente digita rect() para retângulos, depois abrimos parenteses, e depois quatro números, e eu vou explicar o que eles significam daqui a pouco

...depois fechamos parenteses, e no final, nós só colocamos o ponto e vírgula

Olhe, fantástico, um retângulo!

E isso foi tão legal, então vão fazer de novo. Nós podemos tentar com números diferentes dessa vez.

Talvez números maiores, e depois números menores no final, e olhe, outro retângulo.

De fato, se nós tentarmos mudar o primeiro número para um menor, ele vai começar a se mover.

Se nos mudarmos o último número para um maior e depois um menor, então ele só vai crescer e depois encolher. Interessante.

Então como toda essa mágica acontece, você deve estar se perguntando?

Bem, lembre-se que o seu computador é como um cachorro muito inteligente e obediente.

Com o cachoro, talvez nós podemos dizer para ele sentar, ficar, e até rolar.

Você só teria que dar a ele o comando sentar()

Então em código, como você diria ao seu cachorro computador para sentar?

Bom, o jeito que você faz isso é escrevendo o nome do comando, digamos "sentar", e depois 2 parenteses após que dizem para ele realizar o comando que você acabou de dizer, e depois um ponto e vírgula no final que diz "é, o comando acabou."

E depois o seu cachorro computador iria sentar.

Bem, é claro, o seu computador na Khan Academy não é um cachorro, então ele não sabe sentar ou rolar, mas ele sabe como desenhar retângulos, quando você chama a função rect(), e isso é bem legal também, certo?

Então, isso é o que nós vamos fazer nessa linha. Nós chamamos o comando rect(), que é só o nome, e depois abrimos paranteses e fechamos parenteses para dizem "vá fazer aquilo", e depois o ponto e vírgula no final.

É assim que o seu computador sabe ir até essa habilidade especial rect.

Ok, então agora vamos voltar ao nosso rect.

Nós temos o nome do comando bem aqui, nos temos aqueles parenteses.

Mas e todos esses números loucos?

Bem, a ideia é que o computador realmente não sabe o suficiente se você só dizer a ele rect.

Para entender isso, imagine que eu tivesse acabado de dar a você um pedaço de papel, e quisesse que você desenhasse um retângulo exatamente do jeito que eu quero que ele seja.

Bem, a menos que você possa ler minha mente, você iria ter algumas perguntas de cara.

Primeiro, você poderia se perguntar, "bem, ok, onde você quer que eu desenhe o retângulo?"

E depois, eu diria "que tal se a gente concordasse que esse lado esquerdo do papel, nós vamos chamar de 0."

E vamos concordar que o lado direito vai ser 400.

Depois eu poderia te dar um número, tipo 100, e você iria saber que isso seria na direita por aqui, mais ou menos.

Isso vai satisfazer você por um momento, mas depois você vai ficar tipo ok, isso me diz o lado, mas e o quão alto e o quão baixo?

Depois eu poderia dar a você outro número, tipo 200, e eu diria que esse é o topo 0, e de novo o fundo é 200, e você diria, bem 200 vai ser bem no meio.

E isso é perfeito, porque agora você pensa, ok, eu vou desenhar o retângulo bem aqui.

...porque é 100 pro lado e 200 pra baixo.

Exceto que você ainda não tem informação suficiente, porque agora o que você está perguntando?

Você está pensando, quão grande eu quero que o retângulo seja?

Eu diria, o que você acha de, 150 de largura?

E você pensa, bem, isso é 100, e isso é 400, então se eu quero 150 de largura, talvez eu deveria ir até aqui.

Ok, legal, isso é mais ou menos 150 de largura.

Então depois você diria, o quão alto você quer?

E eu vou dizer, "que tal 50 de altura?"

Você vai dizer, ok, 50, isso é mais ou menos dessa altura.

Agora você vai dizer, fantástico, eu sei exatamente onde você quer o seu retângulo, e sei exatramente o quão grande você o quer, agora eu posso desenhá-lo.

Isso é bastante trabalho pra um retângulo, não é?

Mas a idéia é que dando apenas aqueles 4 números, 100 pro lado, 200 pra baixo, 150 de largura, 50 de altura, nós agora estamos pensando igual sobre como esse retângulo deve ser.

É assim que o computador trabalha também.

Você pode escrever só o nome do comando como nós dissemos mais cedo-abre parenteses, os 4 números-100,200,150,50, fecha parenteses, e depois o ponto e virgula.

E ele vai desenhar o retângulo exatamente onde nós queremos que ele desenhe!

Bem, se nós formos honestos com nós mesmos, ali não é realmente onde nós queremos o retângulo - ali não é onde nós o desenhamos, certo?

Nosso números estão um pouco errados. Então vamos continuar e dizer que nós queremos que ele seja exatamente igual ao que desenhamos

Nós iramos mover ele para que fique um pouco mais à frente, um pouco menos pra cima e pra baixo, um pouco mais magro, e talvez um pouquinho menor.

Agora nós temos que o nosso retângulo esta praticamente igual ao que desenhamos, porque nós entendemos o que cada um desses números significa, e nós podemos mudá-los para que ele pareça com o que nós queremos.

Agora vamos pensar sobre desenhar outro retângulo.

A beleza disso, é que nós podemos desenhar retângulos onde nós quisermos agora.

Que tal a gente desenhar um bem nesse canto superior, bem em cima?

Vamos pensar sobre onde isso seria.

Seria tipo 0 pro lado, 0 pra cima e pra baixo, e talvez bem pequeno, tipo 50 de largua e 10 de altura.

Vamos fazer isso. Nós vamos digita rect, separar os parâmetros com vírgulas, e dizer, ok, estamos prontos.

Mas uh oh, nós temos esse erro que diz que está faltando o parenteses de fechamento, e nós percebemos que está mesmo, então nós vamos colocá-lo de volta.

Mas uh oh, agora nós temos outro erro que diz que está faltando o ponto e vírgula.

Se nós clicarmos "show me where", ele vai apontar para a linha que nós acabamos de escrever...

...e nós lembrados que ponto e vírgulas são como pontos finais no fim de uma frase, mas no fim de uma linha de código, e nós esquecemos um.

Nós podemos colocá-lo de volta, nada demais, e tudo está bem de novo.

Veja só, um pequenino retângulo, exatamente como nós queriamos.

Assim como antes, nós podemos aumento para ficar maior, nos podemos move-lo por aí, e nós podemos posicioná-lo exatamente onde nós queremos que ele esteja.

Então agora você sabe em detalhes exatamente como essa rect funciona.

Nós falamos o que esses números significam, e como você sempre precisa botar o nome do comando, e os parenteses, separar os números com vírgula, botar o ponto e vírgula no final.

Parece muito, mas você pode ir e tentar isso você mesmo e sentir como se faz.

Na próxima vez, nós vamos aprender sobre como fazer mais formas, e depois nós vamos fazer coisas fantásticas como fazer as formas coloridas e fazê-las voar pela tela.