Let’s Make Generative Art We Can Export to SVG and PNG

8 views
Skip to first unread message

Nicholas Frota

unread,
Aug 28, 2020, 6:15:32 PM8/28/20
to processi...@googlegroups.com

Guilherme Vieira

unread,
Aug 31, 2020, 7:10:40 AM8/31/20
to Nicholas Frota, processing-brasil
Bacana esse processo.

Eu curto muito utilizar o p5 por ele rodar no browser e poder criar e estilizar rapidamente interfaces com html e css, mas vejo que quando você quer ter uma saída de arquivo vetorial o melhor é ir para coisas mais independentes como bibliotecas específicas de SVG, JavaScript puro ou o que vejo com mais frequência que é sair do browser e ir para Processing Java, OpenFramework, etc...

Abraços

Guilherme Vieira
guilhermevieira.info
55 11 97590 9639


On Fri, Aug 28, 2020 at 7:15 PM Nicholas Frota <in...@nicholasfrota.com> wrote:

--
Você recebeu essa mensagem porque está inscrito no grupo "processing-brasil" dos Grupos do Google.
Para cancelar inscrição nesse grupo e parar de receber e-mails dele, envie um e-mail para processing-bra...@googlegroups.com.
Para ver essa discussão na Web, acesse https://groups.google.com/d/msgid/processing-brasil/CAB3iSTksKvCcTGg16tCEUgdkPNP8T%2BPE7jFRBNkQo1YqedV7yg%40mail.gmail.com.

Alexandre B A Villares

unread,
Aug 31, 2020, 9:00:23 AM8/31/20
to Guilherme Vieira, Nicholas Frota, processing-brasil
Legal essa discussão!

Neste momento estou  testando aqui esta biblioteca "flat" , e consigo toscamente (devido a minha falta de habilidade com deploy de web applications) gerar um SVG usando uma estrutura mínima em flask (framework web Python bem legal).


Abraços,
A

---


Guilherme Vieira

unread,
Aug 31, 2020, 9:54:57 AM8/31/20
to Alexandre B A Villares, Nicholas Frota, processing-brasil
Alexandre eu ouvi falar dessa biblioteca no Typographics deste ano. O Petr van Blokland tava falando de uma biblioteca que ele criou pro DrawBot chamada PageBot e ela usa Flat pra ter suporte multiplataforma. Confesso que não entendi muito bem na palestra como a PageBot funcionava nesse modo multiplataforma sem a dependência do Drawbot.

Infelizmente eu acho que essa palestra não vai pro ar novamente.

Abraços,

Guilherme Vieira
guilhermevieira.info
55 11 97590 9639

marlus

unread,
Aug 31, 2020, 2:12:49 PM8/31/20
to Guilherme Vieira, Alexandre B A Villares, Nicholas Frota, processing-brasil
Pois é, o Carlos Oliveira uma vez me enviou um script para permitir export em SVG, o que ele usou nesse sketch

Geralmente quando preciso gerar um SVG, ou uso o Paper.js ou gero o SVG diretamente

Mas seria ótimo ter uma interface direta com p5.js ...

Para vídeos, lembrei desse tweet do Mr.Doob (Three.js)
https://twitter.com/mrdoob/status/1278420131450773505

Abs!

Marlus
◢◢

Guilherme Vieira

unread,
Aug 31, 2020, 3:01:48 PM8/31/20
to marlus, Alexandre B A Villares, Nicholas Frota, processing-brasil
Também já tentei algumas coisas com essa biblioteca, mesmo ela não sendo atualizada, dá pra fazer bastante coisa legal e a base do código é um desenho simples.

Pra vídeo tem também a CCapture (https://github.com/spite/ccapture.js/) que funciona bem integrada ao p5.js. Ela captura qualquer canvas e gera o vídeo, é uma lógica bem legal.

Que massa esse código Marlus. Eu achava que o Paper.js tinha sido descontinuado, conheci ele a muitooooo tempo atrás, bacana saber dessa possibilidade também.

Uma coisa que me empolgou a dar uma olhada com carinho no Flat que o Alexandre indicou é a possibilidade de trabalhar com diversos modos de saída de cor além do RGB. Conseguir fazer artes CMYK e cores especiais me pareceu um recurso curioso que vejo pouco sendo implementado.

Abraços

Guilherme Vieira
guilhermevieira.info
55 11 97590 9639

Marcelo Prates

unread,
Aug 31, 2020, 7:21:55 PM8/31/20
to Guilherme Vieira, marlus, Alexandre B A Villares, Nicholas Frota, processing-brasil
Oi Pessoal,

Já que comentaram a CCapture.js: caso tenham interesse, eu preparei um sketch template a partir do qual eu tento produzir todos os meus sketches no p5js. Ele já vem com o esqueleto necessário pra produzir um gif em loop perfeito (e as instruções de como fazer isso nos comentários). É simples, mas agilizou bastante o meu processo :)

Segue o link: https://github.com/marceloprates/p5js-sketches/blob/master/template/sketch.js 

Abraços,



--
Att, Marcelo.

Guilherme Vieira

unread,
Sep 6, 2020, 12:39:50 PM9/6/20
to Marcelo Prates, marlus, Alexandre B A Villares, Nicholas Frota, processing-brasil
Olá Marcelo, tudo certo?

Por curiosidade, qual foi o motivo por preferir os frames em PNG e não optar pela saída já em GIF ou Vídeo do CCapture? Alguma questão com compactação, ou teve algum problema?

Abraços,

Guilherme Vieira
guilhermevieira.info
55 11 97590 9639

Marcelo Prates

unread,
Sep 8, 2020, 7:06:07 AM9/8/20
to Guilherme Vieira, marlus, Alexandre B A Villares, Nicholas Frota, processing-brasil
Oi Guilherme,

Na verdade não sabia que o CCapture permitia exportar como Gif e vídeo. Que ótimo!
Reply all
Reply to author
Forward
0 new messages