DEV Community

Cover image for Pixelate characters with canvas, and draw generative art!

Pixelate characters with canvas, and draw generative art!

Masato Ohba on May 12, 2018

As I posted before, I'm learning generative art with p5.js. In this article, I introduce a tool, "String Pixelater", which I made through the lear...
Read full post
Collapse
 
gmartigny profile image
Guillaume Martigny •

Nice results !
I used pretty much the same technique to make Fizzle. (but without P5)

Collapse
 
bytegasm profile image
Bytegasm! •

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)

Collapse
 
ohbarye profile image
Masato Ohba •

@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.

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.