Ideias, Regras, Simulação: Introdução: Janela e Olá Mundo

Pré-Requisitos

O material de Ideias, Regras, Simulação promove aprendizado baseado em projetos (simulações interativas e jogos digitais) com recursos multimídia. Assim, ele é complementar ao material de Aprenda Programação, que introduz fundamentos e técnicas básicas de programação, com exemplos para JavaScript, Python, Lua e GDScript (para Godot Engine).

Para Ideias, Regras, Simulação, você precisará de um ambiente de desenvolvimento configurado para uma das linguagens anteriores:

• GDScript (Godot Engine);
• JavaScript. Em JavaScript, é preciso criar uma página HTML com um canvas;
• Python. Em Python, é necessário instalar PyGame. Instruções em texto estão disponíveis em Bibliotecas: Interface Gráfica com Thonny. Instruções em vídeo estão disponíveis em Python em linha de comando e usando o IDE Thonny, hospedado no YouTube;
• Lua. Em Lua, é necessário instalar LÖVE (Love2D). Instruções em vídeo estão disponíveis em Lua em linha de comando e usando o IDE ZeroBrane Studio, hospedado no YouTube.

JavaScript (para navegadores) e GDScript fornecem suporte para conteúdo multimídia.

Também estou considerando melhorar os editores online para programação dentro do website, em um estilo de curso interativo. Atualmente, a página de ferramentas fornece opções para:

• JavaScript e HTML 5 (HTML, JavaScript e CSS);
• Python;
• Lua.

Os editores possuem suporte para imagens em navegador. Contudo, Python e Lua utilizam a sintaxe para JavaScript com canvas. Caso eu criasse uma abstração e adicionasse suporte para áudio, eles tornar-se-iam opções válidas (ao menos para primeiras atividades).

Contudo, convém configurar um Ambiente Integrado de Desenvolvimento (em inglês, Integrated Development Environment ou IDE), ou a combinação de editor de texto com interpretador assim que possível para programar em sua máquina com maior eficiência. Ambientes online são práticos, mas ambientes locais são mais potencialmente mais completos, eficientes, rápidos e personalizáveis. Caso queira tornar-se profissional, você precisará de um ambiente de desenvolvimento configurado. Quanto antes o fizer, melhor.

Versão em Vídeo

Este tópico possui versões compactas em vídeo no canal do autor no YouTube:

• GDScript com Godot Engine;
• JavaScript com HTML Canvas;
• Python com PyGame;
• Lua com LÖVE.

Contudo, esta versão em texto é mais completa.

Programando Simulações e Jogos Digitais

Programar não é saber uma linguagem de programação. De fato, em Aprenda Programação argumentou-se que programar é resolver problemas. Por isso a importância do aprendizado do pensamento computacional.

Pensando-se um sistema ou algoritmo como uma caixa preta, sistemas:

1. Recebem uma entrada ou um estímulo;
2. Processam a entrada para calcular um resultado;
3. Informam uma saída como resposta.

Uma simulação é uma imitação de um processo ou de um sistema, potencialmente constituído por subsistemas -- ou um sistema de sistemas. Como sempre, consultar a definição pode ser útil.

Simulações usam modelos para representar características ou comportamentos. Programaticamente, isso é feito usando-se abstrações para decomposição de dados (por exemplo, usando registros) e decomposição funcional (por exemplo, via subrotinas como funções, procedimentos e métodos). Em sistemas, isso significa usar operações aritméticas e operações lógicas para processar a memória. O processamento comumente requer seleções ou escolhas, assim como repetições ou iterações.

Em outras palavras, os links do parágrafo anterior descrevem vários dos principais recursos usados para programar. Por isso a complexidade.

De fato, a criação de uma simulação minimamente complexa utiliza praticamente todos os conceitos básicos de programação:

1. Ponto de entrada;
2. Saída;
3. Tipos de dados;
4. Variáveis e constantes;
5. Entrada;
6. Aritmética;
7. Comparações;
8. Operações lógicas;
9. Estruturas de condição;
10. Subrotinas (funções e procedimentos);
11. Estruturas de repetição (laços ou loops);
12. Coleções;
13. Registros (structs);
14. Bibliotecas;
15. Testes e depuração.

Caso se queira salvar dados, emprega-se arquivos (ou implementações de nível mais baseadas em arquivos como bancos de dados; em algum momento, existirá um arquivo). Portanto, voltamos aos conteúdos de Aprenda Programação. Fundamentos são a base de todo sistema -- assim como de qualquer conhecimento.

Ideias, Regras, Simulação

Simulações tendem a ser inerentemente complexas. Contudo, existem simulações simples. Talvez elas não sejam muito interessantes, mas servem como ponto de partida para uma jornada. Um início cuja continuidade poderá permitir a criação de simulações cada mais complexas (e interessantes).

