var img;

var locationx = 0;

//how to declare a vector in javascript

//var velocityx = createVector(40, 50);

var velocityx = 0;

var locationy = 0;

var velocityy = 0;

let theta = 1;

let a = 0;

​

function preload() {

  raleway = loadFont('data/Raleway-Medium.ttf');

  img = loadImage("data/lowtherMap.png");

}

​

function setup() {

  createCanvas(300, 300, WEBGL);

    textFont(raleway);

}

​

function draw() {

  background(0);

​

  textAlign(RIGHT);

  fill('#00ff00');//green zones

  textSize(width/7);

  text('bug', -60, -130);

  text('data2', -60, -90);

​

  image(img, 0, 0, mouseX, 120);

  if ((locationx > width) || (locationx < 0)) {

    velocityx = velocityx * +1;

  }

  if ((locationy > height) || (locationy < 0))

  {

    velocityy = velocityy * +1;

  }

  print(velocityx);

     push();

      translate(0, 0, mouseX);

  let m = map(locationx, 0, width, -PI, PI);

      rotateY(m);

   image(img, -mouseX, 0, 100, 100);

  tint(255, 126); // Apply transparency without changing color

  image(img, -12.5, 0, 100, 100);//bone

   texture(img);

  textureMode(NORMAL);

  beginShape();

  vertex(-200, -50, 0, 0);

  vertex(sin(frameCount * 0.01) * 100, -50, 1, 0);

  vertex(m, 50, 1, 1);

  vertex(-50, 50, 0, 1);

      endShape();

      pop();

​

 a = a - 1.5;//loop speed 

  if (a < 0) {

    a = 300;

  }

  print(a);

  if 

      ((a >= 0) && (a < 100))

    {

      //background('yellow', random(90));

      background(color(83, random(255)));

    }

  if 

    ((a >= 200)&&(a<250))

  {

  camera(200, 0, 400 + sin(frameCount * 0.02) * 100, 0, 0, 0, 0, 1, 0);

  }

   if 

    ((a >= 250)&&(a<300))

  {

    camera(sin(frameCount * 0.02) * 100, 0, 300 + sin(frameCount * 0.02) * 100, 0, 0, 0, 0, 1, 0);

    texture(img);

  sphere(200);

  }

  noStroke();

  shininess(20);

  ambientLight(50);

  specularColor(255, 0, 0);

  pointLight(255, 0, 0, 0, -50, 50);

  specularColor(0, 255, 0);

  pointLight(0, 255, 0, 0, 50, 50);

  specularMaterial(255);

  //texture(img);

​

  sphere(40);

​

    for (let i = 0; i < width; i+= 10) {

      //stroke(90);

    rect(i, i, 2, 2);

      rect(i/10, i, 2, 2);

      push();

      translate(0, -200, frameCount * 0.02);

      rect(-i/40, i, 200, 1);

      pop();

​

}

​

  tint(255, 126); //Applies transparency without changing color

  push();

  rotateZ(theta * 0.1);

  rotateX(theta * 0.1);

  rotateY(theta * 0.1);

  texture(img);

  box(100, 100, 100);

  pop();

  theta += 0.05;

}