## Semana do Design ESPM
# Oficina - Design Gerativo
*um primeiro contato mão na massa com [Alexandre B A Villares](https://abav.lugaralgum.com)*

Esta página está em -> hackmd.io/@villares/design-gerativo-espm

### gerativo/gerativa?
- referências
- [Max Bense, 1965 - Manifesto: *The Projects of Generative Aesthetics*](http://www.computerkunst.org/Bense_Manifest.pdf)
_{(Meu motivo para evitar ~~generativo/generativa~~... Chomsky, no final da década de 50, cunha o termo gramática gerativa, [veja capa do livro de 1976 de Mário Perini](https://i.imgur.com/dD9TdLt.png), e temos a tradução do termo em Max Bense feita pela Monica Tavares e Julio Plaza, *Processos Criativos Com os Meios Eletrônicos: Poéticas Digitais*, 1998)}
- [Philip Galanter, 2003 - Artigo: *What is Generative Art?*](http://philipgalanter.com/downloads/ga2003_what_is_genart.pdf)
- Sol LeWitt - [Casey Reas inspirado por LeWitt](https://whitney.org/exhibitions/software-structures)
- Karstens Schmidt - [sdf](https://mastodon.thi.ng/@toxi/109970350719008499) / [sola tênis](https://i.imgur.com/1aawLUX.png)
- Guilherme Vieira - [Estúdio Daó](https://www.instagram.com/_guilhermesv/)
- Processing Community Day https://pcd2022.encontrosdigitais.com.br/sobre/

- **Ferramentas**:
- Python + Processing ou p5js.org
- **O que vamos usar: editor com Python no navegador [pyp5js-py5mode](http://abav.lugaralgum.com/pyp5js/py5mode/)**
- Para instalar em casa: [Thonny IDE + py5](https://abav.lugaralgum.com/como-instalar-py5/) ([material de apoio](https://abav.lugaralgum.com/material-aulas))
- [Referência rápida do vocabulário do py5](https://github.com/villares/processing.py-cheat-sheet/blob/pt-br/py5/py5_cc.pdf)
- [Outras ferramentas de desenho com Python](https://github.com/villares/Resources-for-teaching-programming#processing--python-tools-table)

- **Roteiro preliminar "mão na massa"**:
- Formas (coordenadas e dimensões)
- Cores
- Movimento e interação
- Condicionais (if)
- Aleatoriedade (random)
- Encapsulamento (definindo novas funções)
- Repetição
- Mais repetição
- Mais aleatoriedade

- **Participantes** (escreva o seu nome):
- Alexandre Villares
- Lucas Frata Nogueira
- Leandro Lorencini Calenzani
- Luz Maria Vivas Passos
- Gabriella Kazumi Maedo
- Breno Inafuku
- Erick Cruz
- Beatriz Araújo
- Andrew Cheng
- Maria Vitoria de Oliveira
- Naiara Almeida
- Maria Manuela Matos
- Flavia Muniz
- Ana Carolina Novais
- Gabriel Haddad Camargo de Amorim
- Natália Valente
- Leonardo Gonzalez Baldoni
- Isabela Duarte
- Letícia Harumi
- Otávio Chaves

- **SUGESTÕES:**
- Nota sobre ordem de desenho e sobreposição no material de apoio (Gabriel)
- Bola quicante com randomização da velocidade

- Outros Feedbacks

- A oficina foi bem divertida e informatica e o professor foi capaz de transmitir as infromações muito bem.
- gostei da forma de explicação. eu também

- Exemplos:

size(600, 600) # tamanha da área de desenho
background(255, 150, 0)  # cor de fundo e sobrepõe e apaga tudo

stroke_weight(4)  # espessura do traço

fill(0, 0, 200)  # cor de preenchimento das formas
rect(100, 150, 150, 100)  # x, y, largura, altura

no_fill()  # sem preenchimento
square(170, 200, 100)  # quadrado x, y, lado

Pincel aleatório

def setup():
    size(600, 600)
    background(100, 255, 0)
    
def draw():
    r = random(255)  # vermelho
    g = random(255)  # green
    b = random(255)  # azul
    d = random(10, 100)  # diâmetro
    fill(r, g, b)
    if is_mouse_pressed:  # se o mouse estiver pressionado
        circle(mouse_x, mouse_y, d) # desenha círculo
    
 #   if is_key_pressed and key == ' ':
 #       background(100, 255, 0)
# Paleta de sorteio "enviesada"        
#    g = random(128, 255)  # green
#    b = random(0, 128)  # azul
#    d = random(10, 100)  # diâmetro
        
  

Animação 0

x = 100  # variável global

def setup():
    size(600, 600)
    
def draw():
    global x   # eu sei que x é global e eu vou querer mudar
    background(100, 255, 0)
    fill(x / 5, 100, 0)
    circle(x, 300, 10)
    x = x + 5
    if x > 600:
        x = 0
    

Bola quicante

x = 100  # variável global
y = 200
vx = 5
vy = 1


def setup():
    size(400, 400)
    
def draw():
    global x, vx, y, vy
    #background(100, 255, 0)
    fill(x / 5, 100, 0)
    circle(x, y, 10)
    x = x + vx
    y = y + vy
    if x > width or x < 0:
        vx = -vx
    if y > height or y < 0:
        vy = -vy

Grade - acumulação contínua

def setup():
    size(400, 400)
    frame_rate(10)  # deixa mais lento
    
def draw():
    espacamento = 50
    # para cada y na faixa de números fabricado por range
    for y in range(50, 352, espacamento): # inicio, parada, passo
        # para cada x na faixa de números fabricado por range
        for x in range(50, 351, espacamento): # inicio, parada, passo
            tam = random (10, espacamento * 0.80)
            if random(100) > 50:
                fill(255)
            else:   
                fill(0, 0, 200)
            circle(x, y, tam)

Grade 2 (fundo preto, redraw quando aperta uma tecla)

def setup():
    size(400, 400)
    no_loop()
    
def draw():
    background(0)
    espacamento = 50
    # para cada y na faixa de números fabricado por range
    for y in range(50, 352, espacamento): # inicio, parada, passo
        # para cada x na faixa de números fabricado por range
        for x in range(50, 351, espacamento): # inicio, parada, passo
            tam = random (10, espacamento * 0.80)
            if random(100) > 50:
                fill(255)
            else:   
                fill(0, 0, 200)
            circle(x, y, tam)

def key_pressed():
    redraw()