Ideias, Regras, Simulação promove uma abordagem orientada a projetos para o aprendizado de programação. A série explora pequenos projetos com escopos menores, com a introdução de conceitos e complexidade ao longo do tempo. Ou seja, um aprendizado contínuo e incremental, no qual suas habilidades de programação e resolução de problemas melhorarão a cada projeto.

Como em Aprenda Programação, cada novo conceito e recurso introduzido poderá ser retomado em momentos futuros. Assim, você entenderá como reduzir a complexidade de um sistema para suas partes simples. Sistemas para subsistemas, subsistemas para decomposições de dados e funcionais, decomposições para o código-fonte do programa. Você entenderá como surgem padrões de projeto: pela repetição e reuso de soluções de sucesso de projetos anteriores em projetos futuros. Padrões foram comentados previamente em Registros e em Bibliotecas. Entendendo como eles surgem, você poderá modificar padrões existentes de acordo com suas necessidades, assim criar os seus próprios.

Novamente, pequenos projetos permitem fazer isso de forma gradual, iterativa e contínua, com curvas mais suaves para o aprendizado.

De Ponto de Entrada e Estrutura de Programa, atividades de programação podem começar por um Olá, mundo! (tipicamente escrito como Olá, meu nome é Franco! nas entradas deste blog). Para simulações multimídia, o processo será similar. Do Olá, mundo! para as primeiras imagens, das primeiras imagens até sistemas interativos de tempo real. Criaremos uma janela, desenharemos pixels, depois formas geométricas mais complexas (como linhas e polígonos), depois imagens, animações, sons...

Com os conceitos e fundamentos, você transformará ideias em simulações. Ideias, problemas, algoritmos, sistemas: ideias, regras, simulação. Em síntese, essa é a essência para a criação de simulações computacionais: criar regras que transformem suas ideias em programas de computador.

Os projetos possuirão um início -- por exemplo, um Olá, mundo!. Por outro lado, diferentemente de Aprenda Programação, não há um fim definido. No futuro, poderemos explorar conceitos e recursos como renderização, Inteligência Artificial, sistemas distribuídos.

Parte da jornada é ajudar você a tornar-se independente e capaz de criar seus próprios projetos. Assim, dependendo da evolução da série, você poderá progredir de iniciante, para adequado, competente, proficiente, profissional... Após dominar os fundamentos, as únicas limitações serão sua imaginação, habilidades de resolver problemas, o hardware disponível e o que é computacionalmente possível. Afinal, todo programa de computador começa, mas nem todo programa termina.

O mais importante, contudo, é que você entenda e perceba o progresso, assim como seja capaz de usar o conhecimento para criar seus próprios sistemas. Assim, cedo ou tarde, você será capaz de fazer magia com computadores, empregando a Computação como ela é: ciência para você, magia para as outras pessoas.

O Primeiro Passo: Olá, Mundo! em Console (Terminal)

Como comentado em Aprenda Programação: Ponto de Entrada, é tradicional escrever "Olá, mundo!" como primeiro programa quando se aprende uma nova linguagem.

# NOTA Modificar caso se use outro tipo de Node como raíz da cena.
extends Node

func _ready():
    print("Olá, meu nome é Franco!")

console.log("Olá, meu nome é Franco!")

print("Olá, meu nome é Franco!")

print("Olá, meu nome é Franco!")

Esta série assume que você saiba criar um projeto e executar código na linguagem escolhida. Caso você precise de ajuda, você pode assistir aos vídeos do canal do autor no YouTube:

• GDScript usando o motor Godot Engine;
• JavaScript (em navegador e linha de comando com Node.js), HTML e CSS;
• Python em linha de comando e usando o IDE Thonny;
• Lua em linha de comando e usando o IDE ZeroBrane Studio.

Para GDScript, também há uma versão escrita ilustrando a criação de um projeto para Godot Engine. Para as demais linguagens, você pode consultar a seção Pré-Requisitos no início desta página.

Para começar, crie um arquivo ou projeto em seu editor de texto ou IDE favorito. Em seguida, execute o projeto.

Para JavaScript, você pode usar o console embutido de seu navegador (atalho: F12).

Se tudo estiver correto, a mensagem deverá aparecer no console (terminal) de seu interpretador de comando ou IDE. Altere Franco para o seu nome, contemple os resultados.

Despeça-se do console. O console cumpriu o papel de saída de dados para Ideias, Regras, Simulação. Doravante, saída em console será complementar, como recurso para log ou depuração.

É hora de iniciar um ambiente gráfico.

O Segundo Passo: a Janela Gráfica

Se você estiver usando GDScript, o motor Godot Engine já criou uma janela para você. Ou seja, dois passos em um único.

As demais linguagens requerem código adicional para a criação de uma janela gráfica.

Canvas em HTML para JavaScript

