function preload() {
  // Load model with normalise parameter set to true
  treeofheaven_st = loadModel("Pflanzen/treeofheaven_stamm.obj", true);
  treeofheaven_bl = loadModel("Pflanzen/treeofheaven_blaetter_ohnematerial_mod_02.obj", true);
  blatt = loadImage("Pflanzen/Leaf2_AilanthusAltissima.png");
  stamm = loadImage("Pflanzen/Bark_AilanthusAltissima.png");
  essigbaum_st = loadModel("Pflanzen/essigbaum_stamm.obj", true);
  essigbaum_bl = loadModel("Pflanzen/essigbaum_blaetter2.obj", true);
  
}

function setup() {
  
  createCanvas(1080, 1920, WEBGL);
  
  slider = createSlider(0, 255, 108);
  slider.position(10, height+10);
  slider.style('width', '80px');
  
  sliderx = createSlider(-100, 100, 0);
  sliderx.position(10, height+30);
  sliderx.style('width', '80px');
  
  slidery = createSlider(-100, 100, 50);
  slidery.position(10, height+50);
  slidery.style('width', '80px');
  
  sliderz = createSlider(-100, 100, 0);
  sliderz.position(10, height+70);
  sliderz.style('width', '80px');
  
  sliderpetalx = createSlider(-100, 100, 0);
  sliderpetalx.position(10, height+90);
  sliderpetalx.style('width', '80px');
  
  sliderpetaly = createSlider(-100, 100, 0);
  sliderpetaly.position(10, height+110);
  sliderpetaly.style('width', '80px');
  
  sliderpetalz = createSlider(-100, 100, 0);
  sliderpetalz.position(10, height+130);
  sliderpetalz.style('width', '80px');
  
  sliderrootx = createSlider(-100, 100, 0);
  sliderrootx.position(10, height+150);
  sliderrootx.style('width', '80px');
  
  sliderrooty = createSlider(-100, 100, 0);
  sliderrooty.position(10, height+170);
  sliderrooty.style('width', '80px');
  
  sliderrootz = createSlider(-100, 100, 0);
  sliderrootz.position(10, height+190);
  sliderrootz.style('width', '80px');
  

  
  c1 = color(255);
  c2 = color(63, 191, 191);

  for (let y = 0; y < height; y++) {
    n = map(y, 0, height, 0, 1);
    let newc = lerpColor(c1, c2, n);
    stroke(newc);
    line(0, y, width, y);
  }

  angleMode(DEGREES);
  describe("Vertically rotating 3-d teapot with red, green and blue gradient.");
}

function draw() {
  
  let val = slider.value();
  background(val);

  //background(153, 204, 204);
  scale(3.0); // Scaled to make model fit into canvas
  rotateX(frameCount * 0.01);
  
  translate(-5, 50 + sin(0.5 * frameCount) * 20 - 80, 0);
  translate (sliderx.value(),slidery.value(),sliderz.value())
  
  
  rotateY(frameCount * 0.3);
  rotateX(180);
  normalMaterial(); // For effect
  push();
  //texture(stamm);
  translate(sliderpetalx.value(),sliderpetaly.value(),sliderpetalz.value());
  model(treeofheaven_st);
  pop();
  
  push();
  //texture(blatt);
  translate(sliderrootx.value(),sliderrooty.value(),sliderrootz.value());
  model(treeofheaven_bl);
  pop();

  push();
  model(essigbaum_bl);
  pop();

  push();
  model(essigbaum_st);
  pop();

  
}
function keyPressed() {
  //print(keyCode);
  if (keyCode==80) {
    print("grauwert "+slider.value());
}}