## Criação de zines com programação - Sesc Avenida Paulista


## `hackmd.io/@sesc-av-paulista/programazine`

**Quartas-feiras, 14h30 a 16h30, de 8 de maio a 26 de junho**

### O que são zines? Qual a proposta da atividade?

Zines sãp publicações independentes, experimentais, podendo usar misturas de técnicas artesanais, analógicas e elementos digitais. Historicamente criadas no contexto de "sub-culturas", tem formatos pequenos, frequentemente podem ser replicadas a baixo custo (mimeografo, fotocópia, impressão caseira ou digital baratinha), e costumam ser compartilhadas com entusiastas do assunto que tratam.

**Nesta atividade aberta voltada a criação de zines, vamos acrescentar às tecnicas tradicionalmente utilizadas na sua confecção elementos de programação e incentivar e exploração de temáticas do letramento tecnológico, software livre e programação criativa.**

## Encontro 26 de junho
primeira versão da grade

import py5

margem_h = 20
cols = 5
rows = 5

def setup():
    global funcs, margem_v
    py5.size(int(297 * 1.8), int(420 * 1.8))
    py5.ellipse_mode(py5.CORNER)
    tam = (py5.width - 2 * margem_h) / cols
    margem_v = (py5.height - tam * rows) / 2
    funcs = [grade, py5.circle, py5.square, modulo_estrela]
    py5.no_loop()
    
def draw():
    py5.no_stroke()
    py5.background(255)
    py5.fill(200, 0, 200, 100)
    grade(margem_h, margem_v, py5.width - 2 * margem_h, cols, rows)
    py5.fill(0, 200, 200, 100)
    grade(margem_h, margem_v, py5.width - 2 * margem_h, cols, rows)

def grade(margem_h, margem_v, largura_grade, cols=3, rows=3):
    tam = largura_grade / cols
    for j in range(rows):
        y = margem_v + j * tam
        for i in range(cols):
            x = margem_h + i * tam
            if tam > 10:
                func = py5.random_choice(funcs)
            else:
                func = py5.random_choice(funcs[1:])
            func(x, y, tam)
                

def modulo_estrela(x, y, tamanho):
    radius1 = py5.random_int(int(tamanho/2), int(tamanho))
    radius2 = radius1 / 2
    npoints = py5.random_int(3, 50)
    angle = py5.TWO_PI / npoints
    halfAngle = angle / 2.0
    py5.begin_shape()
    a = 0

    while a < py5.TWO_PI:
       #print("while " + str(a))
       sx = x + tamanho / 2 + py5.cos(a) * radius2
       sy = y + tamanho / 2 + py5.sin(a) * radius2
       py5.vertex(sx, sy)
         
       sx = x + tamanho / 2 + py5.cos(a + halfAngle) * radius1
       sy = y + tamanho / 2 + py5.sin(a + halfAngle) * radius1
       py5.vertex(sx, sy)
       a += angle

    py5.end_shape(py5.CLOSE)

def key_pressed():
    py5.redraw()

py5.run_sketch()

---

import numpy as np

n = 12
step = TWO_PI / n

for a in np.arange(0, TWO_PI, step):
    print(a)

n = 12
step = TWO_PI / n

angs = []
for ang in (step * i for i in range(n)):
    print(ang)

import requests
import re

def getSVG(searchTerm):
    preamble = "https://www.svgrepo.com/vectors/"

    x = requests.get(preamble + searchTerm + '/')

    pattern = r'content="https:\/\/www\.svgrepo\.com\/svg\/\d+\/[^"]+"'

    # Find all matches in the HTML
    matches = re.findall(pattern, x.text)
    urls = [match.replace('content="','').replace('https','http').replace('/svg/','/download/')[:-1] + '.svg' for match in matches]
    i=0  
    for url in urls:
        r = requests.get(url, allow_redirects=True)
        open('svg/' + str(i).zfill(4) + '.svg', 'wb').write(r.content)
        i = i +1


from pathlib import Path

import py5

margem_h = 20
cols = 5
rows = 5

def setup():
    global funcs, margem_v, shapes
    py5.size(int(297 * 1.8), int(420 * 1.8))
    py5.ellipse_mode(py5.CORNER)
    tam = (py5.width - 2 * margem_h) / cols
    margem_v = (py5.height - tam * rows) / 2
    funcs = [grade, py5.circle, py5.square, modulo_estrela, random_shape]
    py5.no_loop()
    shapes = [py5.load_shape(path) for path in Path('svg').iterdir()]
    
    
