Gráfico - Experimentos em Programação Criativa - 2

Essa é mais uma tentativa de reproduzir uma imagem utilizando computação criativa, puramente para aprender coisas novas e passar o tempo. Esses artigos são principalmente criados como uma forma de catalogar o processo de implementação para referencia futura quando eu estiver desenvolvendo novas coisas.

Inspiração

A imagem que tentei replicar através de código desta vez é a seguinte:

Grid de pontos com uma linha ligando

E o meu resultado é o seguinte:

Um parecido nonagono com pontos conectando as extremidades

Bastante diferente do original, minha ideia era de fazer algo que a cada atualização mudasse o estilo, com quadrados e pontos maiores ou menores aleatóriamente.

Implementação

Usarei novamento o editor do p5 para essa implementação.

Passo 1

Começando de forma simples, vamos apenas adicionar a borda. Adicionei um cógigo boilerplate de início, definindo as corees do fundo e stroke, o tamanho da margem.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
let strokeColor = 10
let backgroundColor = 245
let frameMargin // distância entre o quadro e a borda do canvas

function setup() {
createCanvas(windowWidth, windowHeight)
frameMargin = round(random(50, 150))
}

function draw() {
background(backgroundColor)
drawFrame()
noLoop()
}

function drawFrame() {
noFill()
strokeWeight(4)
stroke(strokeColor)
const startAt = [frameMargin, frameMargin]
const size = [windowWidth - frameMargin * 2, windowHeight - frameMargin * 2]

rect(...startAt, ...size)

return [startAt, size]
}

Canvas com apenas um quadrado

Passo 2

O segundo passo foi adicionar os pontos dentro do quadro. Criei primeiro uma função para gerar os pontos, utilizando alguns parâmetros para configurar os posicionamentos e tamanho dos pontos.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
let padding // distância entre o quadro e os pontos
let dotRadius // tamanho dos pontos
let dotPadding // distância entre os ponto

function setup() {
...
padding = round(random(-100, 100))
dotRadius = random(0.1, 10)
dotPadding = round(random(15, 30))
}

function getDots(frameBorders) {
const startAt = [
frameBorders[0][0] + padding,
frameBorders[0][1] + padding
]
const endAt = [
frameBorders[0][0] + frameBorders[1][0] - padding,
frameBorders[0][1] + frameBorders[1][1] - padding
]

let curLine = startAt[0]
let col = startAt[1]
const dots = []

while (curLine < endAt[0]) {
const columns = []
while (col < endAt[1]) {
const x = curLine + dotRadius / 2
const y = col + dotRadius / 2
columns.push(createVector(x, y))
col += dotPadding
}
curLine += dotPadding
col = startAt[1]
dots.push(columns)
}

return dots
}

E com esses pontos, podemos fácilmente desenhá-los na tela. Adicionei também um parâmetro para definir se os círculos devem ser preenchidos ou não.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
let shouldFill // os pontos devem ser preenchidos?

function setup() {
...
shouldFill = random() > 0.5
}

function draw() {
...
const dots = getDots(frameBorders)
drawDots(dots)
...
}

function drawDots(dots) {
if (shouldFill) fill(strokeColor)

for (let i = 0; i < dots.length; i++) {
for (let j = 0; j < dots[i].length; j++) {
circle(dots[i][j].x, dots[i][j].y, dotRadius)
}
}
}

Assim podemos ter alguns resultados diferentes, como os seguintes

Canvas pontos variante 1
Canvas pontos variante 2
Canvas pontos variante 3

Passo 3

O terceiro e último passo é desenhar a linha que atravessa o centro do quadro. O algoritmo para esse foi algo bem simples:

  1. Primeiro encontramos o centro da tela e selecionamos o ponto da primeira coluna;
  2. Enquanto tiver uma coluna a direita, escolhemos aleatóriamente um ponto acima ou abaixo;
  3. Desenhamos uma linha entre os dois pontos

O código para isso pode ser visto abaixo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
let lineRadius // largura da linha

function setup() {
...
lineRadius = random(1, 20)
}

function draw() {
...
drawWalker(dots)
...
}

