-
-
Notifications
You must be signed in to change notification settings - Fork 70
Expand file tree
/
Copy pathindex.html
More file actions
227 lines (195 loc) · 27.7 KB
/
index.html
File metadata and controls
227 lines (195 loc) · 27.7 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Introdução à programação com Python em um contexto visual</title>
<link rel="stylesheet" href="https://abav.lugaralgum.com/assets/css/style.css">
<link rel="stylesheet" href="https://abav.lugaralgum.com/assets/css/syntax.css">
<link rel="stylesheet" href="//fonts.bunny.net/css?family=Inconsolata" media="all">
<style>
* {
box-sizing: border-box;
}
/* Create columns that float next to each other */
.column {
float: left;
width: 33%;
padding: 20px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 1040px) {
.column {
width: 95%;
}
}
ul {
padding-left: 0;
margin-left: 0;
list-style-type: none; /* Remove default list styling */
}
li.thumbnail {
display: flex;
align-items: start;
height: auto;
padding: 0px 0;
margin-bottom: -10px;
}
img.thumbnail {
width: 75px;
height: 75px;
margin-right: 10px;
margin-top: 25px; /* Push image down */
}
</style>
</head>
<body>
<h1><a href="https://abav.lugaralgum.com/material-aulas/" style="font-family: inconsolata, monospace">Introdução à programação<br />
com Python em um contexto visual</a></h1>
<hr>
<div class="row">
<!-- primeira coluna -->
<div class="column"><div class="container">
<h1>Material didático para usar com Thonny IDE e py5</h1>
<h2>Elementos fundamentais</h2>
<li class="thumbnail"><img alt="0.0.0" class="thumbnail" src="https://raw.githubusercontent.com/villares/villares.github.io/main/como-instalar-py5/thonny-logo.png"/><p>0.0.0 <a href="https://abav.lugaralgum.com/como-instalar-py5/">O que é e como instalar o py5 e o Thonny IDE</a></p></li>
<li class="thumbnail"><img alt="0.0.1" class="thumbnail" src="/material-aulas/Processing-Python-py5/assets/thumb-referencia.png"/><p>0.0.1 <a href="Processing-Python-py5/sumario-referencia-py5.html">Sumário traduzido da referência do py5</a></p></li>
<h3>Primeiros passos</h3>
<li class="thumbnail"><img alt="1.0.0" class="thumbnail" src="/material-aulas/Processing-Python-py5/assets/01-IDE.png"/><p>1.0.0 <a href="Processing-Python-py5/desenho-basico_py.html">Primeiros passos e desenho básico</a></p></li>
<li class="thumbnail"><img alt="1.0.1" class="thumbnail" src="/material-aulas/Processing-Python-py5/assets/variaveis_Guido.png"/><p>1.0.1 <a href="Processing-Python-py5/variaveis.html">Variáveis</a></p></li>
<li class="thumbnail"><img alt="1.0.2" class="thumbnail" src="/material-aulas/Processing-Python-py5/assets/estrela_4_pontas.png"/><p>1.0.2 <a href="Processing-Python-py5/poligonos_1.html">Desenhando polígonos</a></p></li>
<li class="thumbnail"><img alt="1.0.3" class="thumbnail" src="/material-aulas/Processing-Python-py5/assets/compras.png"/><p>1.0.3 <a href="Processing-Python-py5/indentacao.html">O que é indentação?</a> - primeiro contato com <code>setup()</code> e <code>draw()</code></p></li>
<li class="thumbnail"><img alt="1.0.4" class="thumbnail" src="/material-aulas/Processing-Python-py5/assets/RGB.png"/><p>1.0.4 <a href="Processing-Python-py5/mais_sobre_cores.html">Mais sobre cores(RGB e HSB)</a></p></li>
<h3>Execução condicional, aleatoriedade e movimento</h3>
<li class="thumbnail"><img alt="1.1.0" class="thumbnail" src="/material-aulas/Processing-Python-py5/assets/condicional-sem-else.jpg"/><p>1.1.0 <a href="Processing-Python-py5/condicionais_py.html">Execução condicional (<code>if</code>/<code>else</code>)</a>, operadores relacionais e operadores lógicos</p></li>
<li class="thumbnail"><img alt="1.1.1" class="thumbnail" src="/material-aulas/Processing-Python-py5/assets/setup_draw1.gif"/><p>1.1.1 <a href="Processing-Python-py5/setup_draw.html">Mais movimento e interatividade com <code>setup()</code> e <code>draw()</code></a></p></li>
<li class="thumbnail"><img alt="1.1.2" class="thumbnail" src="/material-aulas/Processing-Python-py5/assets/thumb-=.png"/><p>1.1.2 <a href="Processing-Python-py5/atribuicao-e-comparacao.html">Qual a diferença entre <code>=</code> (atribuição) e <code>==</code> (comparação)?</a></p></li>
<li class="thumbnail"><img alt="1.1.3" class="thumbnail" src="/material-aulas/Processing-Python-py5/assets/bola_rebate.gif"/><p>1.1.3 <a href="Processing-Python-py5/movimento_py.html">Criando uma animação</a></p></li>
<li class="thumbnail"><img alt="1.1.4" class="thumbnail" src="/material-aulas/Processing-Python-py5/assets/escopo_olho.png"/><p>1.1.4 <a href="Processing-Python-py5/escopo_py.html">Escopo de variáveis(local e global)</a></p></li>
<li class="thumbnail"><img alt="1.1.5" class="thumbnail" src="/material-aulas/Processing-Python-py5/assets/pincel_aleatorio.gif"/><p>1.1.5 <a href="Processing-Python-py5/aleatoriedade_1.html">Aleatoriedade: <code>random</code> e números "sorteados"</a></p></li>
<li class="thumbnail"><img alt="1.1.6" class="thumbnail" src="/material-aulas/Processing-Python-py5/assets/resto_da_divisao.png"/><p>1.1.6 <a href="Processing-Python-py5/divisao.html">Divisão por zero e o resto da divisão</a></p></li>
<h3>Definindo novas funções</h3>
<li class="thumbnail"><img alt="1.2.0" class="thumbnail" src="/material-aulas/Processing-Python-py5/assets/funcao_olho.png"/><p>1.2.0 <a href="Processing-Python-py5/funcoes_py.html">Definindo novas funções</a></p></li>
<li class="thumbnail"><img alt="1.2.1" class="thumbnail" src="/material-aulas/Processing-Python-py5/assets/thumb-argumentos-default.png"/><p>1.2.1 <a href="Processing-Python-py5/funcoes_2.html">Funções com argumentos padrão(ou opcionais)</a></p></li>
<li class="thumbnail"><img alt="1.2.2" class="thumbnail" src="/material-aulas/Processing-Python-py5/assets/thumb-if-elif-else.png"/><p>1.2.2 <a href="Processing-Python-py5/condicionais_2.html">Condições aninhadas e outras estruturas condicionais</a></p></li>
<li class="thumbnail"><img alt="1.2.3" class="thumbnail" src="/material-aulas/Processing-Python-py5/assets/2d_transformations_0.png"/><p>1.2.3 <a href="Processing-Python-py5/transformacoes_coordenadas.html">Modificando o sistema de coordenadas</a> com <code>translate()</code>, <code>rotate()</code>, <code>scale()</code> e mais!</p></li>
<li class="thumbnail"><img alt="1.2.4" class="thumbnail" src="/material-aulas/Processing-Python-py5/assets/recursividade-1.png"/><p>1.2.4 <a href="Processing-Python-py5/recursao_py.html">Funções recursivas</a> e a recursividade no seu desenho</p></li>
<li class="thumbnail"><img alt="1.2.5" class="thumbnail" src="/material-aulas/Processing-Python-py5/assets/passos3D.gif"/><p>1.2.5 <a href="Processing-Python-py5/desenho-3D.html">Primeiros passos de desenho em 3D</a> - <code>size(…, …, P3D)</code></p></li>
<h3>Laços de repetição</h3>
<li class="thumbnail"><img alt="1.3.0" class="thumbnail" src="/material-aulas/Processing-Python-py5/assets/for_circulos.png"/><p>1.3.0 <a href="Processing-Python-py5/lacos_py.html">Repetição com laços <code>for</code></a></p></li>
<li class="thumbnail"><img alt="1.3.1" class="thumbnail" src="/material-aulas/Processing-Python-py5/assets/grade_colorida.png"/><p>1.3.1 <a href="Processing-Python-py5/grades.html">Grades retangulares: filas e colunas de elementos</a></p></li>
<li class="thumbnail"><img alt="1.3.2" class="thumbnail" src="/material-aulas/Processing-Python-py5/assets/slices.png"/><p>1.3.2 <a href="Processing-Python-py5/mais_sequencias.html">Mais sobre sequências de elementos e fatias</a></p></li>
<li class="thumbnail"><img alt="1.3.3" class="thumbnail" src="/material-aulas/Processing-Python-py5/assets/estrelas.png"/><p>1.3.3 <a href="Processing-Python-py5/poligonos_2.html">Mais sobre polígonos</a></p></li>
<li class="thumbnail"><img alt="1.3.4" class="thumbnail" src="/material-aulas/Processing-Python-py5/assets/curves_animate.gif"/><p>1.3.4 <a href="Processing-Python-py5/curvas.html">Desenhando formas curvas</a></p></li>
<li class="thumbnail"><img alt="1.3.5" class="thumbnail" src="/material-aulas/Processing-Python-py5/assets/while_add.png"/><p>1.3.5 <a href="Processing-Python-py5/while.html">Laço de repetição com <code>while</code></a></p></li>
<h3>Tipos de valores</h3>
<li class="thumbnail"><img alt="1.4.0" class="thumbnail" src="/material-aulas/Processing-Python-py5/assets/thumb-tipagem.png"/><p>1.4.0 <a href="Processing-Python-py5/tipagem_py.html">Tipos de valores</a> como texto (<em>strings</em>) e números inteiros (<em>int</em>) ou de ponto flutuante (<em>float</em>)</p></li>
<li class="thumbnail"><img alt="1.4.1" class="thumbnail" src="https://raw.githubusercontent.com/villares/material-aulas/master/Processing-Python-py5/assets/text-na-tela.png"/><p>1.4.1 <a href="Processing-Python-py5/strings_py.html">Textos no programa, no console e na tela: <em>strings</em></a></p></li>
<li class="thumbnail"><img alt="1.4.2" class="thumbnail" src="https://raw.githubusercontent.com/arteprog/programacao-criativa/master/assets/imagens/typogrid.png"/><p>1.4.2 <a href="Processing-Python-py5/tipografia.html">Trabalhando com fontes e outros ajustes do texto</a></p></li>
<li class="thumbnail"><img alt="1.4.3" class="thumbnail" src="/material-aulas/Processing-Python-py5/assets/thumb-metodos-str.png"/><p>1.4.3 <a href="Processing-Python-py5/string_methods.html">Métodos dos objetos <em>string</em> e <em>f-strings</em></a></p></li>
<li class="thumbnail"><img alt="1.4.4" class="thumbnail" src="/material-aulas/Processing-Python-py5/assets/thumb-None.png"/><p>1.4.4 <a href="Processing-Python-py5/None.html">O valor especial <code>None</code></a></p></li>
<li class="thumbnail"><img alt="1.4.5" class="thumbnail" src="/material-aulas/Processing-Python-py5/assets/thumb-int-float.png"/><p>1.4.5 <a href="Processing-Python-py5/numeros.html">Números inteiros (<em>int</em>) e números de ponto flutuante (<em>float</em>)</a></p></li>
<h3>Mais interação com teclado e mouse</h3>
<li class="thumbnail"><img alt="1.5.0" class="thumbnail" src="/material-aulas/Processing-Python-py5/assets/keyPressed_keyCode.gif"/><p>1.5.0 <a href="Processing-Python-py5/input_py.html">Input com teclado e mouse</a></p></li>
<li class="thumbnail"><img alt="1.5.1" class="thumbnail" src="/material-aulas/Processing-Python-py5/assets/teclas_simultaneas_0.gif"/><p>1.5.1 <a href="Processing-Python-py5/teclas_simultaneas.html">Detectando teclas simultâneas</a></p></li>
<li class="thumbnail"><img alt="1.5.2" class="thumbnail" src="/material-aulas/Processing-Python-py5/assets/botao_simples.gif"/><p>1.5.2 <a href="Processing-Python-py5/botao_simples.html">Um botão simples</a></p></li>
<li class="thumbnail"><img alt="1.5.3" class="thumbnail" src="/material-aulas/Processing-Python-py5/assets/arrastar_circulo.gif"/><p>1.5.3 <a href="Processing-Python-py5/arrastando_circulos.html">Arrastando círculos</a></p></li>
<li class="thumbnail"><img alt="1.5.4" class="thumbnail" src="/material-aulas/Processing-Python-py5/assets/rodinha_mouse.gif"/><p>1.5.4 <a href="Processing-Python-py5/rodinha_mouse.html">Usando a rodinha do mouse(<em>mouse wheel</em>)</a></p></li>
<li class="thumbnail"><img alt="1.5.5" class="thumbnail" src="/material-aulas/Processing-Python-py5/assets/no_loop_setup_only.png"/><p>1.5.5 <a href="Processing-Python-py5/no_loop.html">Parando o <code>draw()</code></a></p></li>
<h2>Orientação a objetos</h2>
<li class="thumbnail"><img alt="2.1.1" class="thumbnail" src="/material-aulas/Processing-Python-py5/assets/thumb-slider.png"/><p>2.1.1 <a href="Processing-Python-py5/slider_com_OO.html">Primeiros passos de orientação a objetos: usando a classe Slider</a></p></li>
<li class="thumbnail"><img alt="2.2.1" class="thumbnail" src="/material-aulas/Processing-Python-py5/assets/OO-botao.png"/><p>2.2.1 <a href="Processing-Python-py5/botao_com_OO.html">Um botão com orientação a objetos</a></p></li>
<li class="thumbnail"><img alt="2.3.1" class="thumbnail" src="/material-aulas/Processing-Python-py5/assets/particulas3.gif"/><p>2.3.1 <a href="Processing-Python-py5/particulas.html">Uma classe de partículas simples</a></p></li>
<li class="thumbnail"><img alt="2.3.2" class="thumbnail" src="https://abav.lugaralgum.com/material-aulas/Processing-Python-py5/bandeirinhas/imagens/passo_final.gif"/><p>2.3.2 <a href="https://abav.lugaralgum.com/material-aulas/Processing-Python-py5/bandeirinhas/">Introdução a orientação a objetos com bandeirinhas</a></p></li>
<li class="thumbnail"><img alt="2.4.1" class="thumbnail" src="/material-aulas/Processing-Python-py5/assets/vetores1.gif"/><p>2.4.1 <a href="Processing-Python-py5/vetores.html">Operações com vetores e a classe <code>Py5Vector</code></a></p></li>
<li class="thumbnail"><img alt="2.5.1" class="thumbnail" src="/material-aulas/Processing-Python-py5/assets/trimesh_demo.gif"/><p>2.5.1 <a href="Processing-Python-py5/shapely-e-trimesh.html">Manipulando formas 2D e 3D como<code>shapely</code> e <code>trimesh</code></a></p></li>
</div></div>
<!-- segunda coluna -->
<div class="column"><div class="container">
<h2>Mais sobre estruturas de dados</h2>
<li class="thumbnail"><img alt="3.1.1" class="thumbnail" src="/material-aulas/Processing-Python-py5/assets/thumb-list-methods.png"/><p>3.1.1 <a href="Processing-Python-py5/list_methods.html">Métodos das listas</a></p></li>
<li class="thumbnail"><img alt="3.2.1" class="thumbnail" src="/material-aulas/Processing-Python-py5/assets/tabuleiro.png"/><p>3.2.1 <a href="Processing-Python-py5/dicionarios.html">Mais estruturas de dados: dicionário (<em>dict</em>)</a></p></li>
<li class="thumbnail"><img alt="3.3.1" class="thumbnail" src="/material-aulas/Processing-Python-py5/assets/conjuntos.png"/><p>3.3.1 <a href="Processing-Python-py5/conjuntos.html">Mais estruturas de dados: conjunto (<em>set</em>)</a></p></li>
<li class="thumbnail"><img alt="3.4.1" class="thumbnail" src="/material-aulas/Processing-Python-py5/assets/thumb-list-comp.png"/><p>3.4.1 <a href="Processing-Python-py5/comprehension.html">Compreensão de listas e outras <em>comprehensions</em></a></p></li>
<li class="thumbnail"><img alt="3.5.1" class="thumbnail" src="/material-aulas/Processing-Python-py5/assets/thumb-removendo.png"/><p>3.5.1 <a href="Processing-Python-py5/removendo_itens.html">Removendo itens de coleções</a></p></li>
<h2>Aprofundando ideias anteriores</h2>
<li class="thumbnail"><img alt="4.1.0" class="thumbnail" src="https://user-images.githubusercontent.com/3694604/191615358-6c68e870-ac4f-47b9-b509-026a769c80f4.png"/><p>4.1.0 <a href="Processing-Python-py5/aleatoriedade_2.html">Mais sobre aleatoriedade</a> e as diferenças ente o <code>random</code> do py5 e o do Python</p></li>
<li class="thumbnail"><img alt="4.1.1" class="thumbnail" src="/material-aulas/Processing-Python-py5/assets/perlin1D.gif"/><p>4.1.1 <a href="Processing-Python-py5/noise.html"><em>Perlin Noise</em> (ruído de Perlin)</a> um tipo especial de número pseudoaleatório</p></li>
<li class="thumbnail"><img alt="4.2.1" class="thumbnail" src="/material-aulas/Processing-Python-py5/assets/mais_atributos.png"/><p>4.2.1 <a href="Processing-Python-py5/mais_atributos_graficos.html">Mais sobre atributos gráficos</a></p></li>
<li class="thumbnail"><img alt="4.3.1" class="thumbnail" src="/material-aulas/Processing-Python-py5/assets/seno_cosseno_0.png"/><p>4.3.1 <a href="Processing-Python-py5/seno_cosseno_atan2.html">Como usar seno <code>sin()</code>, cosseno <code>cos()</code> e arco tangente <code>atan2()</code></a></p></li>
<li class="thumbnail"><img alt="4.4.1" class="thumbnail" src="/material-aulas/Processing-Python-py5/assets/map_2.gif"/><p>4.4.1 <a href="Processing-Python-py5/map_lerp.html">Manipulando números com <code>remap()</code> e <code>lerp()</code></a> e também interpolando cores</p></li>
<li class="thumbnail"><img alt="4.5.1" class="thumbnail" src="/material-aulas/Processing-Python-py5/assets/easing_1b.gif"/><p>4.5.1 <a href="Processing-Python-py5/easing.html">O que é <em>easing</em>?</a> - transições de movimento</p></li>
<li class="thumbnail"><img alt="4.6.1" class="thumbnail" src="/material-aulas/Processing-Python-py5/assets/thumb-lambda.png"/><p>4.6.1 <a href="Processing-Python-py5/funcoes-como-argumentos.html">Funções como argumentos de outras funções</a> - <code>sort()</code> e funções <code>lambda</code></p></li>
<li class="thumbnail"><img alt="4.7.1" class="thumbnail" src="/material-aulas/Processing-Python-py5/assets/point_in_circle.gif"/><p>4.7.1 <a href="Processing-Python-py5/colisoes.html">Detectando a sobreposição de elementos geométricos</a> - o problema das "colisões"</p></li>
<li class="thumbnail"><img alt="4.8.1" class="thumbnail" src="/material-aulas/Processing-Python-py5/assets/offscreen1.gif"/><p>4.8.1 <a href="Processing-Python-py5/offscreen_buffer.html">Desenhando em um espaço fora da tela (<em>offscreen buffer</em>)</a></p></li>
<li class="thumbnail"><img alt="4.9.1" class="thumbnail" src="/material-aulas/Processing-Python-py5/assets/recorte_hexagonal.png"/><p>4.9.1 <a href="Processing-Python-py5/recortando_imagens.html">Recortando e mascarando imagens</a></p></li>
<h2>Exportação de imagens e outras saídas</h2>
<li class="thumbnail"><img alt="5.1.1" class="thumbnail" src="/material-aulas/Processing-Python-py5/assets/frame.png"/><p>5.1.1 <a href="Processing-Python-py5/exportando_imagem.html">Exportando imagens (bitmap/raster)</a></p></li>
<li class="thumbnail"><img alt="5.2.1" class="thumbnail" src="/material-aulas/Processing-Python-py5/assets/thumb-pdf.png"/><p>5.2.1 <a href="Processing-Python-py5/exportando_pdf.html">Exportando PDF (saída vetorial)</a></p></li>
<li class="thumbnail"><img alt="5.3.1" class="thumbnail" src="/material-aulas/Processing-Python-py5/assets/arquivo.svg"/><p>5.3.1 <a href="Processing-Python-py5/exportando_svg.html">Exportando SVG (saída vetorial)</a></p></li>
<li class="thumbnail"><img alt="5.4.1" class="thumbnail" src="https://github.com/villares/material-aulas/assets/3694604/7ff938cf-37f8-474a-998f-47a60f016677"/><p>5.4.1 <a href="Processing-Python-py5/exportar_animacoes.html">Exportando animações (vídeos ou GIF)</a></p></li>
<h2>Lendo e escrevendo arquivos externos</h2>
<li class="thumbnail"><img alt="6.1.0" class="thumbnail" src="/material-aulas/Processing-Python-py5/assets/bot1.svg"/><p>6.1.0 <a href="Processing-Python-py5/recursos_vetoriais_externos.html">Carregado formas de um arquivo vetorial (SVG)</a></p></li>
<li class="thumbnail"><img alt="6.2.0" class="thumbnail" src="/material-aulas/Processing-Python-py5/assets/copy2.png"/><p>6.2.0 <a href="Processing-Python-py5/imagens_externas.html">Lendo arquivos de imagem(<em>bitmap/raster</em>)</a></p></li>
<li class="thumbnail"><img alt="6.2.1" class="thumbnail" src="/material-aulas/Processing-Python-py5/assets/reticula100sat.png"/><p>6.2.1 <a href="Processing-Python-py5/reticulas.html">Criando retículas a partir de amostras de pixels de image</a></p></li>
<li class="thumbnail"><img alt="6.2.2" class="thumbnail" src="/material-aulas/Processing-Python-py5/assets/random_images.gif"/><p>6.2.2 <a href="Processing-Python-py5/imagens_externas_pasta2.html">Lendo todas as imagens da pasta <code>data</code></a> e sorteando uma</p></li>
<li class="thumbnail"><img alt="6.2.3" class="thumbnail" src="https://raw.githubusercontent.com/villares/material-aulas/master/Processing-Python/assets/muitas_imagens.png"/><p>6.2.3 <a href="Processing-Python-py5/imagens_externas_pasta.html">Lendo todas as imagens de uma pasta selecionada pela pessoa usuária</a> (avançado)</p></li>
<li class="thumbnail"><img alt="6.3.0" class="thumbnail" src="/material-aulas/Processing-Python-py5/assets/read_lines.png"/><p>6.3.0 <a href="Processing-Python-py5/file_IO.html">Lendo e escrevendo texto em arquivos (<em>file IO</em>)</a></p></li>
<li class="thumbnail"><img alt="6.3.1" class="thumbnail" src="/material-aulas/Processing-Python-py5/assets/csv.png"/><p>6.3.1 <a href="Processing-Python-py5/file_IO2.html">Lendo e escrevendo dados "tabulados" em CSV</a></p></li>
<h2>Questões mais avançadas das ferramentas</h2>
<li class="thumbnail"><img alt="7.1.0" class="thumbnail" src="https://user-images.githubusercontent.com/3694604/201694987-f78a4856-1329-4693-a312-4ab3402fe689.png"/><p>7.1.0 <a href="Processing-Python-py5/os_modos_de_py5.html">Os "modos de uso" da biblioteca py5</a>'</p></li>
<li class="thumbnail"><img alt="7.1.1" class="thumbnail" src="/material-aulas/Processing-Python-py5/assets/thumb-module.gif"/><p>7.1.1 <a href="Processing-Python-py5/modulos.html">Usando várias abas no IDE e importando código de outros módulos</a></p></li>
<li class="thumbnail"><img alt="7.1.2" class="thumbnail" src="/material-aulas/Processing-Python-py5/assets/java_python.png"/><p>7.1.2 <a href="Processing-Python-py5/java_para_python.html">Dicas para portar exemplos de Processing para Python com py5</a></p></li>
<li class="thumbnail"><img alt="7.1.3" class="thumbnail" src="https://raw.githubusercontent.com/villares/sketch-a-day/main/2025/sketch_2025_05_17/sketch_2025_05_17.gif"/><p>7.1.3 <a href="Processing-Python-py5/bibliotecas-java.html">Usando bibliotecas externas feitas para Processing Java</a></p></li>
<li class="thumbnail"><img alt="7.2.1" class="thumbnail" src="https://github.com/villares/material-aulas/assets/3694604/9464e498-c096-464b-b949-f34c75edabe5"/><p>7.2.1 <a href="Processing-Python-py5/mais_que_size.html">Manipulando a janela</a> - Tela cheia, redimensionamento e múltiplas janelas</p></li>
<li class="thumbnail"><img alt="7.3.1" class="thumbnail" src="/material-aulas/Processing-Python-py5/assets/input_janela.gif"/><p>7.3.1 <a href="Processing-Python-py5/input_janela.html">Uma janela de diálogo com um campo de texto</a></p></li>
<h2>Pequenos projetos e outros exemplos</h2>
<li class="thumbnail"><img alt="8.1.1" class="thumbnail" src="/material-aulas/Processing-Python-py5/assets/truchet_diagonal.png"/><p>8.1.1 <a href="Processing-Python-py5/truchet.html">Módulos de Truchet</a> - Azulejos e rotações</p></li>
<li class="thumbnail"><img alt="8.1.2" class="thumbnail" src="https://user-images.githubusercontent.com/3694604/191363342-b3a826a8-1587-4238-872a-fb836e26a508.png"/><p>8.1.2 <a href="https://abav.lugaralgum.com/material-aulas/pong/">Jogo PONG</a> - Estudos para o fazer um jogo</p></li>
<li class="thumbnail"><img alt="8.1.3" class="thumbnail" src="https://github.com/villares/material-aulas/assets/3694604/e0e6f78d-047c-4070-9218-4d1a7e91d183"/><p>8.1.3 <a href="Processing-Python-py5/LSystem.html">L-System</a> - Sistema de Lindenmayer</p></li>
<li class="thumbnail"><img alt="8.1.4" class="thumbnail" src="/material-aulas/Processing-Python-py5/assets/thumb-conway.jpg"/><p>8.1.4 <a href="Processing-Python-py5/automatos-celulares.html">Autômatos Celulares</a> - Jogo da vida de Conway (<em>Conway's Game of Life</em>)</p></li>
<li class="thumbnail"><img alt="8.2.1" class="thumbnail" src="https://img.youtube.com/vi/D5Ha1bhqBuQ/0.jpg"/><p>8.2.1 <a href="https://abav.lugaralgum.com/lousa-magica">Lousa mágica</a> - Desenho com Arduino e potenciômetros</p></li>
<li class="thumbnail"><img alt="8.2.2" class="thumbnail" src="/material-aulas/Processing-Python-py5/assets/thumb-paper.gif"/><p>8.2.2 <a href="https://abav.lugaralgum.com/Paper-objects-with-Processing-and-Python">Paper Objects with Processing and Python</a> - Volumes para cortar e montar</p></li>
<li class="thumbnail"><img alt="8.2.3" class="thumbnail" src="https://raw.githubusercontent.com/villares/sketch-a-day/main/2020/sketch_2020_09_26a/sketch_2020_09_26a.gif"/><p>8.2.3 <a href="https://abav.lugaralgum.com/arc_tangents_and_bezier_studies">Arc, tangents & Bezier studies</a> - Como desenhar linhas tangentes entre arcos e polígonos com arredondamentos</p></li>
<li class="thumbnail"><img alt="8.2.4" class="thumbnail" src="https://user-images.githubusercontent.com/3694604/174443509-0e8fa474-2ced-461c-93a8-ac64ccb1699a.gif"/><p>8.2.4 <a href="https://github.com/villares/pymunk-pinball-paulista">Simulações física 2D com PyMunk</a> - Pinball</p></li>
</div></div>
<!-- segunda coluna -->
<div class="column">
<div class="container">
<h2>Sobre este material</h2>
Para quem quer aprender ou ensinar programação em um contexto visual, existem hoje diversas possibilidades. Aqui exploramos inicialmente uma combinação de <a href="https://python.org">Python</a> e <a href="https://processing.org">Processing</a>, ou outras ferramentas que combinam Python, desenho e modelos tridimensionais. Veja abaixo com obter algumas delas:</p>
<p>• Para obter a biblioteca <a href="https://py5coding.org">py5</a>, que recomendamos para a versão mais recente deste material, siga as <a href="https://abav.lugaralgum.com/como-instalar-py5/"><strong>instruções de instalação</strong> usando Thonny IDE + plugin</a>.</p>
<p>• O projeto <a href="https://github.com/berinhard/pyp5js">pyp5js</a>, que combina pyodide e p5js, pode ser usado a partir de um <a href="https://abav.lugaralgum.com/pyp5js/py5mode/"><strong>editor online</strong></a>, que na variante do link tenta adaptar os nomes das funções para que fiquem semelhantes aos da biblioteca py5.</p>
<p>• Você pode explorar outras opções em <a href="https://github.com/villares/Resources-for-teaching-programming">Resources-for-teaching-programming</a></p>
<p>Este material começou usando <em>Processing modo Python</em>, uma ferramenta com a sintaxe de Python dentro do Processing IDE, e que não é mais ativamente mantida. Por conta disso, a versão mais antiga do material, desenvolvida entre 2019 e 2022, não tem sido mais atualizada, permanecendo no entanto disponível <a href="Processing-Python/">aqui</a>.
<h2 id="como-colaborar-e-contribuir"><a href="#como-colaborar-e-contribuir">Como colaborar e contribuir?</a></h2>
<p>Este material didático pode ser modificado e usado para dar aulas. Leia as <a href="/material-aulas/sobre/como-contribuir.html">instruções para colaborar com este repositório</a> e abra <a href="https://github.com/villares/material-aulas/issues"><em>issues</em></a> apontando problemas, sugerindo assuntos e melhorias, ou contribua com <em>Pull Requests</em> para o repositório.</p>
<p>Se você quer apoiar a continuidade deste projeto, que produz material didático aberto, faça um PIX <code class="language-plaintext highlighter-rouge">46c37783-5edb-4f1c-b3a8-1309db11488c</code>, <a href="https://www.paypal.com/donate/?hosted_button_id=5B4MZ78C9J724">doação de qualquer valor aqui</a> ou também com
<a href="https://wise.com/pay/me/alexandrev562">Wise</a>!</p>
<h3 id="recursos-relacionados"><a href="#recursos-relacionados">Recursos relacionados</a></h3>
<p>• <a href="https://abav.lugaralgum.com/faded-parsons-visual/">Quebra-cabeças de Parsons com resultado visual</a></p>
<p>• Fanzines e pôsters <a href="https://desenho.lugaralgum.com"><strong><code class="language-plaintext highlighter-rouge">desenho()</code></strong></a> <code class="language-plaintext highlighter-rouge">"""Para desenhar com código, para desenhar junto, com o computador e com outras pessoas!"""</code></p>
<p>• Desenhos diários com código: <a href="https://abav.lugaralgum.com/sketch-a-day">sketch-a-day</a></p>
<p>• <a href="https://hackmd.io/@villares/numpy-para-leigos">NumPy para leigos</a>[Trabalho em andamento]</p>
<p>• <a href="/material-aulas/sobre/outros_recursos.html">Outros recursos e livros de Processing e Python</a></p>
</div>
</div><!-- end of row div -->
</div>
<hr>
<h3 id="licenças"><a href="#licenças">Licenças</a></h3>
<p><strong>Texto e imagens:</strong> © 2019-2026 Alexandre B A Villares - Licença <a href="https://creativecommons.org/licenses/by-sa/4.0/deed.pt_BR">CC BY-SA 4.0</a>, exceto onde indicado, confira atribuições em cada página para materiais adaptados/remixados de outras fontes. Agradeço aos colaboradores do repositório que doam suas contribuições nestes termos!</p>
<p><strong>Código:</strong> GNU GPL v3.0, exceto onde for indicado, por alguma razão.</p>
</div>
</article>
<footer>
<hr>
<a href="https://github.com/villares/material-aulas/tree/main/">veja esta página no repositório</a>
</footer>
</body>
</html>