JavaScript, em particular, precisará de um arquivo HTML auxiliar. O arquivo pode-se chamar index.html (ou outro nome de sua preferência). O código assume que o nome do arquivo JavaScript será script.js. Caso você escolha outro nome, lembre-se de alterá-lo no arquivo HTML criado. Da mesma forma, o valor fornecido como id para a tag canvas é importante. Caso você troque o valor algo para algo como area-desenho, lembre-se de modificar o código do arquivo JavaScript que será criado em breve.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <title>Meu Primeiro Programa com Gráficos</title>
    <meta name="author" content="Franco Eusébio Garcia">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <div style="text-align: center;">
      <canvas id="canvas"
              width="1"
              height="1"
      >
          Acessibilidade: texto alternativo para conteúdo gráfico.
      </canvas>
    </div>

    <!-- NOTA Atualizar com nome do arquivo JavaScript. -->
    <script src="./script.js"></script>
  </body>
</html>

Você poderá usar esse arquivo HTML para vários projetos.

Após criar o arquivo HTML e arquivo JavaScript da próxima seção, você deverá abrir o arquivo HTML no navegador de sua preferência para executar o projeto.

Para acessibilidade, você pode alterar o texto entre as tags canvas para uma descrição do que será representado. Esse é um recurso importante para pessoas que usam tecnologias como leitores de tela possam entender o conteúdo. Para este tópico, você poderia modificar o texto para algo como "O canvas apresenta a mensagem 'Olá, meu nome é Franco!'.". Mais tarde, você poderá atualizá-lo com a segunda mensagem.

Infelizmente, o conteúdo inicial desta série não será universalmente acessível, pois falta introduzir recursos adicionais de programação para fazê-lo. Cada passo a seu tempo.

Posto o adendo, HTML não é uma linguagem de interesse neste momento. A honra pertence às linguagens GDScript, JavaScript, Python e Lua.

GDScript, JavaScript, Python e Lua

Em todas as linguagens, o objetivo será criar uma janela ou área para desenho. Para este momento, ela pode ter 320 pixels (px) de largura e 240 px de altura. Assim:

• Em GDScript, basta modificar o tamanho da janela.
• Em JavaScript, o objetivo é obter uma referência para o canvas e ajustá-lo para o tamanho desejado;
• Em Python, o objetivo é iniciar uma janela usando PyGame e ajustar o tamanho;
• Em Lua, o objetivo é iniciar uma janela usando LÖVE (Love2D) e ajustar o tamanho.

extends Node

func _ready():
    OS.set_window_size(Vector2(320, 240))

    print("Olá, meu nome é Franco!")

let canvas = document.getElementById("canvas")
let context = canvas.getContext("2d")

canvas.width = 320
canvas.height = 240

console.log("Olá, meu nome é Franco!")

import pygame

pygame.init()
# Os parênteses adicionais são importantes (trata-se de uma Tuple em Python).
window = pygame.display.set_mode((320, 240))

print("Olá, meu nome é Franco!")

pygame.quit()

-- NOTA O arquivo deve chamar-se "main.lua" (sem aspas).
function love.load()
    love.window.setMode(320, 240)

    print("Olá, meu nome é Franco!")
end

Alguns exemplos já utilizam variáveis e atribuições. Python e Lua também usam bibliotecas.

Caso você esteja começando a programar agora, o = nos exemplos não é um operador lógico de igualdade, como em Matemática. Ele representa uma atribuição, isto é, o armazenamento de um valor na memória que pode ser acessado por um nome. Por exemplo, no código em JavaScript, canvas é uma variável que armazena uma referência o canvas criado em HTML.

No mais, você pode alterar Olá, meu nome é Franco! para qualquer outro texto de sua escolha. O único requisito é que ele esteja entre aspas duplas e não contenha quebras de linha explícitas (isto é, todo o texto deve estar em uma única linha). Em programação, o texto definido possui um tipo chamado cadeia de caracteres (string).

Em Aprenda Programação, toda chamada de subrotina (função, procedimento ou método) ou todo novo tipo de dados composto fornecia um link para documentação. Desta vez, o autor deixará você responsável por pesquisar pela documentação. Para descobrir o que uma chamada faz, você pode buscar pelo nome e ler o texto descritivo.

Pratique consultar pela documentação:

• GDScript: documentação para a linguagem;
• JavaScript: documentação para a linguagem;
• Python: documentação para a linguagem e documentação para PyGame;
• Lua: documentação para a linguagem (Lua 5.1) e documentação para LÖVE.

Praticamente todos os links possuem um campo para buscas. Em Lua, a documentação está em uma única página. Você pode procurar por entradas usando o atalho Ctrl F (busca ou search).

O Terceiro Passo: Título da Janela

Quando se cria uma biblioteca, um framework ou um motor (engine) para renderização (desenho na tela), é comum começar por primitivas como pixels e linhas. O desenho de texto para representar uma palavra é um pouco mais complexo.

