a few of my favorite things

This semester, I’m back in the classroom to teach an elective for middle school called Code+Art! I’m BEYOND excited!!

The premise of the class is that we will be coding our way through art history by learning about some famous artists and attempting to recreate their art work using code (Javascript, via P5.js, to be specific). In parallel, students will also be asked to work on original projects that are inspired by and uses techniques we are learning through the art reproduction projects.

I hope to be able to document this course and my own journey tinkering and playing with code on this blog (and maybe eventually, if I feel more ambitious, a less bloggish space to hold the curriculum). If you are also a teacher hoping to engage young people with creative coding, please feel free to use, adapt, remix anything you see here. If you would be so kind as to include an attribution back to me and/or let me know you are using this stuff, either by commenting here or just tweet at me @angichau, I would so appreciate it!

Since it had been a while since I’ve coded in Javascript, my first challenge was to get back into the swing of things. So I decided to generate the header image for my class website using P5!

function setup() {
  createCanvas(1000, 400);
}

function draw() {
  background(0);
  for (var x=0; x<1000; x+=10) {
    for (var y=0; y<400; y+=10) {
      noStroke();
      fill(random(0,x), random(0,y), random(0,x+y));
      ellipse(x,y,10,10);
    }
  }
}

Less than 10 lines of code for a fun generative sketch – I love P5!

To make one’s head hurt less, simply add one line to setup() so only one draw function call happens:

function setup() {
  createCanvas(1000, 400);
  noLoop();  // add this line to not re-draw continuously
}

function draw() {
  background(0);
  for (var x=0; x<1000; x+=10) {
    for (var y=0; y<400; y+=10) {
      noStroke();
      fill(random(0,x), random(0,y), random(0,x+y));
      ellipse(x,y,10,10);
    }
  }
}