Discussion on: Pixelate characters with canvas, and draw generative art!

View post

the idea of generative art sound pretty dope to me, any pointers to where I can start getting into it? (I'm good with css)

Masato Ohba • May 14 '18

@torpoise
processing.org/ is the best as far as I know. "Processing" is a language and an environment to draw visual arts with code.

If you're familiar with python, processing.py (py.processing.org/) could be a better start point. In case of JavaScript, p5.js (p5js.org/).

If you'd like to try it right now, there's an interactive online editor for p5.js. Visit either of the followings, then copy & paste my code below into the editor on the page and see what will be happening.

alpha.editor.p5js.org/ (No need to sign up)
openprocessing.org/user/128456 (Need to sign up, but it ensures better experience)

function setup() {
  createCanvas(600, 400);
  frameRate(4)
}

function draw() {
  background(255) // clear background at every frame

  for (var i = 100; i < 400; i++) {
    var r = random(200);

    stroke(color(random(r),random(i),random(i), 60));   

    line(300, r, i, 100)
    line(300, i, i, 100)

    line(i, i, i, 300)
    line(i, i, r, 300)
    line(i, r, i, 300)

    line(500, r + 200, i + 200, i)
  }
}

Aside from that, it's exciting to search artworks on Pinterest or anything with the keyword "generative art". That definitely motivates you.