Caso você tenha lido o tópico de Arquivos em Aprenda Programação, você já conhece uma forma de desenhar texto como uma imagem. Em Ideias, Regras, Simulação, a criação de um projeto para rasterização de fontes requer conceitos que serão introduzidos no futuro.

Uma alternativa simples para escrever texto em uma janela antes de implementar um rasterizador consiste em usar o título da janela. O título da janela permite escrever uma única linha curta de texto usando uma cadeia de caracteres. Isso pode ser útil para depuração, enquanto ainda não se implementou um rasterizador para texto.

extends Node

func _ready():
    OS.set_window_size(Vector2(320, 240))
    OS.set_window_title("Olá, meu nome é Franco!")

let canvas = document.getElementById("canvas")
let context = canvas.getContext("2d")

canvas.width = 320
canvas.height = 240

document.title = "Olá, meu nome é Franco!"

import pygame
import sys

pygame.init()
window = pygame.display.set_mode((320, 240))
pygame.display.set_caption("Olá, meu nome é Franco!")

while (True):
    for event in pygame.event.get():
        if (event.type == pygame.QUIT):
            pygame.quit()
            sys.exit(0)

function love.load()
    love.window.setMode(320, 240)
    love.window.setTitle("Olá, meu nome é Franco!")
end

O código em Python usando PyGame é um pouco mais complexo que os demais. Ele utiliza uma combinação de estruturas de repetição e condição para manter a janela aberta, assim como fechá-la ao se usar o atalho padrão (normalmente Alt F4) ou o ícone de fechar a janela (tipicamente um X). Neste momento, não é necessário preocupar-se com elas; condições e repetições (ou laços) serão comentadas em breve.

Caso você já queira conhecê-las, consulte Aprenda Programação:

• Estruturas de condição;
• Estruturas de repetição.

Por trás das cenas, GDScript com Godot Engine e Lua com LÖVE também definem estruturas condicionais e de repetição com o mesmo objetivo. Contudo, elas são abstraídas pela implementação. Godot Engine e LÖVE são motores de jogos digitais (game engines). Motores (e frameworks, em geral) são estruturas de nível mais alto que uma biblioteca como PyGame. Frameworks adotam convenções pré-definidas para certas funcionalidades. Em outras palavras, troca-se liberdade (e, por vezes, flexibilidade) por maior conveniência de uso.

Algo similar ocorre versão em JavaScript. No caso, o navegador é o responsável por controlar o ciclo de vida do canvas na janela aberta.

Quarto Passo: Olá, Mundo! na Janela

Godot Engine, o canvas de HTML, PyGame e LÖVE fornecem recursos para a escrita de texto na janela. Assim, não é necessário usar o título como alternativa (leia-se "gambiarra"); basta escrever texto diretamente usando os recursos de cada implementação.

Para escrever texto em uma janela, é necessário fornecer um par ordenado (x, y) como posição inicial para o desenho. Em sistemas gráficos, a origem (0, 0) normalmente é representada no canto superior esquerdo. Os valores de x aumentam para a direita. Os valores de y aumentam para baixo.

Assim, desenhar texto na posição (10, 20) significa que ele começará deslocado 10 pixels para a direita e 20 pixels para baixo. Os próximos exemplos escrevem Olá, meu nome é Franco! nessa posição.

extends Node

func _ready():
    OS.set_window_size(Vector2(320, 240))
    OS.set_window_title("Olá, meu nome é Franco!")

    var label = Label.new()
    label.text = "Olá, meu nome é Franco!"
    label.rect_position.x = 10
    label.rect_position.y = 20
    add_child(label)

let canvas = document.getElementById("canvas")
let context = canvas.getContext("2d")

canvas.width = 320
canvas.height = 240

document.title = "Olá, meu nome é Franco!"

context.clearRect(0, 0, canvas.width, canvas.height)
context.fillText("Olá, meu nome é Franco!", 10, 20)

import pygame
import sys

pygame.init()
window = pygame.display.set_mode((320, 240))
pygame.display.set_caption("Olá, meu nome é Franco!")

font = pygame.font.Font(None, 20)
text = font.render("Olá, meu nome é Franco!", True, (255, 255, 255))
window.blit(text, (10, 20))
pygame.display.flip()

while (True):
    for event in pygame.event.get():
        if (event.type == pygame.QUIT):
            pygame.quit()
            sys.exit(0)

function love.load()
    love.window.setMode(320, 240)
    love.window.setTitle("Olá, meu nome é Franco!")
end

function love.draw()
    love.graphics.setColor(1.0, 1.0, 1.0)
    love.graphics.print("Olá, meu nome é Franco!", 10, 20)
end

O resultado será semelhante ao ilustrado no canvas a seguir.

Em todos os casos, desenhar um texto na janela é algo mais complexo que escrevê-lo em um console usando print() ou console.log(). Por isso materiais introdutórios (e mesmo materiais para tópicos complexos e avançados) comumente usam o console ao invés de gráficos: a informação passada na saída do console poder ser a mesma, e é muito mais simples fazê-lo.