function drawWalker(dots, startAtLine) {
stroke(strokeColor)
noFill()
strokeWeight(lineRadius)
strokeCap(ROUND) // para evitar que a linha fique com as pontas quadradas
strokeJoin(ROUND) // para evitar que a linha fique com as juntas quadradas

const middle = Math.round(dots[0].length / 2)
let selectedLine = middle
let selectedCol = 0
let previousLine = middle

beginShape()
while (selectedCol < dots.length) {
if (!dots[selectedCol] || !dots[selectedCol][selectedLine]) break
const dot = dots[selectedCol][selectedLine]

if (previousLine !== selectedLine) {
const prevDot = dots[selectedCol][previousLine]
vertex(prevDot.x, prevDot.y) // precisamos disso para que os pontos não sejam conectados diretamente, mas em 90º
}

vertex(dot.x, dot.y)

previousLine = selectedLine
const next = Math.round(random(-3, 3))
selectedLine += next


if (selectedLine < 0) selectedLine = 0
if (selectedLine === dots[0].length) selectedLine = dots[0].length -1

selectedCol++
}
endShape()
}

Canvas com linha

Próximos passos

Algumas outras ideias para evoluir essa brincadeira seriam:

  • Adicionar fendas ou laços como na imagem original, onde aleatóriamente poderiams quebrar a linha
  • Usar uma biblioteca, como o dat.gui para configurar as variáveis em tempo real, sem precisar executar o algoritmo múltiplas vezes para novos resultados
Código completo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
let strokeColor = 10
let backgroundColor = 245
let frameMargin // distância entre o quadro e a borda do canvas
let padding // distância entre o quadro e os pontos
let dotRadius // tamanho dos pontos
let dotPadding // distância entre os ponto
let shouldFill // os pontos devem ser vazados?
let lineRadius // largura da linha

function setup() {
createCanvas(windowWidth, windowHeight)
frameMargin = round(random(50, 150))
padding = round(random(-100, 100))
dotRadius = random(0.1, 10)
dotPadding = round(random(15, 30))
shouldFill = random() > 0.5
lineRadius = random(1, 20)
}

function draw() {
background(backgroundColor)
const frameBorders = drawFrame()
const dots = getDots(frameBorders)
drawDots(dots)
drawWalker(dots)
noLoop()
}

function drawFrame() {
noFill()
strokeWeight(4)
stroke(strokeColor)
const startAt = [frameMargin, frameMargin]
const size = [windowWidth - frameMargin * 2, windowHeight - frameMargin * 2]

rect(...startAt, ...size)

return [startAt, size]
}

function getDots(frameBorders) {
const startAt = [
frameBorders[0][0] + padding,
frameBorders[0][1] + padding
]
const endAt = [
frameBorders[0][0] + frameBorders[1][0] - padding,
frameBorders[0][1] + frameBorders[1][1] - padding
]

let curLine = startAt[0]
let col = startAt[1]
const dots = []

while (curLine < endAt[0]) {
const columns = []
while (col < endAt[1]) {
const x = curLine + dotRadius / 2
const y = col + dotRadius / 2
columns.push(createVector(x, y))
col += dotPadding
}
curLine += dotPadding
col = startAt[1]
dots.push(columns)
}

return dots
}

function drawDots(dots) {
if (shouldFill) fill(strokeColor)

for (let i = 0; i < dots.length; i++) {
for (let j = 0; j < dots[i].length; j++) {
circle(dots[i][j].x, dots[i][j].y, dotRadius)
}
}
}

function drawWalker(dots, startAtLine) {
stroke(strokeColor)
noFill()
strokeWeight(lineRadius)
strokeCap(ROUND) // para evitar que a linha fique com as pontas quadradas
strokeJoin(ROUND) // para evitar que a linha fique com as juntas quadradas

const middle = Math.round(dots[0].length / 2)
let selectedLine = middle
let selectedCol = 0
let previousLine = middle

beginShape()
while (selectedCol < dots.length) {
if (!dots[selectedCol] || !dots[selectedCol][selectedLine]) break
const dot = dots[selectedCol][selectedLine]

if (previousLine !== selectedLine) {
const prevDot = dots[selectedCol][previousLine]
vertex(prevDot.x, prevDot.y)
}

vertex(dot.x, dot.y)

previousLine = selectedLine
const next = Math.round(random(-3, 3))
selectedLine += next

if (selectedLine < 0) selectedLine = 0
if (selectedLine === dots[0].length) selectedLine = dots[0].length -1

selectedCol++
}
endShape()
}