Touch Input and Performance Issues

Hello, I made a very simple Gradient Scrolling site. But I have only Issues on mobile devices. On chrome it is not doing anything and on firefox there are extreme performance issues (also there is a "you reached the end of the site animation") Any ideas how it could be made better? I guess I should go for native JS for such a simple site.

  1. Desktop: How do you find out if scrolled down or up?

Here's the site: http://matthias.pitscher.xyz/scrollgrad.html

Here's the code:

var rows;
function setup(){
  createCanvas(windowWidth, windowHeight);
  colorMode(HSB,360,100,100);
  background(0);
  rows = 10;
  noStroke();
}

var index = 0;
function draw(){
  for (var i = 0; i < windowHeight; i+=rows) {
    var gradient = (i / windowHeight * 20 + index) % 360;
    fill(gradient, 70, 100);
    rect(0, i-rows, windowWidth, i);
  }
}

function mouseWheel() {
  index++;
  return false;
}

function touchMoved() {
    index++;
  return false;
}
function windowResized() {
    resizeCanvas(windowWidth, windowHeight);
}
Sign In or Register to comment.