Contudo, desenhar o texto usando uma biblioteca não é algo impossível. Certamente é mais trabalhoso e exige mais linhas de código, mas isso poderá ser resolvido em breve, com a criação de uma subrotina para o desenho do texto.

Neste momento, o desenho de texto é mais simples em JavaScript usando canvas e Lua usando LÖVE. A versão em GDScript é um pouco mais complexa.

A versão em Python usando PyGame é a mais complexa das quatro. Por outro lado, ela é a que apresenta com maior clareza o que está sendo feito pelo computador:

1. Escolhe-se uma fonte para o desenho;
2. Escolhe-se o texto a ser escrito e uma cor. No caso, (255, 255, 255) é a cor branca;
3. Renderiza-se o texto como uma imagem bitmap. Um bitmap ou mapa de bits é uma matriz (bastante simplificadamente, uma tabela) que mapeia cores a posições de uma área retangular. Cada posição tem uma cor corresponde a um pixel na tela;
4. Desenha-se o bitmap na janela.

Embora um pouco mais longo e complexo, o processo é mais ilustrativo. Agora você entende como o texto que aparece em sua tela é desenhado. O computador não sabe o que é um texto; ele apenas colore os pixels escolhidos com as cores definidas.

É importante notar que o texto é desenhado como uma imagem em todos os exemplos. Caso você tente selecionar o texto usando o mouse, não será possível. Embora talvez essa seja uma pequena inconveniência para você, ela é uma barreira de acessibilidade para algumas pessoas. Por exemplo, o conteúdo é inacessível a pessoas cegas.

Neste momento, uma alternativa poderia ser continuar a escrever o texto no console. Outra opção seria copiar o texto para a área de transferência (clipboard). Por exemplo, em GDScript, isso poderia ser feito usando OS.clipboard.

extends Node

func _ready():
    OS.set_window_size(Vector2(320, 240))
    OS.set_window_title("Olá, meu nome é Franco!")

    var label = Label.new()
    label.text = "Olá, meu nome é Franco!"
    label.rect_position.x = 10
    label.rect_position.y = 20
    add_child(label)

    OS.clipboard = "Olá, meu nome é Franco!"

Embora melhores que nada, elas não são solução ideais.

Em algum momento, a série comentará sobre a criação de conteúdo multimídia (mais) acessível. Infelizmente, esse ainda não é o momento, pois seria preciso mais que uma janela. Caso você tenha curiosidade, você pode procurar conhecer o que são leitores de tela e sistemas de síntese de voz (como text-to-speech, também conhecido pela sigla TTS).

Quinto Passo: Duas Linhas de Texto

O que fazer após escrever a primeira linha de texto?

Escrever a segunda.

extends Node

func _ready():
    OS.set_window_size(Vector2(320, 240))
    OS.set_window_title("Olá, meu nome é Franco!")

    var label = Label.new()
    label.text = "Olá, meu nome é Franco!"
    label.rect_position.x = 10
    label.rect_position.y = 20
    add_child(label)

    var website = Label.new()
    website.text = "www.francogarcia.com"
    website.rect_position.x = 10
    website.rect_position.y = 40
    add_child(website)

let canvas = document.getElementById("canvas")
let context = canvas.getContext("2d")

canvas.width = 320
canvas.height = 240

document.title = "Olá, meu nome é Franco!"

context.clearRect(0, 0, canvas.width, canvas.height)
context.fillText("Olá, meu nome é Franco!", 10, 20)
context.fillText("www.francogarcia.com", 10, 40)

import pygame
import sys

pygame.init()
window = pygame.display.set_mode((320, 240))
pygame.display.set_caption("Olá, meu nome é Franco!")

font = pygame.font.Font(None, 20)
text = font.render("Olá, meu nome é Franco!", True, (255, 255, 255))
window.blit(text, (10, 20))

website = font.render("www.francogarcia.com", True, (255, 255, 255))
window.blit(website, (10, 40))

pygame.display.flip()

while (True):
    for event in pygame.event.get():
        if (event.type == pygame.QUIT):
            pygame.quit()
            sys.exit(0)

function love.load()
    love.window.setMode(320, 240)
    love.window.setTitle("Olá, meu nome é Franco!")
end

function love.draw()
    love.graphics.setColor(1.0, 1.0, 1.0)
    love.graphics.print("Olá, meu nome é Franco!", 10, 20)
    love.graphics.print("www.francogarcia.com", 10, 40)
end

O resultado será semelhante ao ilustrado no canvas a seguir.

Compare o novo código com o anterior. O que mudou?

Em todas as versões, apenas duplicou-se a parte essencial, e trocou-se a mensagem e a posição para desenho. Para manter o segundo texto alinhado ao primeiro, manteve-se o valor de x como 20 e aumentou-se o valor de y para 40.

Como você escreveria a terceira linha?

