Autoria de Swift PlaygroundBooks — parte 2
Rosas Polares
Olá, mundo!
Este artigo é o segundo de uma série sobre autoria de PlaygroundBooks. Veja ao final desta página o índice para os demais artigos.
A primeira coisa que precisamos fazer ao começar a desenvolver um PlaygroundBook é determinar o tema a ser desenvolvido. Enquanto professores, podemos identificar um tópico do plano de ensino que queremos desenvolver. É importante lembrar que o Playground não serve apenas para o ensino de programação, mas de qualquer outro assunto.
É importante criar um planejamento dos capítulos e páginas de forma a conduzir o aluno no seu processo individual de aprendizagem. Assim, é muito importante que planejemos níveis de dificuldade crescentes e exercícios e testes durante o caminho, assim o aluno pode confirmar o que aprendeu.
Para esta série, quero desenvolver um PlaygroundBook simples, pois o objetivo é te ensinar a manipular os arquivos da estrutura comum apresentada na primeira parte da série.
Sendo assim, escolhi trabalhar com algo que eu amo que é a Arte Generativa. Vamos criar um livro que ensine o que é esta modalidade, apresentando um exemplo prático: as Rosas Polares.
O conteúdo deste artigo foi apresentado no Programa de Índio, e simplificado para o nosso exemplo. Assista ao vídeo para ter uma base mais detalhada. Em seguida, explicarei o código base que usaremos aqui.
Rosas Polares
Em Matemática, um a rosa polar é uma função senoidal que tem uma característica muito específica, seguindo a equação:
r(Θ) = cos(kΘ)
Veja que, em coordenadas polares, o raio da curva é variável com o ângulo e diretamente proporcional ao cosseno do mesmo ângulo, multiplicado por uma constante k. Com base nesta constante, pode-se determinar como será a imagem gerada. Por exemplo:
- se k é um inteiro e ímpar, a rosa desenhada terá k pétalas;
- se k é um inteiro e par, a rosa terá 2k pétalas;
- se k é irracional, temos um conjunto denso de curvas dentro mesmo raio;
Estas rosas possuem alguns nomes comuns para alguns valores de k:
- k = 3 temos um Trifolium Regular;
- k = 2 (4 pétalas), temos um Quadrifolium Regular;
Mas essa constante também pode ser uma fração. Caso k seja igual a 1/2, por exemplo, temos um Folium de Durero.
Modelo Matemático em Swift
Pensando nisso, podemos criar uma classe em swift que represente esta Rosa Polar, contendo alguns atributos mínimos para a determinação dos pontos da curva gerada.
Veja o que já podemos determinar como atributos:
- n — numerador da constante k
- d — denominador da constante k
- P(x,y) — ponto central onde a rosa será desenhada (usado para calcular os demais pontos)
- r — raio da circunferência que contém a rosa
Usando estes atributos, criamos uma classe em Swift que represente o modelo matemático de Rosas Polares. Observe que estamos criando um modelo independente do framework que será usado para desenho da Rosa.
No código acima, veja que a função principal é a generatePoints(), que cria um loop, incrementando o ângulo, calculando o novo raio (com base na equação da rosa) e em seguida calculando os valores cartesianos x e y do ponto calculado. Para isso realiza-se uma conversão de coordenadas polares para cartesianas (linhas 33 e 34).
Os pontos da rosa estão então armazenados no array points, que poderá ser acessado para desenho mais adiante.
Desenhando a rosa dom SpriteKit
Agora vem a parte mais divertida, desenhar na tela!
Em playground aceita vários tipos de dados como elementos renderizáveis. No vídeo do Programa de Índio, eu usei uma ViewController, pois a intensão do canal é expandir o projeto mais adiante. Mas para o nosso trabalho, podemos adotar a própria SKScene como elemento renderizável. veja:
Perceba que esta é uma cena como outra qualquer, mas foi adicionado um método de desenho que recebe um array de pontos, a espessura e a cor da linha. Usando a estrutura do CGMutablePath, nós desenhamos a linha ponto a ponto. Veja maiores detalhes no vídeo indicado no começo do artigo.
Testando o código
Por fim, para testar o nosso código, vamos instanciar a cena e uma rosa na página inicial do Playground. Veja que nas linhas 4 a 7 estamos inicializando a cena e determinando os parâmetros de escala e apresentação.
Nas linhas 9 a 14, criamos as variáveis com os parâmetros da rosa polar a ser criada. nas linhas 16 e 17, criamos a rosa e desenhamos na tela. Por fim, na linha 19, dizemos que a view a ser apresentada na página do playground é a view criada no começo do código.
Vá em frente! Aperte no botão de Play para rodar o código. É de se esperar que o resultado seja assim:
Finalizando
Pronto! Este é todo o código em Swift que vamos precisar para este exemplo de PlaygroundBook que construiremos ao longo desta série de artigos. Você pode acompanhar com o seu próprio código também, se quiser.
Ao longo da série, vamos editar a estrutura do livro. Assim, você pode usar o seu próprio livro para teste ou usar o que estamos começando com as rosas polares.
Caso queira aproveitar este que estou fazendo, o ponto de partida está na minha subscription de playgrounds. Quer saber como pegar? acesse:
No próximo artigo falaremos sobre como colocar uma capa bem bonita no livro! Aproveita o tempo entre um e outro pra se inscrever no Programa de Índio e ficar atualizado com o conteúdo que estou produzindo especialmente pra você.
Tchau
Índice da série
- Estrutura do PlaygroundBook
- Rosas Polares
- Adicionando uma capa
- Adicionando capítulos e páginas
- Cutscenes: cenas de transição
- Markup: criando o storytelling
- Customizando a barra de sugestão de código
- Tradução e Localização
- LiveView: alterando o código em tempo real
- Avaliando o aluno
- Performance e acesso: Escondendo os Módulos básicos e desabilitando Debug
- Playground Subscriptions: compartilhando o seu trabalho
