pokemongovet / pokemongovet.github.io

Projeto para incentivar adoção de animais pessoas que amam pokemons virtuais
https://pokemongovet.github.io/
Other
102 stars 38 forks source link

Canvas HTML5 para montagens com imagens #7

Closed rcgivisiez closed 8 years ago

rcgivisiez commented 8 years ago

Precisamos de ajuda!

Temos algumas das ideias que envolvem fazer montagem de imagens, que hoje podem ser feitas com softwares como Gimp ou Photoshop, mas isso “não escala”.

O ideal é que a implementação desse tipo de ideia funcione via navegador, não necessariamente via celular, mas no mínimo no desktop.

Exemplos práticos:

O pessoal pode usar o espaço aqui para indicar bibliotecas ou técnicas pra a execução disso. A partir das possibilidades reais de implementação dadas por vocês, nossa iniciativa poderá tirar conclusões de ações práticas.

uselessdev commented 8 years ago

Boa noite, há alguns meses precisei de uma solução semelhante, a principio optei por usar uma biblioteca pronta, depois de pesquisar algumas acabei utilizando o fabricjs pela simplicidade, infelizmente devido ao prazo apertado acabamos decidindo pegar uma coisa pronta e adaptar, infelizmente não guardei o que já tinha desenvolvido :disappointed: .

cassianorsilva commented 8 years ago

Talvez, para trabalhar as imagens, poderia ser utilizado a biblioteca: node-imagemagick-native antes de colocar no canvas.

tofanelli commented 8 years ago

algo assim?

https://pixlr.com/editor/ https://www.sumopaint.com/home/

fititnt commented 8 years ago

No momento, é pra ser algo um pouco mais simples. Está mais para algo como "memegenerator" (imagens padrões, textos que mudam) ou "twibbon" (foto muda, mas uma camada é aplicada) do que um editor completo, estilo Paint ou Photoshop.

No momento atual, a iniciativa tem apenas uma landing page estática. Provavelmente isso não deve mudar tão cedo, ate pra estimular ajuda de programadores. O ponto é que, por uma estratégia de divulgação, as coordenadoras @icoffani e @rcgivisiez estão considerando ver meios de quem sabe ir um pouco mais alem, mas não vale muito a pena fazer algo muito complexo sem antes ver se tem interesse do publico final.

Isso é menos sobre "quão bonito é o código" e mais sobre "algo que funciona" mesmo se a gente tiver que usar uma API ou um serviço de terceiro. Isso pode melhorar mais tarde, mas se pra muito em breve, tipo antes do dia 31 de Julho, já tivermos algo minimamente funcional, se algum jornal for divulgar a ideia, a gente já tem algo pronto

fititnt commented 8 years ago

Vou dar um exemplo. Não quer dizer que é isso que seria a melhor opção, mas é um exemplo.

Abaixo é uma imagem muito comum relacionada a Pokemons. Se o pessoal do marketing achar que tem apelo permitir que ongs usem um "pokemon-animal-para-adocao-generator" seja uma boa ideia, o resultado final poderia ser um usuário enviar uma foto qualquer, e isso ficar atrás de uma imagem como essa aqui.

who-is-that-pokemon

Muito provavelmente é mais sobre apenas mesclar texto em uma imagem, ou mesclar imagens e permitir download.

icoffani commented 8 years ago

Oi programadores! MUITO obrigada pela colaboração de vocês.

O nosso público-alvo tende a gostar de vídeos e gifs. Uma das nossas idéias seria permitir montagens que façam um animal resgatado e disponível para adoção se pareça mais com um pokémon, entendem?

Por exemplo: quando a pessoa faz upload de uma foto, ela pode arrastar um chapéuzinho do Pikachu, ou então uma roupinha do Charmander e, quem sabe colocar algum texto simples em um local padrão (sem muitas firulas). Depois disso ela pode baixar essa imagem customizada e divulgar na própria página.

Pra terem ideia do nosso tipo de público, dêem uma olhada em https://www.facebook.com/PokemonGoVet/. Queremos cativar principalmente pessoas entre 16 a 28 anos, na sua maioria mulheres (mesmo que o público masculino não esteja excluído, pelo o que notamos, as mulheres se interessaram mais até agora) e muitas dessas pessoas gostam de imagens e vídeos meigos. Isso pode parecer algo infantil, mas a intenção é justamente trazer pra primeira adoção gente que gosta disso.

uselessdev commented 8 years ago

@fititnt, @icoffani Deu pra entender bem a ideia.

Na minha situação, acabei usando esse mas sinceramente não sei se é 'aplicável' ao que vocês precisam.

lbotinelly commented 8 years ago

Sugestão de processo de implementação:

Utilize uma lib para extrair o contexto de imagem (a parte que importa) do fundo. Existem soluções tanto pagas quanto gratuitas para isso.

Exemplo a seguir:

O conteúdo a seguir pode ser implementado tanto como solução client- como server-side.

tawsbob commented 8 years ago

Posso ajudar!

Precisamos de uma API para cadastrar o bicho e exibir em algum lugar correto? ou só o gerador de imagens?

fititnt commented 8 years ago

Opa @tawsbob, creio que é mais pra gerar imagens mesmo.

É muito provável que a forma de crescer mais rápido é permitir que as pessoas possam pegar, criar a imagem, baixar ela, e dai usar como referência na hora de divulgar um novo animal pra adoção.

Claro que pode valer a pena ter URL pra compartilhamento, mas não sei se vale a pena fazer isso sem antes ver se as pessoas começam a usar o modo mais simples.

A não ser que já exista uma solução pronta, como fazer um fork de algum memegenerator open source, creio que é melhor primeiro só fazer funcionar.

icoffani commented 8 years ago

Achei um vídeo no Facebook que exemplifica bem a ideia do que podemos fazer. No caso, pode ser um cachorro que muda de nome, e tributos (type, weight, height, etc) aleatoriamente. O que seria legal porque as pessoas se interessariam em colocar a foto de cachorro para ver o que daria, tipo aqueles testes que o pessoal adora no Facebook. Ou então uma imagem com o gramado do jogo e a pokebola mesmo. Aqui alguns exemplos: 1 2

rcgivisiez commented 8 years ago

Obrigado a todos pela participação aqui!

Se tivermos pelo menos mais duas pessoas pessoas, creio que vai ser feito em NodeJS. Discussões podem ser feitas também em https://pgovet.rocket.chat/channel/gerador-fotos-adocao

Vamos fechar esse issue e manter toda discussão restante em #50