Professional Documents
Culture Documents
m GitHub Issues Wiki FAQ Twitter Facebook Este tutorial para Processamento verso 2 +. Se voc encontrar quaisquer erros ou tiver algum comentrio, por favor, avise-nos . Voc pode fazer o download dos arquivos deste tutorial .
Anatomia de um Programa
Muitos dos tutoriais para concentrado de processamento em que a linguagem pode fazer (alterar cores, desenhar formas, criar matrizes de objetos) e chamadas de funo que vai deixar voc realizar essas tarefas. Estas so coisas que voc precisa saber para escrever um programa em processamento. H um pedao do quebra-cabea que estes tutoriais no abordam: como voc analisar um problema e dividi-la em etapas que o computador pode fazer? Neste tutorial, vou mostrar-lhe o que se passou pela minha cabea que eu assumi a tarefa de escrever funes para desenhar polgonos regulares e figuras em forma de estrela no processamento. Esta uma boa escolha, porque a tarefa no muito grande para obter a sua mente em volta, mas no um problema completamente trivial, tampouco. Lembre-se que o que voc est vendo aqui o meu processo de pensamento particular e estilo de programao. Existem muitas abordagens e estilos diferentes. Como voc continuar a programao, voc vai encontrar o seu prprio. Voc tambm pode ver chiqueiro programao de outras pessoas (embora no o seu processo de pensamento!), Olhando para o cdigo fonte para os programas em openProcessing.org .
Eu s precisava ter uma idia de que a tarefa era, e um diagrama desenhado mo fez o trabalho. Eu no preciso gerar o diagrama em um programa de desenho. Programao Dica: Quando voc faz o seu planejamento, faa-o longe do computador. Se voc est sentado em frente ao computador, a tela ir sussurrar: "Olhe para mim! Olhe para mim! "Eo teclado ir sussurrar" Tipo de alguma coisa! Digite alguma coisa! "V para a sua mesa de cozinha em seu lugar.
Ento, se voc tem uma linha de comprimento r a partir de (0,0) em um ngulo theta (), quais so as suas coordenadas em termos de x e y ? Se voc sabe um pouco de trigonometria, a resposta que o ponto final da linha a ( r cos , r sin ). Se voc no sabe trigonometria, d uma olhada neste tutorial (uma introduo geral e muito leve para trigonometria), este tutorial (orientado para Processing), e este exemplo a partir do captulo 13 de Processamento de aprendizagem . No diagrama a seguir, os ngulos so desenhados no sentido horrio, que como eles so medidos em Processamento.
Meu prximo pensamento foi que seria bom ser capaz de especificar a largura e altura para o polgono, assim como voc faz com uma e l i p s e( )ou r e t n g u l o( ). Eu j sabia que a frmula seria, mas eu queria fazer um desenho para verific-la. Como um experimento preliminar, eu tentei desenhar um pentgono em um quadrado usando um transferidor e rgua, e acabou com o desenho terrvel esquerda. Como que os lados no eram iguais comprimento? Eu percebi que eu estava tentando fazer o desenho encaixar meus preconceitos, ao invs de fazer um desenho preciso e ver onde isso me levou. O desenho direita foi feito com muito mais cuidado. Depois de pensar um pouco, percebi que o Pentgono no caberia a praa exatamente, porque os ngulos no so mltiplos de 90 graus. O polgono regular se encaixa em um crculo , e no em uma praa!
Bem, isso era um beco sem sada. Esse tipo de coisa acontece na programao o tempo todo, ento eu no gastar muito tempo se preocupando com isso. Era hora de uma outra abordagem. Desde que eu no tinha uma maneira precisa de elipses de desenho, eu tinha que pensar sobre o problema de maneira diferente. Presumo que voc tem um crculo desenhado em uma folha quadrada de borracha, e voc estic-la de modo que duas vezes maior, mas a mesma altura. A posio vertical dos pontos do crculo no muda, mas as posies horizontais so agora duas vezes mais longe do centro, como eles costumavam ser. A mesma idia se aplica se voc esticar a folha na vertical. As seguintes figuras bruto parecia ter isso, ento era hora de reescrever o p o l g o n o( )funo.
v o i ds e t u p( ) { t a m a n h o( 3 0 0 ,3 0 0 ) ; d of u n d o( 2 5 5 ) ; a l i s a r( ) ; n o F i l l( ) ; p o l g o n o( 3 ,5 0 ,7 5 ,1 0 0 ,1 0 0 , P I/2 , 0 )//9 0g r a u s p o l g o n o( 4 ,1 7 0 ,7 5 ,5 0 ,1 2 5 , p i/4 , 0 )//4 5g r a u s f i l l( 2 5 5 ,2 0 4 ,2 5 5 ) ; a c i d e n t ev a s c u l a rc e r e b r a l( 1 2 8 ,0 ,1 2 8 ) ; p o l g o n o( 5 ,5 0 ,2 0 0 ,7 5 ,5 0 , P I/2 , 0 )//9 0g r a u s n o F i l l( ) ; a c i d e n t ev a s c u l a rc e r e b r a l( 0 ) ; p o l g o n o( 6 ,1 7 0 ,2 0 0 ,5 0 ,1 0 0 ,0 ) ; a c i d e n t ev a s c u l a rc e r e b r a l( 1 2 8 ) ; //D e s e n h ae n c e r r a me l i p s e st e rc e r t e z ad eq u ef e zoc e r t o e l i p s e( 5 0 ,7 5 ,1 0 0 ,1 0 0 ) ; e l i p s e( 1 7 0 ,7 5 ,5 0 ,1 2 5 ) ; e l i p s e( 5 0 ,2 0 0 ,7 5 ,5 0 ) ; e l i p s e( 1 7 0 ,2 0 0 ,5 0 ,1 0 0 ) ; } v a z i op o l g o n o( i n tn ,f l o a tc x ,f l o a tc y ,f l o a tw ,f l o a th ,s t a r t A n g l ef l o a t ) { f l u t u a r n g u l o=T W O _ P I/n ; /*O" r a i o "h o r i z o n t a lm e t a d ed al a r g u r a ;
/*O" r a i o "h o r i z o n t a lm e t a d ed al a r g u r a ; o" r a i o "v e r t i c a lu m am e t a d ed aa l t u r a*/ w=w/2 , 0 ; h=h/2 , 0 ; b e g i n S h a p e( ) ; f o r( i n ti=0 ;i< n ,i++ ) { v r t i c e( c x+w*c o s( s t a r t A n g l e+ n g u l o*i ) , c y+h*s i n( s t a r t A n g l e+ n g u l o*i ) ) ; } e n d S h a p e( C L O S E ) ; }
Uma vez que tudo estava em radianos, agora descrito ngulos em termos de P Ie T W O _ P I(2), pois 2 radianos igual a 360 . Para alm do cdigo de c o n f i g u r a o( )para testar as novas funcionalidades, chamei elipses com o mesmo centro, largura e altura dos polgonos para certificar-se de que os vrtices esto dentro da rea adequada.
Muitos parmetros
Eu j tinha uma funo muito mais flexvel para desenhar polgonos, mas veio custa de mais parmetros. Seria bom para ser capaz de desenhar o caso comum (igual largura e altura, comear ngulo de zero) sem ter que especificar todos os parmetros. A soluo sobrecarregar a funo. No processamento, voc pode ter duas funes com o mesmo nome, contanto que eles tm diferentes nmeros de parmetros e / ou tipos de parmetros. Um exemplo disto o de Processamento de a c i d e n t ev a s c u l a rc e r e b r a l( )funo, que est sobrecarregado de modo que voc pode cham-lo com um nmero de tons de cinza, trs nmeros de cor, ou quatro nmeros de cor com opacidade. Processamento olha para o nmero de argumentos que voc fornecer e descobre qual a verso do a c i d e n t ev a s c u l a rc e r e b r a l( )para ligar. Este o cdigo para adicionar aos do exemplo anterior. Quando voc d p o l g o n o( )apenas quatro nmeros, ele ir chamar a seguinte funo, que chama a verso "grande" da funo com largura e altura igual a duas vezes o raio desejado, e um ngulo de incio de zero.
v a z i op o l g o n o( i n tn ,f l o a tc x ,f l o a tc y ,f l o a tr ) { p o l g o n o( n ,c x ,c y ,r*2 . 0 ,r*2 . 0 ,0 . 0 ) ; }
Computao Segura
O que acontece se algum tentar desenhar um polgono com dois lados, um lado, ou pior, 0 lados? Os dois primeiros vo gerar uma linha e um ponto, mas o terceiro vai causar uma diviso por zero erro ao tentar descobrir o ngulo. E o que aconteceria com os nmeros negativos? Desde os polgonos com menos de trs lados no fazem muito sentido, eu envolvi o corpo do p o l g o n o( )funo dentro de uma s ecomunicado. Agora, quando algum especifica dois ou menos os lados, a funo s no vai tirar nada.
v a z i op o l g o n o( i n tn ,f l o a tc x ,f l o a tc y ,f l o a tw ,f l o a th ,s t a r t A n g l ef l o a t ) { i f( n >2 ) { f l u t u a r n g u l o=T W O _ P I/n ; . . b e g i n S h a p e( ) . . e n d S h a p e( C L O S E ) ; } }
Desenho Estrelas
Agora que eu estava satisfeito com o p o l g o n o( )funo, que era hora de seguir em frente para estrelas de desenho. De alguma brincar com um esboo bruto, achei que seria possvel desenhar uma estrela por descobrir onde todas as diagonais de um polgono cruzam.
Eu vi dois problemas aqui. Primeiro, encontrar o ponto de interseco de duas linhas um monte de clculo. No particularmente difcil clculo, mas muito disso, e fica complicado quando voc tem linhas verticais. Em segundo lugar, eu no poderia ter uma forma de seta de quatro lados ou trs lados; no havia diagonais suficientes. Ento, eu tive outra idia. Eu no posso te dizer que a idia veio ou como cheguei a ele, ele s me bateu. Essa uma parte do processo que eu no acho que pode ser ensinado. Aqui era a idia: E se voc tivesse um polgono cortado da massa de biscoito e voc meio que empurrou os lados para fazer uma forma de estrela? Esse um mtodo que funciona para quadrados e tringulos.
Quando voc empurrar os lados, voc empurr-los em no ponto central para que voc obtenha um cookie simtrica agradvel. A partir da, no foi um grande salto para descobrir: "o que se eu tivesse um raio mais curto no meio de cada fatia do polgono?"
Este cdigo seria bastante fcil de escrever. Eu precisaria de um parmetro extra: a proporo do raio pequeno para o grande raio. No cdigo a seguir, um c a s odeclarao controla se deseja usar o curto raio ou o raio longo. Eu tambm coloquei em uma verso sobrecarregada que desenha uma estrela com a mesma largura e altura e um ngulo inicial de zero. Para o teste, eu fiz o curto raio de metade do raio longo.
v o i ds e t u p( ) { t a m a n h o( 3 0 0 ,3 0 0 ) ; d of u n d o( 2 5 5 ) ; a l i s a r( ) ; n o F i l l( ) ; e s t r e l a s( 3 ,6 0 ,7 5 ,1 0 0 ,1 0 0 , P I/2 , 0 ,0 , 5 0 )//9 0g r a u s e s t r e l a s( 4 ,1 7 0 ,7 5 ,2 5 ,0 , 5 0 )//u s a rac h a m a d as i m p l e s f i l l( 2 5 5 ,2 0 4 ,2 5 5 ) ; a c i d e n t ev a s c u l a rc e r e b r a l( 1 2 8 ,0 ,1 2 8 ) ; e s t r e l a( 5 ,6 0 ,2 0 0 ,7 5 ,5 0 , P I/2 , 0 ,0 , 5 0 )//9 0g r a u s n o F i l l( ) ; a c i d e n t ev a s c u l a rc e r e b r a l( 0 ) ; e s t r e l a( 6 ,1 7 0 ,2 0 0 ,5 0 ,1 0 0 ,0 ,0 , 5 0 ) ; a c i d e n t ev a s c u l a rc e r e b r a l( 1 2 8 ) ; //D e s e n h ae n c e r r a me l i p s e st e rc e r t e z ad eq u ef e zoc e r t o
//D e s e n h ae n c e r r a me l i p s e st e rc e r t e z ad eq u ef e zoc e r t o e l i p s e( 6 0 ,7 5 ,1 0 0 ,1 0 0 ) ; e l i p s e( 1 7 0 ,7 5 ,5 0 ,5 0 ) ; e l i p s e( 6 0 ,2 0 0 ,7 5 ,5 0 ) ; e l i p s e( 1 7 0 ,2 0 0 ,5 0 ,1 0 0 ) ; } v a z i oe s t r e l a( i n tn ,f l o a tc x ,f l o a tc y ,f l o a tr ,p r o p o r of l o a t ) { e s t r e l a( n ,c x ,c y ,2 . 0*r*r2 . 0 ,0 . 0 ,p r o p o r o ) ; } v a z i oe s t r e l a( i n tn ,f l o a tc x ,f l o a tc y ,f l o a tw ,f l o a th , s t a r t A n g l ef l o a t ,p r o p o r of l o a t ) { i f( n >2 ) { f l u t u a r n g u l o=T W O _ P I/( 2*n )//d u a sv e z e sc o m om u i t o sl a d o s f l u t u a rd w//c h a m a ral a r g u r a f l u t u a rd h//d r a wa l t u r a w=w/2 , 0 ; h=h/2 , 0 ; b e g i n S h a p e( ) ; f o r( i n ti=0 ;i< 2*n ,i++ ) { d w=w ; D H=H ; i f( i %2= =1 )//p a r ao sv r t i c e s m p a r e s ,u s ec u r t or a i o { d w=w*p r o p o r o ; d h=h*p r o p o r o ; } v r t i c e( c x+d w*c o s( s t a r t A n g l e+ n g u l o*i ) , c y+d h*s i n( s t a r t A n g l e+ n g u l o*i ) ) ; } e n d S h a p e( C L O S E ) ; } }
Enquanto se perguntando por que isso aconteceu, eu me lembrei que o co-seno do ngulo entre as linhas, 60 ( / 3) sai a 0.5, e eu suspeito fortemente que isso tinha algo a ver com isso. Para testar a hiptese de o meu, troquei o quadrado para usar uma proporo de co-seno de 45 ( / 4), o pentgono de cosseno de 36 ( / 5), e o co-seno do hexgono para 30 ( / 6) . Com certeza, todos saram sem push-in. Ento, se voc est desenhando uma estrela com n lados e voc definir a proporo para o curto raio de longo raio para a cos ( / n ), voc recebe uma estrela no-star! Eu ainda no consigo escrever uma prova matemtica de que, mas um resultado interessante. Eu no considero que a viagem ao lado de escrever o programa de teste para ser desperdiado tempo, eu aprendi algo novo e pouco interessante, e pode vir a ser til no futuro. Programao Desafio: O que acontece se voc definir a proporo de algo maior do que a relao "nostar"? Experimente e descubra. claro que o caminho para obter uma estrela de trs lados definir a proporo de uma quantidade inferior a 0,5, o que fiz no cdigo a seguir a instalao, com resultados muito melhores. Eu tambm mudei as propores para as outras estrelas s para ver o que seria semelhante.
v o i ds e t u p( ) { t a m a n h o( 3 0 0 ,3 0 0 ) ; d of u n d o( 2 5 5 ) ; a l i s a r( ) ;
Usando as funes
Finalmente, a fim de usar as funes em outra coisa que no um teste, eu decidi escrever um programa que iria gerar aleatoriamente polgonos e estrelas. A janela de 300 por 300, e as estrelas ou polgonos ter um raio de 24 pontos, ento eu tenho seis linhas e cinco colunas (o ponto extra para o espaamento). Lembra que eu disse que conhecer as propores que criariam uma estrela "pode vir a ser til no futuro"? Bem, eles no so apenas teis para este programa-eles vital. Quando eu gerar uma estrela, eu preciso ter certeza de que realmente tem uma forma de estrela, ento eu tenho que manter a proporo de curto e longo raio menor que o cosseno de , dividido pelo nmero de lados. Aqui est o cdigo para o s e t u p( )e d r a w( ), eu no estou incluindo o cdigo do p o l g o n o( )e e s t r e l a( ) funes aqui, o mesmo que nos exemplos.
v o i ds e t u p( ) { t a m a n h o( 3 0 0 ,3 0 0 ) ; d of u n d o( 2 5 5 ) ; f r a m e R a t e( 6 ) ; a l i s a r( ) ; r e c t M o d e( C E N T E R ) ; } a n u l a rad r a w( ) { //E s c o l h eu m ac o rd et r a oa l e a t r i o i n tr=i n t( r a n d o m( 0 ,2 5 5 ) ) ; i n tg=i n t( r a n d o m( 0 ,2 5 5 ) ) ; i n tb=i n t( r a n d o m( 0 ,2 5 5 ) ) ; //Ep r e e n c h e ro p a c i d a d e i n to p a c i d a d e=i n t( r a n d o m( 1 0 0 ,2 5 5 ) ) ; i n tn S i d e s=i n t( r a n d o m( 3 ,9 ) ) ; //D e t e r m i n aoc e n t r od ec o o r d e n a d a sxey i n tc x=2 5+5 0*( i n ta l e a t r i o( 0 ,6 ) ) ; i n tc y=2 5+5 0*i n t( r a n d o m( 0 ,6 ) ) ; //S eu mn m e r oa l e a t r i o( 0o u1 )0 ,d e s e n h a ru mp o l g o n o ; //C a s oc o n t r r i o ,d e s e n h a ru m ae s t r e l a i s P o l y g o nb o o l e a n=i n t( r a n d o m( 2 ) )= =0 ; //P a r aa se s t r e l a s ,v o c p r e c i s ad ap r o p o r od ec u r t oel o n g or a i o f l u t u a rp r o p o r o ; a c i d e n t ev a s c u l a rc e r e b r a l( 2 5 5 )//a p a g aq u a l q u e rd e s e n h oa n t e r i o rn e s t a r e a f i l l( 2 5 5 ) ; r e c t( c x ,c y ,5 0 ,5 0 ) ; a c i d e n t ev a s c u l a rc e r e b r a l( r ,g ,b ) ; f i l l( r ,g ,b ,o p a c i d a d e ) ; i f( i s P o l y g o n ) { p o l g o n o( n S i d e s ,c x ,c y ,2 4 ) ; } o u t r o { p r o p o r o=a l e a t r i o( 0 . 2 ,0 . 8 )*c o s( P I/n S i d e s ) ; e s t r e l a( n S i d e s ,c x ,c y ,2 4 ,p r o p o r o ) ; } }
Agora que eu tenho funes trabalhando para polgonos e estrelas, pode ser til fazer um p o l g o n oe e s t r e l ade classe para que eu possa trat-las como objetos. O mtodo que eu usaria a mesma coisa, gostaria de comear com casos de teste simples, construir o passo a passo aulas e, finalmente, us-los em um programa full-blown. Aqui est um tutorial sobre objetos em processamento.
Resumindo
Este tutorial mostra a voc as coisas que voc nunca v nos livros. Em um livro, todos os diagramas so a imagem perfeita. Voc v um programa de exemplo, e ele s funciona, e produz resultados deslumbrantes. Para ser justo, os autores no podem mostrar-lhe seu processo de pensamento, caso contrrio, seus livros seria dez vezes maior. Na verdade, eu no inclui todas as verses, onde um parntese extraviado ou uma chamada esquecido de r a d i a n o s( ) fez o meu esboo explodir em uma massa de linhas incompreensveis. Mas todos ns, os grandes autores conhecidos, as pessoas que escrevem estes tutoriais, e os programadores iniciantes, passar por esse mesmo processo de mau gosto de design, tentativa e erro, e desenvolvimento. Eu queria que voc visse esse processo pelo menos uma vez, porque estamos todos juntos nessa. Voc pode fazer o download dos arquivos deste tutorial .
Este tutorial para Processamento verso 2 +. Se voc encontrar quaisquer erros ou tiver algum comentrio, por favor, avise-nos .
O processamento foi iniciado por Ben Fry e Casey Reas . Ele desenvolvido por uma pequena equipe de voluntrios . Informaes \ Linux Web hosting por (mt) Media Temple .