let sliderR;

let sliderG;

let sliderB;

let buttonRandom;

let buttonSwitch;

let curve;

​

​

​

function setup() {

  colorMode(RGB);

​

  createCanvas(1324, 1624);

  sliderOrder = createSlider(1, 9, 5, 1);

  sliderOrder.style('width', '1024px');

  sliderOrder.position(150, 1144);

​

  sliderR = createSlider(0, 255, 0, 1);

  sliderR.style('width', '1024px');

  sliderR.position(150, 1244);

​

  sliderG = createSlider(0, 255, 0, 1);

  sliderG.style('width', '1024px');

  sliderG.position(150, 1344);

​

  sliderB = createSlider(0, 255, 0, 1);

  sliderB.style('width', '1024px');

  sliderB.position(150, 1444);

  buttonRandom = createButton("Random Color");

  buttonRandom.position(10, 1489);

  buttonRandom.size(150, 100);

  buttonRandom.mousePressed(randomColor);

  buttonRandom.style('font-size', '30px');

  buttonRandom.style('font-style', 'Verdana');

  buttonSwitch = createButton('Switch Curves');

  buttonSwitch.position(190, 1489);

  buttonSwitch.size(150, 100);

  buttonSwitch.mousePressed(toggleCurve);

  buttonSwitch.style('font-size', '30px');

  buttonSwitch.style('font-style', 'Verdana');

  randomColor();

  curve = "Hilbert";

​

​

​

​

}

​

​

​

function draw() {

​

​

  background(200);

  var red = sliderR.value();

  var green = sliderG.value();

  var blue = sliderB.value();

   sliderOrder.position(150, 1144);

   sliderR.position(150, 1244);

   sliderG.position(150, 1344);

   sliderB.position(150, 1444);

​

  textSize(50);

  strokeWeight(0);

​

  fill(0, 0, 0);

  text(curve, 550, 1550); 

  fill(red, green, blue);

  text('Order', 10, 1169);

  fill(red, 0, 0 );

  text('Red', 10, 1269);

  fill(0, green, 0 );

  text('Green', 10, 1369);

  fill(0, 0, blue);

  text('Blue', 10, 1469);

  translate(150, 50);

​

​

​

  var order = sliderOrder.value();

  var N = pow(2, order);

  var scale = 1024 / (N - 1);

  stroke(sliderR.value(), sliderG.value(), sliderB.value());

  var prev = [0, 0],

    curr;

​

  strokeWeight(min(1024 / N / 2, 40));

​

  for (var i = 0; i < N * N; i += 1) {

    if (curve === "Hilbert"){

    curr = hindex2xy(i, N);

    }

    else{

    strokeWeight(min(1024 / N / 4, 40));

    curr = zindex2xy(i, N)

    }

​

    line(prev[0] * scale, prev[1] * scale, curr[0] * scale, curr[1] * scale);

​

    prev = curr;

​

  }

​

}

​

​

function last2bits(x) {

  return (x & 3);

}

​

function hindex2xy(hindex, N) {

​

  var positions = [

    [0, 0],

    [0, 1],

    [1, 1],

    [1, 0]

  ];

​

  var tmp = positions[last2bits(hindex)];

  hindex = (hindex >>> 2);

​

  var x = tmp[0];

  var y = tmp[1];

​

  for (var n = 4; n <= N; n *= 2) {

    var n2 = n / 2;

​

    switch (last2bits(hindex)) {

      case 0:

        tmp = x;

        x = y;

        y = tmp;

        break;

​

      case 1:

        x = x;

        y = y + n2;

        break;

​

      case 2:

        x = x + n2;

        y = y + n2;

        break;

​

      case 3:

        tmp = y;

        y = (n2 - 1) - x;

        x = (n2 - 1) - tmp;

        x = x + n2;

        break;

    }

​

    hindex = (hindex >>> 2);

  }

  return [x, y];

}

​

function zindex2xy(zindex, N) {

​

  var positions = [

    [0, 0],

    [1, 0],

    [0, 1],

    [1, 1]

  ];

​

  var tmp = positions[last2bits(zindex)];

  zindex = (zindex >>> 2);

​

  var x = tmp[0];

  var y = tmp[1];

​

  for (var n = 4; n <= N; n *= 2) {

    var n2 = n / 2;

​

    switch (last2bits(zindex)) {

​

      case 1:

        x = x + n2;

        y = y;

        break;

​

      case 2:

        x = x;

        y = y + n2;

        break;

​

      case 3:

        y = y + n2;

        x = x + n2;

        break;

    }

​

    zindex = (zindex >>> 2);

  }

  return [x, y];

}

​

​

function randomColor(){

  sliderR.value(150+random()*100);

  sliderB.value(150+random()*100);

  sliderG.value(150+random()*100);

​

}

​

function toggleCurve(){

  if (curve === "Hilbert"){

      curve = "Z-curve";

      }

  else{

      curve = "Hilbert";

  }

​

}