def random_shape(x, y, tam):
    shp = py5.random_choice(shapes)
    shp.disable_style()
    py5.shape_mode(py5.CENTER)
    py5.shape(shp, x + tam/2, y + tam/2, tam, tam)
    
    
    
def draw():
    py5.no_stroke()
    py5.background(255)
    py5.fill(200, 0, 200, 100)
    grade(margem_h, margem_v, py5.width - 2 * margem_h, cols, rows)
    py5.fill(0, 200, 200, 100)
    grade(margem_h, margem_v, py5.width - 2 * margem_h, cols, rows)

def grade(margem_h, margem_v, largura_grade, cols=3, rows=3):
    tam = largura_grade / cols
    for j in range(rows):
        y = margem_v + j * tam
        for i in range(cols):
            x = margem_h + i * tam
            if tam > 10:
                func = py5.random_choice(funcs)
            else:
                func = py5.random_choice(funcs[1:])
            func(x, y, tam)
                

def modulo_estrela(x, y, tamanho):
    radius1 = py5.random_int(int(tamanho/2), int(tamanho))
    radius2 = radius1 / 2
    npoints = py5.random_int(3, 50)
    angle = py5.TWO_PI / npoints
    halfAngle = angle / 2.0
    py5.begin_shape()
    a = 0

    while a < py5.TWO_PI:
       #print("while " + str(a))
       sx = x + tamanho / 2 + py5.cos(a) * radius2
       sy = y + tamanho / 2 + py5.sin(a) * radius2
       py5.vertex(sx, sy)
         
       sx = x + tamanho / 2 + py5.cos(a + halfAngle) * radius1
       sy = y + tamanho / 2 + py5.sin(a + halfAngle) * radius1
       py5.vertex(sx, sy)
       a += angle

    py5.end_shape(py5.CLOSE)

def key_pressed():
    if py5.key == ' ':
        py5.redraw()
    elif py5.key == 's':
        py5.save_frame('###out.png')
py5.run_sketch()

## Encontro dia 19 de junho

import py5

margem_h = 20
cols = 3
rows = 4


def setup():
    py5.size(int(297 * 1.8), int(420 * 1.8))
    tam = (py5.width - 2 * margem_h) / cols
    margem_v = (py5.height - tam * rows) / 2
    for j in range(rows):
        y = margem_v + j * tam
        for i in range(cols):
            x = margem_h + i * tam
            py5.square(x, y, tam)
    
    
    
py5.run_sketch()

Grade recursiva

import py5

margem_h = 20
cols = 5
rows = 5

def setup():
    py5.size(int(297 * 1.8), int(420 * 1.8))
    py5.rect_mode(py5.CENTER)
    tam = (py5.width - 2 * margem_h) / cols
    margem_v = (py5.height - tam * rows) / 2
    py5.no_stroke()
    py5.background(255)
    py5.fill(200, 0, 200, 100)
    grade(margem_h, margem_v, py5.width - 2 * margem_h, cols, rows)
    py5.fill(0, 200, 200, 100)
    grade(margem_h, margem_v, py5.width - 2 * margem_h, cols, rows)


def grade(margem_h, margem_v, largura_grade, cols, rows):
    tam = largura_grade / cols
    for j in range(rows):
        y = margem_v + j * tam
        for i in range(cols):
            x = margem_h + i * tam
            sorteio = py5.random_choice((0, 1, 2))
            if  sorteio == 0 and tam > 10:
                grade(x, y, tam, 3, 3)
            elif sorteio == 1:
                py5.circle(x + tam / 2, y + tam / 2, tam)
            else:
                py5.square(x + tam / 2, y + tam / 2, tam * 0.80)
                
    
    
    
py5.run_sketch()

## Encontro dia 12 de junho

- Simulação de incêndio...

- Jupyter Notebooks e kernels do py5
- https://py5coding.org/tutorials/jupyter.html
> 
>
> 
>
> 

- Explorando atividades anteriores no Sesc:
- https://hackmd.io/@villares/sesc-quadrinhos-prog
- https://hackmd.io/@villares/prog-ilustra

- Passar para o módulo da pessoa
- duas cores
- largura
- desenho com animação OU recorte de imagem