Sexto Passo: Cores

Algumas implementações (como Lua com LÖVE) mencionaram cores. Cores podem ser usadas tanto para o fundo, quanto para o texto.

Antes de modificá-las, convém saber que cores em computadores são representadas como valores em sistemas de cores. Para sistemas multimídia, os sistemas de cores Red, Green e Blue (RGB; Vermelho, Verde, Azul) e Red, Green, Blue e Alpha (RGBA; Vermelho, Verde, Azul, Alfa, que representa a transparência) são comumente usados.

Nos sistemas de cores RGB e RGBA, cores são compostas por combinações de tons das cores primárias vermelho, verde e azul (por isso os nomes). Cada cor primária pode possui um valor entre um mínimo e um máximo.

Entretanto, o valor pode ser escrito de duas formas, dependendo da implementação:

1. Como um número real, compreendido entre 0.0 (valor mínimo) e 1.0 (valor máximo). Pode-se entendê-lo como uma porcentagem da participação da cor primária para a composição da cor final;
2. Como um número inteiro, comumente compreendido entre 0 (valor mínimo) e 255 (valor máximo). Neste caso, não é possível escolher um número decimal (127 é válido, mas 12.34 não é). Os possíveis valores mínimo e máximo dependem do número de bytes usados para codificar a cor. Um byte (8 bits) permite codificar 256 valores diferentes, por isso o intervalo. A explicação está disponível em Aprenda Programação: Aritmética.

O valor zero (0) para todas as cores primárias resulta em preto. O valor máximo (1.0 ou 255) para todas as cores primárias resulta em branco.

Além disso, o valor de alfa determina a transparência. O valor zero (0) significa que a cor será 100% transparente. O valor máximo (1.0 ou 255) significa que a cor será 100% opaca. Qualquer outro valor significa que a imagem terá transparência intermediária. Quanto mais próximo de zero, maior a transparência.

extends Node

func _ready():
    OS.set_window_size(Vector2(320, 240))
    OS.set_window_title("Olá, meu nome é Franco!")

    VisualServer.set_default_clear_color(Color(1.0, 1.0, 1.0))

    var label = Label.new()
    label.text = "Olá, meu nome é Franco!"
    label.rect_position.x = 10
    label.rect_position.y = 20
    label.modulate = Color(1.0, 0.0, 0.0)
    add_child(label)

    var website = Label.new()
    website.text = "www.francogarcia.com"
    website.rect_position.x = 10
    website.rect_position.y = 40
    website.modulate = Color(0.3, 0.6, 0.9, 0.5)
    add_child(website)

let canvas = document.getElementById("canvas")
let context = canvas.getContext("2d")

canvas.width = 320
canvas.height = 240

document.title = "Olá, meu nome é Franco!"

context.clearRect(0, 0, canvas.width, canvas.height)
context.rect(0, 0, canvas.width, canvas.height)
context.fillStyle = "black"
context.fill()

context.fillStyle = "rgb(255, 0, 0)"
context.fillText("Olá, meu nome é Franco!", 10, 20)
context.fillStyle = `rgba(${0.3 * 255}, ${0.6 * 255}, ${0.9 * 255}, 255)`
context.fillText("www.francogarcia.com", 10, 40)

import pygame
import sys

pygame.init()
window = pygame.display.set_mode((320, 240))
pygame.display.set_caption("Olá, meu nome é Franco!")

window.fill((255, 255, 255))

font = pygame.font.Font(None, 20)
text = font.render("Olá, meu nome é Franco!", True, (255, 0, 0))
window.blit(text, (10, 20))

website = font.render("www.francogarcia.com", True, (0.3 * 255, 0.6 * 255, 0.9 * 255))
website.set_alpha(127)
window.blit(website, (10, 40))

pygame.display.flip()

while (True):
    for event in pygame.event.get():
        if (event.type == pygame.QUIT):
            pygame.quit()
            sys.exit(0)

function love.load()
    love.window.setMode(320, 240)
    love.window.setTitle("Olá, meu nome é Franco!")
end

function love.draw()
    love.graphics.setBackgroundColor(1.0, 1.0, 1.0)

    love.graphics.setColor(1.0, 0.0, 0.0)
    love.graphics.print("Olá, meu nome é Franco!", 10, 20)
    love.graphics.setColor(0.3, 0.6, 0.9, 0.5)
    love.graphics.print("www.francogarcia.com", 10, 40)
end

Na versão em JavaScript, resultado será semelhante ao ilustrado no canvas a seguir. Nas demais linguagens, o fundo será branco.

No código modificado, a versão em Lua com LÖVE torna-se a mais simples e concisa. A versão em JavaScript torna-se um pouco mais complexa, pois é necessário desenhar um retângulo para colorir todo o canvas. As versões em GDScript e Python continuam similares: uma chamada para escolher ou aplicar a cor de fundo, alguns ajustes para a cor do texto.

