var nReflections = 24;

var x = 0;

var mousePath = [];

​

var brush = {

  'x': 0,

  'y': 0,

  'distanceFromCenter': 0,

}

​

function setup() {

  createCanvas(600, 600);

  colorMode(HSB);

  textAlign(CENTER);

}

​

function draw() {

​

  background(20, 100, 80);

  updateBrush();

  kaleidoscope();

  moveRects();

}

​

/* -------------------------------------------------------------------*/

​

// Set brush.x and brush.y to position the brush

function updateBrush() {

  brush.x = mouseX;

  brush.y = mouseY;

}

​

​

// Create your custom brush here

function drawBrush() {

  //fill(0, 0, 100);

  // noStroke();

  stroke(100);

  strokeWeight(2);

  line(0, 0, 0, 200);

  line(-10, -100, -100, -50);

​

  push();

  fill(30,50,100);

  noStroke();

  ellipse(-20, -10, 5, 5);

  pop();

​

  ellipse(10, 0, 10, 10);

​

  push();

  fill(50,100,100);

  noStroke();

  ellipse(20, 50, 7, 7);

  pop();

​

}

​

function kaleidoscope() {

  // Get the angle and distance from draw point to center

  var baseAngle = 1 / nReflections * TAU;

  var x = brush.x - width / 2;

  var y = brush.y - height / 2;

  var center = createVector(0, 0);

  var position = createVector(x, y);

  var angle = atan2(position.y - center.y, position.x - center.x);

  var magnitude = center.dist(position);

  brush.distanceFromCenter = magnitude;

​

  push();

  translate(width / 2, height / 2);

  push();

  noStroke();

  fill(100);

  textSize(15);

  text("HELLO WORLD!",0,0);

  pop();

  for (var i = 0; i < nReflections; i++) {

    // Calculate the angle 

    thisAngle = i * baseAngle;

    if (i % 2 === 0) {

      thisAngle += angle;

    } else {

      thisAngle += baseAngle - angle;

    }

    // Create the draw point

    var v = p5.Vector.fromAngle(thisAngle)

    v.mult(magnitude)

    v.add(center);

​

    push();

    translate(v.x, v.y);

    mousePath.push(createVector(v.x, v.y));

    // Rotate

    if (i % 2 === 0) {

      rotate(thisAngle);

    } else {

      rotate(thisAngle);

    }

    // Draw

    drawBrush();

    push();

    stroke(100);

    strokeWeight(5);

    for (let j = 0; j < mousePath.length; j++) {

​

      //console.log(mousePath[j].x,mousePath[j].y);

      // beginShape();

      // vertex(mousePath[j].x, mousePath[j].y);

      // endShape();

    }

    pop();

​

    pop();

  }

  pop();

}

​

function moveRects() {

​

  push();

  for (let i = 0; i < 600; i += 20) {

    fill(85);

    noStroke();

    rect(i + frameCount / 10, 0, 10, height);

  }

  pop();

}