New York Institute of Technology - Olá, este é um vídeo introdutório, este é um vídeo de início, para aqueles que não aprenderam qualquer coisa sobre programação. Nós vamos olhar para p5.js, Eu discuti o que é p5.js no vídeo anterior. Neste vídeo, o único tópico aqui, e isso é bem fácil, é sistema de coordenadas e formas. O que isso significa? Uma das primeiras coisas que eu gostaria de mostrar em como aprender a programar é desenhar Há muito mais para programar que desenhar, Na verdade, este é um pequeno exemplo! Se você está interessado em programar jogos ou animações que são muito mais que gráficos e desenhos. Mas aquilo que você pode fazer na web, com diferentes elementos que dialogam entre si, interagindo com o usuário, analisando dados, todos os tipos de ferramentas para fazer o bem ao mundo, há muito mais que você pode além de desenhar. Mas desenhar é um bom começo! Não é para todos, mas se você é um designer visual, ou gostaria de desenhar ou gostar fazer as coisas visualmente pode ser uma maneira fácil e útil para começar a aprender os fundamentos da programação. Espero que depois eu faça muito mais vídeos que apenas olham para o texto, os dados, que têm um pouco pouco menos a ver com desenho, para aqueles de vocês que podem estar interessadso nisso. Ok, então para desenhar, precisamos de uma tela. Esta é a tela. Se eu quiser desenhar algo na tela, essa tela nesta lousa, Usarei essa caneta e eu vou fazer isso ... Pronto! desenhei alguma coisa! Agora, programar é o ato de dar instruções para o computador seguir. Então, enquanto eu faço algum tipo de esquema no momento com minha mente para desenhar esse retângulo, se quiser que esse retângulo apareça na tela, você precisa escrever as instruções para isso. A instrução que você precisa aprender para dar como um comando é realmente é uma função. Eu não posso dizer a palavra 'function' é o suficiente porque function, essa ideia de uma function é completamente fundamental para que tudo funcione em Javascript! Então esta é a nossa primeira visão de uma função, existe uma função chamada 'rect ()' Então, se pensarmos nisso como um comando você diz: rect! o retângulo apareceria lá na janela / tela! No entanto, não vai porque Eu preciso dizer onde deve ir e quão grande deveria ser. Então, como vamos dizer ao computador como desenhar esse retângulo? Então a maneira que isso acontece é através do uso de algo chamado 'argumentos'. Então, quando eu emitir este comando: rect () !, desenhe um retângulo !, Eu também tenho que especificar alguns argumentos, e os argumentos para esse retângulo, eles vêm na forma de números, e são separados por vírgulas e relacionados entre parênteses com a linha sendo terminada por um ponto e vírgula. Então esse é um momento para admitir para nós mesmos, que a sintaxe é algo que você tem para trabalhar com programação. Então com a linguagem humana que falamos um com o outro no meu caso é inglês, e algumas versões ruins quebradas de algumas outras línguas, podemos dizer coisas muito informalmente: 'desenhe um retângulo!', 'você poderia por favor desenhar um retângulo?', 'Por gentileza, meu amigo aí, você faria um retângulo apreça na tela movendo sua caneta ao redor? ', existem todos os tipos de maneiras diferentes Nós podemos dizer que. Mas aqui eu tenho que dizer de uma forma muito específica. Se eu estiver perdendo uma vírgula, ou parênteses, não vai funcionar! Nós vamos receber uma mensagem de erro, Eu vou te mostrar o que acontece quando você receber essa mensagem de erro e como consertar isso, mas isso é algo importante, que você vai ter que começar ficando confortável com Eu não sei se estou sempre ficando confortável com isso, mas é algo que existe! Então essa é a sintaxe. O que acontece nesses lugares vazios? Então, aqui estão as coisas que vão para lá: uma localização x, uma localização y uma largura e uma altura. Então isso traz um ponto chave! O que eu quero dizer com isso? x localização, localização y? Para alguns de vocês que podem ser a coisa mais óbvia especialmente se você fez coisas com computação gráfica antes, mas para alguns de vocês pode ser bem novo. Então, o que eu gostaria de fazer muito brevemente, é dar uma olhada em um contexto diferente. Esse tipo de assunto de aula de geometria do ensino médio. Então este é um gráfico, de um plano cartesiano, nomeado por René Descartes, o matemático. Isso é conhecido como o eixo x, isto é o que é conhecido como o eixo y. E se eu tenho um ponto aqui Eu poderia descrever esse ponto em termos de um x e um y. Qual é o ponto x e y? Bem, eu posso te dizer que o centro aqui é o ponto 0,0. Isso nos dá uma pista! O eixo x se move dessa maneira positivamente e desta forma negativamente. Então, 1, 2, 3 ... então o x-location deste ponto aqui é o número 3. E agora podemos dizer: 1, 2, 3, 4 ... y move-se para cima positivamente a localização y desse ponto é 4. então esse ponto tem um valor x de 3, um valor y de 4. Agora vamos pegar essa tela novamente. Esta é a nossa tela em que vamos desenhar, Esta tela .. Como este mapa para esta tela? Bem, a coisa é computação gráfica não funciona dessa maneira. Existe uma ideia semelhante, há um eixo x e um eixo y, mas 0,0 - pelo menos pelo que estamos fazendo agora, isso vai mudar depois - não está no centro! O canto superior esquerdo da nossa janela gráfica, nossa tela, é definido como 0,0 ... e x se move positivamente nessa direção, y move-se positivamente nessa direção. Então este é o eixo x e este é o eixo y. Agora, a outra coisa que é tipo de chave aqui é Eu uso esses números pequenos, zoom, meio contando, isso é meio que não relevante para as coisas de programação criativa que eu vou te mostrar nesta tela aqui. Porque tipicamente falando eu vou dizer: abre uma tela com largura de 640 e talvez uma altura de 360. Então vamos abrir uma janela grande com muitos pixels, milhões de pixels! Nós poderíamos apenas imaginar aqui por agora, mas se eu dissesse: Ah, um valor x de 100 onde estão as 100? Eu não sei ... talvez aqui em algum lugar Talvez eu diga um y-location de 200, é como aqui em algum lugar. Se eu disser largura de 75 e uma altura de 150, Eu acabo vendo um retângulo assim. Mas não desenhado em escala ... Então a razão pela qual estou fazendo isso em um totalmente confuso 'eu estou começando tudo errado 'tipo de caminho, é que eu acho é uma boa maneira de descobrir isso apenas através de tentativa e erro. a chave é a sintaxe, Eu preciso saber: qual é o nome da minha função? Qual é o comando que estou emitindo? Retângulo, rect (), Quais são os argumentos esperados? Uma localização x, uma localização y uma largura e uma altura. Formule a sintaxe, e pegue na janela! Agora olhe para isto, vamos realmente apenas faça isso acontecer ... Então eu vou dizer: minha tela é 640 por 360, você pode ver que eu especifiquei lá o tamanho da tela, e agora o retângulo é ... Eu disse algo como 100, 200 e depois 75, 150 ... Então você pode ver agora eu introduzi aqueles como os argumentos, rect, 100, 200, 75, 150 Então agora, momento da verdade, vamos apertar esse botão aqui, este botão, a propósito, este botão verde aqui isso é o que é conhecido como o botão "play" é uma coisa absurda ter um botão de play, como se estivéssemos jogando nosso código realmente o que estamos fazendo é executando um aplicativo, estamos executando o software que escrevemos aqui, esta parte excepcional de software que faz uma tela e desenha um retângulo mas é bom ter esse modelo de pensamento de como um media player. Então a próxima coisa que vou fazer é que vou pressionar este botão e nós vamos ver ... aqui vamos nós. Então você pode ver agora que isso é o que a tela realmente parece. Tem 640 pixels de largura tem 360 pixels de altura e o retângulo é em 100 no eixo x, e 200 pixels para baixo, 75 para o lado e 150 para baixo. Então você pode ver como isso funciona. Você pode ver aqui que eu, isso era meio que incorreto, minha estimativa, mas aqui agora eu posso dizer: ah, isso não é realmente o que eu queria. Eu não queria o retângulo para ir tão longe para baixo então eu vou mudar isso 150 a 125, e vamos parar, e depois reproduzi-lo novamente e você pode ver, aí está! Há o meu retângulo em um local diferente. Então isso é realmente meio que para esta primeira etapa! Mas tem mais algumas partes aqui ... Uma é, existem mais formas na vida do que um retângulo! Alguns que você pode olhar só agora, se você está começando a aprender, são: 'elipse' (uma maneira de desenhar um círculo, mas você pode também desenhe isto ou isto), você pode olhar para 'line', você pode olhar para 'arco' (isso é meio complicado), ah, isso é muito bom você pode olhar para 'ponto'. Há um monte deles, e todos eles esperam algum quantidade de argumentos, e você pode adivinhar bem, um retângulo precisava de um x, y, e uma largura e uma altura, talvez uma elipse também precise x, y, e uma largura e uma altura? E para desenhar uma linha, bem, o que uma linha poderia significar? ok, bem, uma linha é uma coisa ... uma linha, um monte de pixels que conectam dois pontos. Como eu poderia dizer: desenhar uma linha? Oh, e se eu der o x, y de um ponto e o x, y de outro ponto? Isso lhe diria como desenhar uma linha. Então você pode adivinhar tudo isso mas o ponto de fazer isso não é adivinhar ou memorizar existe uma referência que irá listar você, o que é tudo as possíveis funções e Quais são os argumentos que eles esperam? Então, se eu vir aqui, a coisa que eu gostaria de mostrar a você é que eu vou agora para o site p5.js e isso é gentil de onde você deveria começar, olhe para aquela linda animação você deve começar olhando, bem, tem muitos lugares você poderia começar, você pode precisar baixar o editor, que eu acho que mostrei no video anterior ... talvez eu não tenha mostrado ... Existem alguns tutoriais aqui, há mais em "Aprender" e "Iniciar" mas o que eu quero ver agora é 'Referência'. Então vou clicar em 'Reference' e ... Eu gostaria de olhar é ... 'forma'! Então eu acho que esse é um bom lugar para você começar. Se você está procurando uma tarefa ou um exercício para fazer no final deste vídeo: olhe todas essas funções, arco, elipse, linha, ponto, quad, recto, triângulo e isso é de fato o que eu amo sobre o trabalho em Javascript vamos olhar para a função de linha você pode ver aqui: olha, é isso, este é um exemplo de como você desenha uma linha, mas eu posso apenas brincar com isso aqui mesmo ... e veja isso muda isso? Então você pode ver aqui, mas é isso que é importante, isso é o que importa para você: esta é a sintaxe: 'line' espera 4 argumentos, você pode chamá-los de parâmetros, x1, y1, x2, y2. Isso está conectando, uma linha é conectando 2 pontos. Os parâmetros estão aqui aqui eles estão definidos. Então é isso que você tem que fazer: você vê o básico, eu posso abrir um projeto no editor, Eu posso digitar o código lá, Eu sei que preciso saber sobre sintaxe, agora eu tenho uma noção do sistema de coordenadas, mas você precisa se acostumar com todos essas formas diferentes. Quais são as formas que você pode desenhar? E como você faz isso? Então, o que eu diria, sozinho, Eu posso passar por tudo isso mas eu acho que é muito mais útil para fazer isso sozinho, para testar tudo isso, brincando com eles mesmo apenas no próprio site p5.js. Há uma última parte, antes de terminar este vídeo, que eu quero falar, e precisamos voltar Eu meio que apenas encarei isso coisa de 'createCanvas' e eu também não mencionei o que é essa função setup () e esta função desenhar ()? Então, esses vão se tornar muito mais claro nos tempos futuros, no próximo, num futuro vídeo vamos passar muito tempo vendo setup () e draw (), mas o negócio é Eu disse que as funções são absolutamente fundamental para a maneira que o Javascript funciona! Tudo se resume a uma função. E as primeiras funções que você vai aprender a escrever ... ... se parece com isso. Então seu código tem que estar em algum lugar. Tem que estar em última instância, há mais para isso do que isso, agora vamos pensar nesta declaração: 'o seu código tem que estar dentro de uma função! Neste momento existem apenas 2 lugares, 2 funções para colocar seu código ... existe a função setup () e a função draw (). A função setup (), que você diz: função de configuração/início() e nós vamos chegar ao que esses parênteses são, as chaves definem O começo e o fim dessa função. A função setup () é aquela que executa algo logo quando os programas começam! Como: 'createCanvas (__)' Para configurar sua tela, para configurar seu esboço p5, você precisa criar uma tela na função setup (). Então você quer desenhar coisas para essa tela. Onde você faz todo o seu material de desenho? Dentro desta função de desenho! Então tem mais, nós vamos precisar fazer as coisas animarem-se, vamos precisar fazer algo quando alguém clica no mouse e como lidamos com diferentes eventos, e como o programa flui ao longo do tempo. Eu vou cada vez mais me aprofundar nos em um vídeo futuro. E podemos olhar para cá e ver: aí está! setup () tem um createCanvas () e draw () tem rect (). Tente fazer um design de algo interessante para você e espero que este vídeo tenha sido algo útil. Ok, vou parar agora!.
Artigo 191 do cc pena de morte em outros paises Jaraguá do Sul cursos da uece. Rio Verde amamentacao artigos Plano de negócios, geraldo luis sai da rede record Paráfrases, artigo 306 do cpc Proposta de Tese, abstrato agindo Trabalho de pesquisa. Temas de artigos sobre direitos humanos resultado do enem 2020 por estado artigo 191 do cc São Paulo cromatografia em camada delgada extratos vegetais. Chocolandia santo andre cursos Paráfrases Belo Horizonte musica gospel dia das maes infantil, art 513 cpc apelacao.
Espírito Santo:
Faith Goldman, Delaware: Pratt Institute, Clinton Hill, Brooklyn. Catalão: Corning Community College; 2008.
Erin Morales, Putnam. Birigui: Sisters of Mercy; 2013.
Jenna Edwards, E 64th Street zip 10065. Vitória: SUNY Farmingdale; 2016.