Além disso, GDScript e Lua usam valores reais para as cores primárias em RGB e RGBA, enquanto JavaScript e Python usam valores inteiros. Os exemplos mostram uma forma simples de converter valores cores em escala real (0.0 a 1.0) para inteiros: basta multiplicá-los pela percentagem desejada. Para fazer a conversão inversa (cores como inteiros para números reais), pode-se usar divisões por 255.0 (adicionar .0 é necessário em linguagens como GDScript para forçar uma divisão real). Por exemplo, na versão em GDScript:

label.modulate = Color(203 / 255.0, 127 / 255.0, 127 / 255.0, 127 / 255.0)

Em ambos os casos, combina-se uma percentagem do valor total para o tom com o valor máximo para cada cor primária. A multiplicação ou a divisão geram o valor esperado para converter de uma representação para a outra. Outra forma de converter é usar uma calculadora de cores ou programas chamados color pickers ou color wheels, que permitem selecionar cores.

Assim, agora você pode escrever textos coloridos sobre um fundo colorido. Para fins de comparação, os próximos exemplos fornecem código equivalente para a criação de um programa para console (terminal) com a mesma saída em texto sem formatação (plain text).

extends Node

func _ready():
    print("Olá, meu nome é Franco!")
    print("www.francogarcia.com")

console.log("Olá, meu nome é Franco!")
console.log("www.francogarcia.com")

print("Olá, meu nome é Franco!")
print("www.francogarcia.com")

print("Olá, meu nome é Franco!")
print("www.francogarcia.com")

A versão para console é mais concisa e simples para uma pessoa iniciante entender; por isso a escolha em materiais introdutórios. Caso se escolhesse modificar as cores no console, os exemplos ficariam um pouco mais complexos.

Conceitos Abordados de Aprenda Programação

Conceitos de Aprenda Programação abordados neste tópico:

1. Ponto de entrada;
2. Saída;
3. Tipos de dados;
4. Variáveis;
5. Aritmética;
6. Bibliotecas.

O modelo RGB foi discutido anteriormente em Arquivos (Portable Pixmap Format ou PPM). A criação de um rasterizador de texto para imagem também.

Adicionalmente, para Python foi necessário usar comparações e estruturas de repetição (laços ou loops) para manter a janela aberta, assim como fechá-la.

Novos Itens para Seu Inventário

Habilidades de Pensamento Computacional:

• Ponto de Entrada;
• Saída;
• Tipos de dados;
• Variáveis e constantes;
• Aritmética.

Ferramentas:

• Bibliotecas, frameworks, e/ou motores para jogos (game engines):
  • Python: PyGame;
  • Lua: LÖVE (Love2D);
  • GDScript: Godot Engine;
  • JavaScript: HTML canvas.
• Cores:
  • Calculadoras de cores;
  • Color pickers;
  • Color wheels.

Habilidades:

• Criação de janela;
• Ajuste de título de janela;
• Uso de título de janela para mensagem de depuração;
• Escrita de texto em janela.

Conceitos:

• Simulação;
• Modelos;
• Cores;
• Sistemas de cores (RGB, RGBA).

Recursos de programação:

• Escrita em ambiente gráfico.

Pratique

Para aprender programação, prática deliberada deve acompanhar conceitos. Tente fazer os próximos exercícios para praticar.

1. Modifique o tamanho da janela. Por exemplo, ajuste os valores de x e y, nessa ordem, para:

   • Resolução HD: 1280 x 720;
   • Resolução Full HD: 1920 x 1080;
   • Resolução de telas de laptops mais antigos ou com placas de vídeo básicas: 1024 x 768 ou 1366 x 768;
   • Zero para ambos os valores. O que acontece?
   • Dois valores negativos. O que acontece?

2. Modifique o texto de uma das mensagens na janela;

3. Escreva um terceira mensagem na janela;

4. Escreva duas mensagens diferentes começando na mesma posição (por exemplo, (0, 0)). O que ocorre?

5. Troque cores de fundo e do texto para suas cores favoritas;

6. Utilize cores transparentes. Escreva duas mensagens nas mesmas posições e observe os resultados;

7. Escreva uma mensagem longa. O objetivo é que o texto não caiba na tela. O que acontece?

8. O que acontece caso:

   • Você escolher uma posição que esteja fora da janela para escrever o texto?
   • Você escolher uma posição com valores negativos para escrever o texto?

9. Como deixar o programa em tela cheia (full screen), isto é, remover as bordas e barras da janela para que ela ocupe totalmente as dimensões (resolução) do monitor? Pesquise. Caso você o faça, você pode apertar Alt TAB para alternar entre janelas abertas usando o teclado.

   Para fechar a janela com uma tecla específica, será preciso usar, por exemplo, entrada e estruturas de condição. Em particular, a entrada deverá ser não-bloqueante. Assim, ainda não é possível fazê-lo nesta nova série (mas será em tópicos futuros).

