
Demo.prototype.sceneIntro = function () {
  this.setScene('intro');

  


  let objectSyncTimes1 = [
    0, 12, 18, 24, 30, 33, 39, 42,
    48, 48 + 18, 48 + 20, 48 + 22, 48 + 24
  ];
  let objectSyncTimes2 = [
    0, 12, 18, 24, 30, 33, 39, 42,
    48, 48 + 18, 48 + 20, 48 + 22, 48 + 24, 48 + 30, 48 + 33, 48 + 39, 48 + 42
  ];


  this.loader.addAnimation([{
    object: null,
    id: 'objectRoot'
    , position: [{
      x: 0,
      y: 0,
      z: 0,
    }],
    angle: [{
      degreesZ: () => Sync.get('General:RootAngleZ')
    }],
  }]);
  this.loader.addAnimation([
    {
      parent: 'objectRoot',
      image: {
        name: 'img/bg_orangeTealGradient.png'
      },
      perspective: '2d',
      color: [
        {
          r: () => Sync.get('BG:R'),
          g: () => Sync.get('BG:G'),
          b: () => Sync.get('BG:B')
        }
      ],
      scale: [{ uniform2d: 1.0 }],
      position: [{
        x: 0,
        y: 0,
        z: -15
      }]
    }
  ]);
    Utils.setSeed(1611112);
  for (let i = 0; i < objectSyncTimes1.length; i++) {
    let direction = Math.random()*2-1;
    let objectX = Utils.random() * 11 - 5.95;
    let objectY = -Utils.random() * 6 + 4.35;
    this.loader.addAnimation({
      parent: 'objectRoot',
      start: objectSyncTimes1[i] * window.tick + window.pattern * 6.5, end: window.pattern * 8.5,
      image: {
        name: 'lohja/limestone.png'
      },
      scale: [{ uniform2d: 2 + Math.random()*.5}],
      angle: [{
        degreesZ: () => getSceneTimeFromStart()*25 * direction
      }],
      perspective: '3d',
      position: [{
        x: objectX,
        y: objectY,
        z: -10
      }],
      material: {
        transparent: true,
        depthTest: true,
        depthWrite: false,
        blending: 'NormalBlending'
      },
    });
  }

  for (let i = 0; i < objectSyncTimes2.length; i++) {

    let objectX = Utils.random() * 15 - 7.5;
    let objectY = Utils.random() * 6 - 2;
    this.loader.addAnimation({
      parent: 'objectRoot',
      start: objectSyncTimes2[i] * window.tick + window.pattern * 8.5, end: window.pattern * 10.5,
      image: {
        name: 'lohja/kala.png'
      },
      scale: [{ uniform2d: 5.5+Math.random() }],
      perspective: '3d',
      position: [{
        x: objectX,
        y: () => Math.sin(3*getSceneTimeFromStart() + i * .25) + objectY,
        z: -10
      }],
      color: [{
        r: .75, g: .75, b: .75
      }],
      angle: [{
        degreesZ: () => Math.sin(getSceneTimeFromStart()*2 + i*.25) * 25
      }],
      material: {
        transparent: true,
        depthTest: true,
        depthWrite: false,
        blending: 'NormalBlending'
      },
    });
  }

  for (let i = 0; i < objectSyncTimes1.length; i++) {
    let objectX = Utils.random() * 11 - 5.5;
    let objectY = Utils.random() * 6 - 8;
    this.loader.addAnimation({
      parent:'objectRoot',
      start: objectSyncTimes1[i] * window.tick + window.pattern * 11.5, end: window.pattern * 13.5,
      image: {
        name: 'lohja/omena.png'
      },
      scale: [{ uniform2d: 2.5 + Math.random() }],
      perspective: '3d',
      position: [{
        x: ()=>Math.sin(getSceneTimeFromStart()*2+i*.35) * objectX,
        y: ()=>Math.sin(getSceneTimeFromStart()*3-i*.25) * objectY-1.5,
        z: -10
      }],
      angle: [{
        degreesZ: () => Math.sin(getSceneTimeFromStart()*2+i*.35) * 15
      }],
      material: {
        transparent: true,
        depthTest: true,
        depthWrite: false,
        blending: 'NormalBlending'
      },
    });
  }

  for (let i = 0; i < objectSyncTimes2.length; i++) {
    let objectX = Utils.random() * 12 - 6;
    let objectY = Utils.random() * 1 - 3;
    this.loader.addAnimation({
      parent:'objectRoot',
      start: objectSyncTimes2[i] * window.tick + window.pattern * 13.5, end: window.pattern * 15.5,
      image: {
        name: 'lohja/masuuni.png'
      },
      scale: [{ uniform2d: 9.5 }],
      perspective: '3d',
      position: [{
        x: objectX,
        y: ()=>Math.sin(getSceneTimeFromStart()*2+i*.35)*.25 +objectY,
        z: -10
      }],
      angle: [{
        degreesZ: () => Math.sin(getSceneTimeFromStart()*2+i*.35) * 5
      }],
      color: [{
        r: .65, g: .65, b: .65
      }],
      material: {
        transparent: true,
        depthTest: true,
        depthWrite: false,
        blending: 'NormalBlending'
      },
    });
  }

    for (let i = 0; i < objectSyncTimes1.length; i++) {
    let objectX = Utils.random() * 11 - 5.5;
    let objectY = Utils.random() * 6 ;
    this.loader.addAnimation({
      parent:'objectRoot',
      start: objectSyncTimes1[i] * window.tick + window.pattern * 21.5, end: window.pattern * 23.5,
      image: {
        name: 'lohja/plastex.png'
      },
      scale: [{ uniform2d: 2.5 + Math.random() }],
      perspective: '3d',
      position: [{
        x: ()=>Math.sin(getSceneTimeFromStart()*2+i*.15) * objectX,
        y: ()=>Math.sin(getSceneTimeFromStart()*1-i*.45)*3 + objectY,
        z: -10
      }],
      color: [{
        r: .35+Math.random()*.35, g: .35+Math.random()*.35, b: .35 +Math.random()*.35
      }],
      angle: [{
        degreesZ: () => 180+Math.sin(getSceneTimeFromStart()*2+i*.35) * 15
      }],
      material: {
        transparent: true,
        depthTest: true,
        depthWrite: false,
        blending: 'NormalBlending'
      },
    });
  }

      for (let i = 0; i < objectSyncTimes2.length; i++) {
    let objectX = Utils.random() * 11 - 5.5;
    let objectY = Utils.random() * 6 -1;
    this.loader.addAnimation({
      parent:'objectRoot',
      start: objectSyncTimes2[i] * window.tick + window.pattern * 23.5, end: window.pattern * 25.5,
      image: {
        name: 'lohja/lohjalogo.png'
      },
      scale: [{ uniform2d: ()=>Math.sin(getSceneTimeFromStart()*5 + i*.1556)+2.5  }],
      perspective: '3d',
      position: [{
        x: ()=>Math.sin(getSceneTimeFromStart()*2+i*.15) * objectX,
        y:  objectY,
        z: -10
      }],
      color: [{
        r: .35+Math.random()*.35, g: .35+Math.random()*.35, b: .35 +Math.random()*.35
      }],
      angle: [{
        degreesZ: () => 180+Math.sin(getSceneTimeFromStart()*2+i*.35) * 35
      }],
      material: {
        transparent: true,
        depthTest: true,
        depthWrite: false,
        blending: 'NormalBlending'
      },
    });
  }

  this.loader.addAnimation({
  
    start: window.pattern * 15, end: window.pattern * 24,
    image: {
      name: 'lohja/skyline.png'
    },
    scale: [{ uniform2d: 8.0 }],
    perspective: '3d',
    position: [{
      x: () => Sync.get('Farjan:skylineX'),
      y: () => Sync.get('Farjan:skylineY'),
      z: -13
    }],
    color: [{
      r: .75, g: .75, b: .75
    }],
    angle: [{
      degreesZ: -90
    }],
    material: {
      transparent: true,
      depthTest: true,
      depthWrite: false,
      blending: 'NormalBlending'
    },
  });

  this.loader.addAnimation([{
    image: {
      name: 'lohja/kaljaasi.png'
    },
    perspective: '2d',
    position: [{
      x: () => Math.sin(getSceneTimeFromStart()*1) * 0.05,
      y: ()=> Math.sin(getSceneTimeFromStart()*10) * 0.02 + Sync.get('Farjan:kaljaasiY'),
      z: -5
    }],
    angle: [{
      degreesZ: () => Math.sin(getSceneTimeFromStart()*2) * -7
    }],
    scale: [{ uniform2d: 1.5 }],
    material: { blending: 'NormalBlending', transparent: true, depthWrite: false },
  }]);

    this.loader.addAnimation({
  
    start: window.pattern * 15, end: window.pattern * 24,
    image: {
      name: 'lohja/aallot.png'
    },
    scale: [{ uniform2d: 8.0 }],
    perspective: '3d',
    position: [{
      x: () => Sync.get('Farjan:skylineX')+2,
      y: () => Sync.get('Farjan:skylineY'),
      z: -9
    }],
    color: [{
      r: .75, g: .75, b: .75
    }],
    angle: [{
      degreesZ: -90
    }],
    material: {
      transparent: true,
      depthTest: true,
      depthWrite: false,
      blending: 'NormalBlending'
    },
  });

  window.fakeTime = 0.0;

  // bass = raymarcher
  this.loader.addAnimation({
    image: ['_embedded/defaultWhite.png'],
    perspective: '3d',
    position: [{ "x": () => window.camPos, "y": () => window.camPos, "z": -10.0 }],
    scale: [{ uniform2d: 1.0 }],
    "shader": {
      "name": ["multiSceneEffects/rayMarcher.vs", "multiSceneEffects/rayMarcher.fs"],
      "variable":
        [
          { "name": "MAX_STEPS", "type": "float", "value": [100.0] },
          { "name": "inCamPos", "type": "vec3", "value": [() => window.camPos] },
          { "name": "camDirection", "type": "vec3", "value": [() => window.camDirection] },
          { "name": "camNear", "type": "mat4", "value": [() => window.camNear] },
          { "name": "camFar", "type": "mat4", "value": [() => window.camFar] },
          { "name": "camFov", "type": "mat4", "value": [() => window.camFov] },
          { "name": "showTunnel", "type": "float", "value": [() => Sync.get('RayMarcher:ShowTunnel') > 0.1] },
          { "name": "tunnelDeformAmount", "type": "float", "value": [() => Sync.get('RayMarcher:TunnelDeformAmount')] },
          { "name": "showGround", "type": "float", "value": [0.0] },
          { "name": "tunnelMinZ", "type": "float", "value": [() => Sync.get('RayMarcher:TunnelMinZ')] },
          { "name": "tunnelMaxZ", "type": "float", "value": [() => Sync.get('RayMarcher:TunnelMaxZ')] },
          { "name": "tunnel2ndColorMix", "type": "float", "value": [() => Sync.get('RayMarcher:Tunnel2ndColorMix')] },
          { "name": "showHeartTunnel", "type": "float", "value": [0.0] },
          { "name": "heartTunnelMinZ", "type": "float", "value": [() => Sync.get('RayMarcher:HeartTunnelMinZ')] },
          { "name": "heartTunnelMaxZ", "type": "float", "value": [() => Sync.get('RayMarcher:HeartTunnelMaxZ')] },
          { "name": "showRainbowRoad", "type": "float", "value": [1.0] },
          { "name": "rainbowRoadMinZ", "type": "float", "value": [() => Sync.get('RayMarcher:RainbowRoadMinZ')] },
          { "name": "rainbowRoadMaxZ", "type": "float", "value": [() => Sync.get('RayMarcher:RainbowRoadMaxZ')] },
          { "name": "showFakeShadow", "type": "float", "value": [1.0] },
          { "name": "fakeShadowPos", "type": "vec2", "value": [() => Sync.get('RayMarcher:FakeShadowPosX'), () => Sync.get('RayMarcher:FakeShadowPosZ')] },
          { "name": "fakeShadowSize", "type": "vec2", "value": [() => Sync.get('RayMarcher:FakeShadowSizeX'), () => Sync.get('RayMarcher:FakeShadowSizeZ')] },
          { "name": "fakeShadowOpacity", "type": "float", "value": [() => Sync.get('RayMarcher:FakeShadowOpacity')] },
          { "name": "fakeShadowWarpFreq", "type": "vec2", "value": [() => Sync.get('RayMarcher:FakeShadowWarpFreqX'), () => Sync.get('RayMarcher:FakeShadowWarpFreqZ')] },
          { "name": "fakeShadowWarpAmp", "type": "vec2", "value": [() => Sync.get('RayMarcher:FakeShadowWarpAmpX'), () => Sync.get('RayMarcher:FakeShadowWarpAmpZ')] },
          { "name": "kick", "type": "float", "value": [() => Sync.get('Music:Kick')] },
          { "name": "fakeTime", "type": "float", "value": [() => window.fakeTime] }
        ]
    },
    runFunction: (animation) => {
      window.fakeTime += getDeltaTime() * (() => Sync.get('RayMarcher:TimeScale'))();
    }
  });


  for (let ix = 0; ix < 3; ix++) {
    let squareSyncValue = 'Primitives:Square' + ix;

    let lojostring = 'lohja/';
    if (ix == 0) lojostring += 'loh.png';
    if (ix == 1) lojostring += 'lojo.png';
    if (ix == 2) lojostring += 'hja.png';

    let lojosize = 6;
    if (ix == 1) lojosize = 10;
    this.loader.addAnimation([
      {
        parent:'objectRoot',
        image: {
          name: lojostring
        },
        perspective: '3d',
        color: [
          { r: () => 1.5*Sync.get(squareSyncValue) },
          { g: () => 1.5*Sync.get(squareSyncValue) },
          { b: () => 1.5*Sync.get(squareSyncValue) },
                 
          { a: () => 1.5*Sync.get(squareSyncValue) }
        ],
        scale: [{ uniform2d: lojosize }],
        enabled: true,
        position: [{
          x: -10 + ix * 10,
          y: 0,
          z: -11
        }],
        angle: [{
          degreesZ: 180
        }],

        material: {
          transparent: true,
          depthTest: true,
          depthWrite: false,
          blending: 'AdditiveBlending'
        },
      }
    ]);
  }

    this.addEffectStarfield(0, 240,
    { count: 50, texture: 'lohja/kala.png' },
    {
      colorR:0.5,
      colorG:0.5,
      colorB:0.5,
      areaSizeX: 10,
      areaSizeY: 10,
      areaSizeZ: 20,
      particleSize: 3.5,
      speed: 2.0,
      enabledOnStart: false,
      enabled: 'General:KalaStawrfieldEnabled',
      blending: 'NormalBlending'
    }
  );

      this.addEffectStarfield(0, 240,
    { count: 50, texture: 'img/basicParticleW2B.png' },
    {
      colorR:0.5,
      colorG:0.5,
      colorB:0.5,
      areaSizeX: 10,
      areaSizeY: 10,
      areaSizeZ: 20,
      particleSize: 3.5,
      speed: 2.0,
      enabledOnStart: false,
      enabled: 'General:endField',
      blending: 'NormalBlending'
    }
  );

      this.loader.addAnimation([{

        visible: () => Sync.get('General:Halster') > 0.1,
        object: {
            name: "lohja/halster.obj",
        }
        , position: [{
            x: 0.0,
            y: 0,
            z: -9
        }]
  
        , angle: [{

            degreesY: () => getSceneTimeFromStart() * 290,

            degreesX: () => getSceneTimeFromStart() * 190,
        }]
        , scale: [{ uniform3d:.7 }]
    }]);

  this.AddText("Jumalauta Presents", 0, .2, "Text:Presents1Enabled");
  this.AddText("Lohja i digital Lojo", 0, -.2, "Text:Presents2Enabled");
    
  this.AddText("Limestone Empire", 0, .2, "Text:Text1Enabled");
  this.AddText("Kingdom of the Lake", 0, .2, "Text:Text21Enabled");
  this.AddText("Ancient Forgemasters", 0, .2, "Text:Text3Enabled");
  this.AddText("Plastic Wizards", 0, .2, "Text:Text4Enabled");
  this.AddText("The Apple Capital", 0, .2, "Text:Text5Enabled");
  this.AddText("Capitalist Overlords", 0, .2, "Text:Text7Enabled");
  this.AddText("Elevator", 0, .1, "Text:Text6Enabled");  
  this.AddText("record holder", 0, -.1, "Text:Text6Enabled");
  

    this.loader.addAnimation({
        image: 'lohja/nyrk.png',
        perspective: '2d',

        scale: [{ uniform2d: ()=>Math.sin(getSceneTimeFromStart()*2)*.25+1.5 }],
        visible: () => Sync.get('General:Nyrkki') > 0.1,
    });

};

