https://pixelbattle.com.br

Português: Imagine a cidade como um grande quadro para ser pintado coletivamente, em constante transformação através da sobreposição continua de pixels e cores. A batalha é uma provocação ao quanto colaborativos conseguimos ser.

English: Imagine the city as a big canvas to be painted collectively, in constant transformation through the continuous overlap of pixels and colors. The battle is a provocation of how collaborative we can be.

Português: Todos podem pintar a cidade usando seus celulares. Seu desenho pode ser sobreposto por outra pessoa. O último pixel desenhado será o exibido para todos. Pessoas também podem explorar livremente os desenhos espacialmente e temporalmente.

English: Everybody can paint the city using their mobile phones. Your drawing can be overlapped by other person drawing. The last pixel drew will be the displayed to everyone else. People can also freely explore spatially and temporally the drawings.

Português: A ideia do projeto começa de conversas com @Mneunomne sobre usar mapas como uma plataforma de intervenções sobre a cidade.

Então eu vi o Reddit Places e surge a ideia de usar a cidade como uma grande tela. A ideia de colaboração e compenteição e como os usuários do Reddit se engajaram realmente me pegou (Complete timelapse).

O projeto foi desenvolvido durante a residência artística Multiverso.

English: The project idea started from talks with @Mneunomne about using maps as a platform of interventions over the city.

Then I saw Reddit Places and I the idea of using the city as a pixel art canvas emerged. The idea of collaboration versus competition and how it engaged the Reddit users really got me(Complete timelapse).

The project was developed during the Multiverso artistic residence.

Português: Primeiro decidir ir com o Leaflet ao invés do Google Maps porque a arquitetura do código era muito mais orientada à JS, e especificamente o grid layer era muito útil.

Então eu decidi usar o HTML Canvas para exibir as pinturas, e foi uma decisão para obter uma boa performance com dados em tempo real e interativos interativa e controle total sobre os desenhos.

O ambiente de produção foi feito com os serviços da Amazon, e toda arquitetura de DevOps foi feita pelo Cristian Mello.

Adotamos no projeto o banco de dados RethinkDB, por sua maneira trabalhar com dados em tempo real.

English: First I decided to go with Leaflet instead of Google Maps because the code architecture was much more JS oriented, and specifically the grid layer was very useful.

So I decided to use HTML Canvas to render the paintings, it was a good decision to get a realtime interactive performance with full drawing control.

The production environment was done using the Amazon services, and all the DevOps archtecture was done by Cristian Mello.

We adopted the RethinkDB database, by his way of working with realtime data.

Português: Em geral, todo motor de mapa é feito de quadrados(Tiles). Cada quadrado mostra parcialmente a Terra em nível de ampliação(zoom) correspondente.

Na ampliação 0 um único quadrado exibe a Terra inteiramente.

Na ampliação 19(Máxiom em motorores de mapa) a Terra é dividida em 524.287(2^19) quadrados horizontalmente e verticalmente.

English: In general, all map engines works with tiles. Each tile show partially earth in the correspondent zoom level.

At zoom level 0 a single tile display the full eath map.

At zoom level 19(maximum in general maps) the earth map is subdivided in 524.287(2^19) tiles horizontally and vertically.

Leaflet: Understanding the tile system

Português: Na ampliação máxima(19) do Pixel Battle os quadrados são subdivididos em 4 linhas e 4 colunas, resultando em 2.097.148(524.287*4) quadrados horizontalmente e verticalmente.

Finalmente nós temos um total de 4.398.029.733.904(2.097.148^2) pixels para pintar. Mais de 4 TRILHÕES!!!!

English: At Pixel Battle maximum zoom level(19) the tile is also subdivided by 4 rows and 4 columns, resultin in 2.097.148(524.287*4) tiles horizontally and vertically.

Finally we got a total of 4.398.029.733.904(2.097.148^2) pixels to paint. More than 4 TRILLIONS!!!!

Português: Este projeto é executado dentro de um ambiente de desenvolvimento criado pelo Docker Container.

Primeiro é necessário clonar o repositório do Docker Container.

Ao seguir os passos de configuração do repositório acima, o servidor do banco de dados e node serão levantados.

Ao concluir os passos será necessário clonar este repositório na pasta src/ do Container.

English: This project is executed inside a development environment created by a Docker Container.

It is first necessary to clone the Docker repository.

Follow the configuration steps from the repository above, the database server and the node server will get up.

When concluding the steps it will be needed to clone this repository in the /src folder at the Container.

1. Intalando as dependencias (Install dependencies)

npm install

2. Copie o arquivo .env.sample renomeando-o para .env (Copy the file .env.sambple renaming it to .env)

1. Run a local server over http://localhost:8080/.

npm run dev

1. Para publicar o front-end e comprimi-lo na pasta public (To build and compress the front-end files into the public folder)

npm run build

2. Para rodar o servidor node em modo de produção (To run the node server in production mode)

npm run start

1. Inspiration: Mapeamento a project from @mneunomne
2. Inspiration: Reddit Place: A project similar project where time was the challange
3. Inspiration: Reddit Place complete timeline
4. Leaflet: JS map engine
5. Leaflet: Understanding the grid system
6. Leaftlet: Grid layer documentation