Editing project loader drawing canvas

Glitch Help
1

Hey! I’m interested in remixing, playing around with, and maybe submitting a change glitch project loader canvas drawer.

From devtools I’ve found that this is the script that runs:


// drawing

var canvas, context, canvasImage;

var cursorPosition = {
  x: undefined,
  y: undefined,
};
var color = '#e5e5e5';
var size = 30;

function randomColor() {
  var colors = [
    '#fcd1c4',
    '#abfcec',
    '#a3d9e1',
    '#fbbfff',
    '#a9ef8f',
    '#fff0b2',
    '#fff0b2',
  ];
  color = colors[Math.floor(Math.random() * colors.length)];
}

function throttle(ms, fn) {
  var lastCallTime;
  return function () {
    var now = Date.now();
    if (!lastCallTime || now - lastCallTime > ms) {
      lastCallTime = now;
      fn.apply(this, arguments);
    }
  }
}

function drawCircle(event) {
  context.beginPath();
  context.arc(cursorPosition.x, cursorPosition.y, size, 0, 2 * Math.PI);
  context.closePath();
  context.fillStyle = color;
  context.fill();
  canvasImage = context.getImageData(0, 0, window.innerWidth, window.innerHeight);
}

window.onload = function () {
  randomColor();
  canvas = document.getElementById('background');
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  context = canvas.getContext('2d');

  window.onresize = throttle(100, function () {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    context.clearRect(0,0, window.innerWidth, window.innerHeight);
    canvasImage && context.putImageData(canvasImage, 0, 0);
  });

  window.onmousemove = throttle(10, function (event) {
    cursorPosition = {
      x: event.clientX,
      y: event.clientY,
    };
    drawCircle(event);
  });

  window.ontouchmove = throttle(10, function (event) {
    cursorPosition = {
      x: event.touches[0].clientX,
      y: event.touches[0].clientY,
    };
    drawCircle(event);
  });
}

That doesn’t seem to be on the community project.

is there anywhere i could play around with the code and submit to glitch my idea?

2

Hey @zhammer, thanks for your interest.

That portion of the Glitch experience isn’t part of the Community project / glitch.com itself - it run in a portion of our infrastructure that only gets hit when a request for a project is forwarded to the project’s container itself; that code’s not publicly available right now.

If you have an idea you’d like to share for the loading screen I think the best way to share it would be to show off your idea in its own Glitch project and provide us with a link to it. Our engineering plan for the next few months is pretty packed so any work on the loading screen would be at least a few months away.

4

Here’s the idea! (I realized the script I wanted is embedded right into that HTML.)

for some reason every time i’m at the loader i want to be able to click to change the circle colors: https://glitch.com/~glitch-loader-with-click

5

Nice! I actually had a similar idea recently and made this: https://canvas-loading-drawing.glitch.me (try scrolling or holding your mouse down.)

I decided in the end that it was a bit too fun for the project loading screen, but yours is really subtle and could work well. I’ll let you know if I end up editing that part of the code soon, but it would be more of a “spare time” sort of thing.

6

ha awesome. yep sounds good. and you dont need to tell me if you do… out of habit i always click and it’d be a fun surprise to see the color change one day

2 Likes