Tronicart

A playground for creative coding expeiments

A quiet corner of the internet where I share my explorations and musings at the crossroads of coding and creativity.

Tronicart began as a personal project, a way to document my own learning and to connect with others who find joy in the confluence of technology and art.

What is creative coding ?

For those new to the concept, creative coding is about writing software with the intent to create something expressive instead of something purely functional.

As an example, you could write a program that generates a piece of music, or a program that creates a visual artwork. The goal is to create something that is aesthetically pleasing or thought-provoking.

Here's a simple example of creative coding in action. The following code generates a random dots which move in a singular direction. Those that are within a certain distance of each other are connected by a line.

sketch((p5) => {
  let dotCount = 100
  let dots = []

  p5.setup = () => {
    p5.createCanvas(600, 600)
    p5.stroke(150)
    p5.fill(0)

    for (let i = 0; i < dotCount; i++) {
      dots.push({
        x: p5.random(p5.width),
        y: p5.random(p5.height),
        vx: p5.random(-1, 1),
        vy: p5.random(-1, 1)
      })
    }
  }

  p5.draw = () => {
    p5.clear()
    for (let i = 0; i < dotCount; i++) {
      const dot = dots[i]
      dot.x += dot.vx
      dot.y += dot.vy

      if (dot.x < 0 || dot.x > p5.width) {
        dot.vx *= -1
      }
      if (dot.y < 0 || dot.y > p5.height) {
        dot.vy *= -1
      }

      p5.ellipse(dot.x, dot.y, 5, 5)

      for (let j = 0; j < dotCount; j++) {
        if (i !== j) {
          const other = dots[j]
          const distance = p5.dist(dot.x, dot.y, other.x, other.y)
          if (distance < 70) {
            p5.line(dot.x, dot.y, other.x, other.y)
          }
        }
      }
    }

  }
})