interactive x-tree

let W = 500;

let f = 0;

let gr;

​

OPC.text('message1', 'Merry Christmas');

OPC.text('message2', 'To You');

OPC.slider('resolution', 4, 1, 20, 1);

OPC.slider('tree_sides', 4, 4, 16, 2);

OPC.toggle('star', true);

OPC.toggle('ribbons', true);

OPC.toggle('ornaments', true);

OPC.color('star_color', '#ffffff');

OPC.color('tree_color', '#ffffff');

OPC.color('ornaments_color', '#ffffff');

OPC.color('text_color', '#ffffff');

OPC.button('save_gif', 'Save to GIF');

​

setup = _ => {

  createCanvas(600, 600);

  gr = createGraphics(600, 600, WEBGL);

  gr.noStroke();

  noStroke();

  fill(255);

}

​

draw = _ => {

  // Tree

  gr.push();

  gr.background(0);

  gr.pointLight(255,255,255,0,-W,W)

  gr.pointLight(255,255,255,0,-W,-W)

  gr.pointLight(255,255,255,0,1000,0)

  gr.rotateX(0.6);

  let zz = 0;

  for (let z = 0; z < W; z+=resolution) {

    for (let i = 0; i < TAU; i += PI/(tree_sides/2)) {

      gr.push();

      gr.translate(0, -150, -z);

      gr.rotate(i + sin(z / 200 + f));

      // STAR

      if (z === 0 && star) {

        gr.push();

        gr.ambientLight(255);

        gr.fill(star_color);

        gr.translate(0, 0, 5);

        gr.ellipse(0, 0, 22, 99);

        gr.pop();

      }

      // RIBBONS

      if(ribbons) gr.circle(0, z * 0.7, 2);

      // ORNAMENTS

      if(ornaments) {

        if(z%100<zz){

          gr.push();

          gr.rotate(PI/tree_sides);

          let orpos = [3.5, 2.6, 2.4, 2.2, 2, 1.95, 1.9]

          let orloc = (tree_sides / 2) - 2

          gr.translate(0, z / orpos[orloc]);

          gr.fill(ornaments_color);

          gr.sphere(z/15,8);

          gr.pop();

        }

      }

      // COLOR

      let col = color(tree_color);

      let r = red(col) / 2;

      let g = green(col) / 2;

      let b = blue(col) / 2;

      let csin = sin(f * 3 + z / 15);

      col = color(csin * r + r, csin * g + g, csin * b + b)

      gr.fill(col);

      gr.ellipse(0, 0, z / 3, z);

      gr.pop();

    }

    zz = z%100;

  }

  gr.pop();

  // TEXT & TREE

  background(0);

  fill(text_color);

  image(gr, 0, -40);

  textSize(54);

  textAlign(CENTER);

  text(message1, 300, 70);

  text(message2, 300, 570);

  f -= 0.04

}

​

function buttonPressed(variableName, value) {

  if (variableName === 'save_gif') {

    saveGif('mySketch', 157, {'units': 'frames'}); // 158

  }

}