- Orientação a objetos com partículas:

    # Código usando py5 no estilo "imported mode"
    # consulte https://abav.lugaralgum.com/como-instalar-py5/

    particulas = []

    def setup():
        size(500, 500)
        for _ in range(50):
            p = Particula(100, 100)
            #particulas.append(p)
        background(0)
        no_stroke()
        color_mode(HSB)

    def draw():
        background(0)
        for p in particulas:
            p.update((mouse_x, mouse_y))
        print(len(particulas))

        for p in reversed(particulas):
            if p.diametro < 1:
                particulas.remove(p)


    class Particula():

        def __init__(self, x, y):    # "dunder init"
            self.x = x
            self.y = y
            self.vx = random(-2, 2)
            self.vy = random(-2, 2)
            self.diametro = random(10, 20)

        def update(self, pos):
            self.move()
    #         if dist(pos[0], pos[1], self.x, self.y) < self.diametro / 2:
    #             fill(255, 0, 0)
    #         else:
    #             fill(255)
            self.desenha()
            self.diametro *= 0.95


        def desenha(self):
            fill(self.diametro * 5, 255, 255)
            circle(self.x, self.y, self.diametro)

        def move(self):
            self.x += self.vx
            self.y += self.vy
            r = self.diametro / 2
            if self.x > width - r:
                self.x = -r
            if self.x < -r:
                self.x = width - r
            if self.y > height - r:
                self.y = -r
            if self.y < -r:
                self.y = height - r

    def mouse_dragged():
        particulas.append(Particula(mouse_x, mouse_y))

## Encontro 5 de junho