10. Como fazer para usar uma fonte personalizada ao invés da fonte padrão? Procure a solução na Internet para a tecnologia de sua escolha.

Aprofundamentos

Em Ideias, Regras, Simulação, esta seção apresentará conteúdo complementar. Quando ela existir nos próximos tópicos, as subseções detalharão conceitos e técnicas que sejam restritas a tecnologias específicas. Caso alguma subseção inclua uma linguagem de programação de sua escolha, convém estudá-la.

GDScript: Usando o Editor de Godot Engine

O exemplo em GDScript criou um rótulo (label) usando Label para escrever o texto. Embora, como no exemplo, isso possa ser feito programaticamente em GDScript, é mais comum criar parte do conteúdo usando o editor integrado ao motor Godot Engine.

Para descobrir como fazê-lo, você pode consultar a página de configuração de ambiente para GDScript (Godot).

GDScript: Escrevendo Texto Sem Usar um Rótulo (Label)

Embora a forma usual de escrever texto em GDScript consista em usar um Label, também é possível fazê-lo usando uma Interfaces de Programação de Aplicações (Application Programming Interfaces ou API) de nível mais baixo.

# Raíz deve ser um Node que permita desenhar usando _draw().
extends Control

var default_font = get_theme_default_font()

func _ready():
    OS.set_window_size(Vector2(320, 240))
    OS.set_window_title("Olá, meu nome é Franco!")

func _draw():
    VisualServer.set_default_clear_color(Color(1.0, 1.0, 1.0))

    draw_string(default_font, Vector2(10, 20), "Olá, meu nome é Franco!", Color(1.0, 0.0, 0.0))
    draw_string(default_font, Vector2(10, 40), "www.francogarcia.com", Color(0.3, 0.6, 0.9, 0.5))

Deve-se notar que a cena do script deve ter um tipo que permita usar _draw(), como Control. Node, por exemplo, não define o método para desenho.

Na nova versão, o código torna-se mais próximo do escrito para as outras linguagens de programação.

Python com PyGame: Fontes True Type usando FreeType

PyGame fornece um módulo adicional para desenhar fontes TrueType, Type 1, e OpenType usando a biblioteca FreeType. A implementação alternativa permite ajustar a transparência diretamente na chamada de render().

import pygame
import sys

pygame.init()
window = pygame.display.set_mode((320, 240))
pygame.display.set_caption("Olá, meu nome é Franco!")

window.fill((255, 255, 255))

font = pygame.freetype.Font(None, 20)
text, text_rectangle = font.render("Olá, meu nome é Franco!", (255, 0, 0))
window.blit(text, (10, 20))

website_text, website_rectangle = font.render("www.francogarcia.com", (0.3 * 255, 0.6 * 255, 0.9 * 255, 127))
window.blit(website_text, (10, 40))

pygame.display.flip()

while (True):
    for event in pygame.event.get():
        if (event.type == pygame.QUIT):
            pygame.quit()
            sys.exit(0)

As mudanças estão na criação da fonte (pygame.freetype.Font()) e na forma de desenhá-la.

A implementação usando FreeType é mais moderna que a convencional. Caso você prefira, você pode usar essa nova versão.

Próximos Passos

Este foi o tópico introdutório de Ideias, Regras, Simulação.

Agora você sabe criar uma janela em GDScript, Python e Lua, assim como uma região para desenho em JavaScript. Nas quatro linguagens, você também sabe alterar o título e escrever texto em uma posição arbitrária.

Talvez parte dos códigos seja meio difícil de entender -- especialmente na versão em Python usando PyGame. Não há problemas. Um passo por vez (ou, caso você tenha pressa, comece Aprenda Programação).

Os próximos tópicos começarão a incorporar recursos adicionais de linguagens de programação e sobre conteúdo multimídia. Após a escrita de texto, um próximo passo pode ser o desenho de imagens primitivas. Para isso, o próximo tópico introduzirá pixels.

Suas opiniões sobre a série serão fundamentais para que eu possa tornar o material mais acessível e simples para mais pessoas.

Além disso, se você considerou este material útil, considere compartilhá-lo. Se possível, use as hashtags #IdeiasRegrasSimulação e #FrancoGarciaCom.

Ideias, Regras, Simulação

1. Motivação;
2. Introdução: Janela e Olá Mundo;
3. Pixels e primitivas gráficas (pontos, linhas, e arcos);
4. Aleatoriedade e ruído;
5. Moedas e dados, retângulos e quadrados;
6. Desenhando com primitivas gráficas (contornos e preenchimento para círculos, elipses e polígonos);
7. Salvando e carregando arquivos de imagens;
8. ...

A escrita do material está em progresso; portanto, se você chegou muito cedo e os itens anteriores não possuem links, por favor, retorne a esta página para conferir as atualizações.

Agradeço a atenção. Até a próxima!