DEV Community

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

ohbarye profile image
Masato Ohba Author

@torpoise 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, ( could be a better start point. In case of JavaScript, p5.js (

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.

function setup() {
  createCanvas(600, 400);

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.