Dando andamento a esta [proposta de trabalho](#Proposta-Melisso-coletivamente-adotada), a página com o markdown do zine para nossa edição: https://hackmd.io/@villares/markdown-programazine

TODO:
- Precisam estar locais as imagens pro nosso script markdown-to-pdf funcionar... estudar como baixar fácil do hackmd...
- ver também se tem fácil como baixar o "markdown raw" do HackMD sem ter que usar a API com access tokens e toda a burocracia.

- Precisamos pensar sobre o pôster...
- Ale vai escrever sobre Prog. Criativa e Python + eletrônica
- Melisso: reticulas
- https://github.com/villares/sketch-a-day/tree/main/2024/sketch_2024_03_06
- https://github.com/villares/sketch-a-day/tree/main/2024/sketch_2024_03_07
- https://hackmd.io/@villares/sesc-reticula

## Encontro dia 28 de maio

Perdemos o css do encontro passado :(

Lembro vagamente que as fontes eram um problema, essa lib deve usar por baixo dos panos PyMuPDF, por isso acho que devíamos olhar esse pacote de fontes aqui: https://pypi.org/project/pymupdf-fonts/

- Vamos testar estes CSSs:
-[milligram.css](https://github.com/milligram/milligram/blob/main/dist/milligram.css) * estamos usando este!
-[simple.css](https://github.com/kevquirk/simple.css/blob/main/simple.css)

- Ideia de zine "geralzão"
- Falar das outras atividades no Sesc com Python
- biblioteca que o Ale usa: https://abav.lugaralgum.com/como-instalar-py5
- https://hackmd.io/@villares/desenhando_sesc
- https://hackmd.io/@villares/sesc-quadrinhos-prog-5
- hackmd.io/@villares/prog-ilustra
- https://github.com/villares/sketch-a-day/tree/main/2024/sketch_2024_03_06 Ada
- https://github.com/villares/sketch-a-day/tree/main/2024/sketch_2024_03_07 Ada

#### Proposta Melisso (coletivamente adotada):

- Sobre: SESC ETA
- Sobre: Programaçao Criativa
- Sobre: Thonny + py5
- Exemplo: Quadrinhos (balão de fala)
- Exemplo: Reticulas
- Exemplo: Edição de Imagens
- Exemplo: Python com microcontrolador
- Créditos: pessoas que participaram da zine
- Pôster grande no verso

- Página com o markdown do zine para nossa edição: https://hackmd.io/@villares/markdown-programazine

## Encontro dia 22 de maio

- Transcrição das funções embutidas https://hackmd.io/@sesc-av-paulista/python-builtins
- Mars Lee quadrinhos sobre contribuir com NumPy:
- Online https://heyzine.com/flip-book/3e66a13901.html#page/4
- PDF https://nyc2023.pydata.org//media/cfp/submissions/MTUFNQ/resources/how-to-contribute-to-numpy-comics-pydata-nyc-mars-lee_rFJwlfz.pdf
- Palestra dela https://www.youtube.com/watch?v=Gv_Ea94wquM&ab_channel=PyData
- Link para app de tirinhas do Nick Tolervey
- original em inglês: https://pycomic.github.io/
- app traduzido para pt: https://webtiras.github.io/pycomic/

- Link sobre utilitario python que converte markdown para pdf

https://dev.to/vb64/converting-markdown-to-pdf-in-python-5efn

from pathlib import Path

# pip install markdown-pdf (depende de pyMuPDF)
from markdown_pdf import MarkdownPdf, Section

PAGE_BREAK = '---' 
# se você precisar de uma linha horizontal, e não quebra de página, use <hr>
entrada_md = Path('zine.md')
TITLE = 'Zineeeeeee!'
CSS_FILE = 'milligram.css'
OUT_FILE = 'zine.pdf'

try:
    css = Path(CSS_FILE).read_text()
except :
    print('Não carreguei o arquivo CSS')
    css = ''

pdf = MarkdownPdf(toc_level=2)

with open(entrada_md, 'r', encoding='UTF8') as entrada:
    paginas = []
    pagina_atual = ''
    for linha in entrada.readlines():
        if linha.strip() != PAGE_BREAK:  
            pagina_atual += linha
        else:
            paginas.append(pagina_atual)
            pagina_atual = ''
    paginas.append(pagina_atual)
    for p in paginas:
       pdf.add_section(Section(p, toc=False), user_css=css)

pdf.meta["title"] = TITLE
pdf.save(OUT_FILE)

## Encontro dia 15 de maio

- Ideias propostas a partir do encontro anterior:
- Escrever um zine sobre desenho com Python em markdown
- inspirado na referência rápida https://github.com/villares/processing.py-cheat-sheet/tree/pt-br
- Podemos fazer novos desenhos, inclusive analógicos!
- Preparar um procedimento ou uma ferramenta para converter automaticamente markdown em PDF
- Testei com **pandoc** e funcionou (mas não sei arrumar os estilos/css)
- Instalei no Windows https://pandoc.org/installing.html
- Instalei no Windows https://miktex.org/download (LaTeX/PDF support)
- Na linha de comando do Windows: `pandoc input.md -o output.pdf`
- Não sei como controla as quebras de página
- Usar o script que já temos que faz "imposição" (mover e girar as páginas) para o formato tradicional de zine

- Conversor on line de .md para Pdf: https://products.groupdocs.app/pt/conversion/md-to-pdf

- Exemplo de arquivo Markdown:
- Criamos um arquivo de texto simples e salvamos com a extensão md ( markdown).

----------------------------------------

# Funcoes embutidas

O interpretador de Python possui varias funcoes embutidas
e tipos embutidos que sempre estao disponiveis.

A seguir listamos todas as funcoes em ordem alfabetica.

## Funcoes embutidas.

### A ###

abs()

aiter()

all()

anext()

any()

ascii()

-------------------------

- Geramos um pdf a partir do exemplo acima usando pandoc no terminal do linux código : `pandoc entrada.md -f markdown -t pdf -s -o saida.pdf´

## Encontro dia 8 de maio

### Algumas ideias para explorar

- Zines sobre tecnologia da Julia Evans https://wizardzines.com
- 

- Desenho()
- 
- 

- Tecniquim
- https://tecniquim.itch.io/tecniquim-0x00

### Ideias para zines:
- **ffmpg**
- hackmd.io/@sesc-av-paulista/ffmpg

- Aprendendo/Ensinando Python
- 

- **Python built-ins** 

- **Palavras reservadas do Python**

#### Desenhando com Python

- Colinha do py5
- 
- 

- https://github.com/villares/Paper-objects-with-Processing-and-Python
- 

### Criação e manipulação de PDFs com Python

#### Script que faz a re-ordenação das páginas de um PDF


- [Script que converte arquivo de várias páginas num A3](https://gist.github.com/villares/0402a1c9033e6f4baf55554c16d25f4e)
- Precisa instalar a biblioteca `PyMuPDF`
- Funciona na linha de comando
- No Thonny funciona com o campo *Program Arguments*
- 

#### Criando PDFs com Python

- [Gerando PDFs de várias páginas com a biblioteca py5](https://gist.github.com/villares/f99229fd8a3c7b8c51d8b480c93f19ad#file-multiple_page_pdf_py5_imported_mode-py)
- Precisa [instalar a biblioteca py5](https://abav.lugaralgum.com/como-instalar-py5/)
- Tem exemplo *imported mode* para rodar no Thonny com plug-in ligado, e exemplo *module mode* para rodar com o plug-in desligado.
- Tem que apertar 's' para o sketch salvar o PDF!

#### Mais manipulação de PDFs

- [Overlay: usando um PDF sobreposto em várias páginas de outro](https://gist.github.com/villares/f99229fd8a3c7b8c51d8b480c93f19ad#file-multiple_page_pdf_py5_module_mode-py)
- [Mais ainda sobre manipulação de PDFs com Python!](https://hackmd.io/@sesc-av-paulista/estudos-em-python-14-maio)

### Produção dos participantes

- Cole aqui as suas imagens!