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.