compiler - OpenProcessing

mySketch
xxxxxxxxxx
 
let firebaseUtils={loaded:0},
    frames=[],frame=0,timeline="spline"
preload=_=>{firebaseUtils.firebaseRaw=loadStrings("https://www.openprocessing.org/sketch/757976/files/FirebaseApp.txt")}
setup=_=>{
  createCanvas(960,540)
  firebaseUtils.firebaseRaw=firebaseUtils.firebaseRaw.join("\n")
  eval(firebaseUtils.firebaseRaw)
  var firebaseConfig={
    apiKey:"AIzaSyCK--50qc3WnpTjThEBLubdOHRm701tL3M",
    authDomain:"iframedb.firebaseapp.com",
    databaseURL:"https://iframedb-default-rtdb.firebaseio.com",
    projectId:"iframedb",
    storageBucket:"iframedb.appspot.com",
    messagingSenderId:"523839839536",
    appId:"1:523839839536:web:0d07ba0746e4f2a9313cf5"
  }
  firebase.initializeApp(firebaseConfig)
  firebase.database().ref(timeline).on("value",snapshot=>{
    firebaseUtils.database=snapshot.val()
    if(firebaseUtils.database&&firebaseUtils.database.frames){
      frames=JSON.parse(firebaseUtils.database.frames)
      for(let i=0;i<frames.length;i++){
        frames[i]=loadImage(frames[i])
      }
    }
    if(!firebaseUtils.database||!firebaseUtils.database.frames)firebase.database().ref(timeline+"/frames").set("[]")
    if(0&&firebaseUtils.database)console.log(firebaseUtils.database)
  })
}
draw=_=>{
  if(frameCount%15==0&&keyIsDown(32))frame+=1
  background(255)
  if(frames.length&&frame>frames.length-1)frame=frames.length-1
  if(!frames.length){
    fill(0);stroke(0);rect(width/2-100,height/2-10,200,20);rect(width/2-10,height/2-100,20,200)
  }
  if(frame<0)frame=0
  if(frames[frame]){
    image(frames[frame],75,100,width-150,height-100)
  }
  for(let i=0;i<frames.length;i++){
    noFill();stroke(0)
    rect(width/2-80+190*(i-frame),5,160,90)
    image(frames[i],width/2-80+190*(i-frame),5,160,90)
    if(Math.abs(mouseX-(width/2-80+190*(i-frame)+175))<10&&Math.abs(mouseY-50)<45){
      line(width/2-80+190*(i-frame)+175,45,width/2-80+190*(i-frame)+175,55)
      line(width/2-80+190*(i-frame)+170,50,width/2-80+190*(i-frame)+180,50)
    }
    if(i==0&&Math.abs(mouseX-(width/2-80+190*(i-frame)-15))<10&&Math.abs(mouseY-50)<45){
      line(width/2-80+190*(i-frame)-15,45,width/2-80+190*(i-frame)-15,55)
      line(width/2-80+190*(i-frame)-20,50,width/2-80+190*(i-frame)-10,50)
    }
    if(Math.abs(mouseX-(width/2-40+190*(i-frame)))<40&&Math.abs(mouseY-100)<10){
      line(width/2-45+190*(i-frame),100,width/2-35+190*(i-frame),100)
    }
    if(Math.abs(mouseX-(width/2+40+190*(i-frame)))<40&&Math.abs(mouseY-100)<10){
      line(width/2+45+190*(i-frame),100,width/2+35+190*(i-frame),100)
      line(width/2+45+190*(i-frame),97,width/2+45+190*(i-frame),103)
      line(width/2+35+190*(i-frame),103,width/2+35+190*(i-frame),97)
    }
  }
  fill(0);noStroke();textAlign(LEFT,TOP)
  text('Timeline: '+(timeline=='spline'?'main':timeline.slice(7)),10,10)
  text('Frame '+(frame+1).toString(),10,30)
  if(keyIsDown(49)&&frames[frame]){
    background(255)
    image(frames[frame],0,0,width,height)
  }
}
keyReleased=_=>{
  if(keyCode==LEFT_ARROW){
    frame-=1
  }
  if(keyCode==RIGHT_ARROW){
    frame+=1
  }
  if(key=='b'){
    backupDatabase()
  }
  if(key=='s'){
    let a=JSON.parse(firebaseUtils.database.frames)
    if(a[frame])copyString(a[frame],1)
  }
  if(key=='f'){
    frame=parseInt(prompt('Frame number'))
  }
  if(key=='a'){
    let a=prompt('Timeline name')
    if(a){
      initTimeline('spline/'+a)
    }else{
      initTimeline('spline')
    }
  }
  if(key=='x'){
    resizeCanvas(960*frames.length,540)
    for(let i=0;i<frames.length;i++){
      noFill();stroke(0)
      rect(960*i,0,960,540)
      image(frames[i],960*i,0,960,540)
    }
    save('comic.png')
    resizeCanvas(960,540)
  }
}
mouseReleased=_=>{
  if(!frames.length){
    addFrame(prompt('Paste file'),0)
    return
  }
  for(let i=0;i<frames.length;i++){
    if(Math.abs(mouseX-(width/2-80+190*(i-frame)+80))<80&&Math.abs(mouseY-50)<45){
      frame=i
      break
    }
    if(Math.abs(mouseX-(width/2-80+190*(i-frame)+175))<10&&Math.abs(mouseY-50)<45){
      addFrame(prompt('Paste file'),i+1)
      break
    }
    if(i==0&&Math.abs(mouseX-(width/2-80+190*(i-frame)-15))<10&&Math.abs(mouseY-50)<45){
      addFrame(prompt('Paste file'),0)
      break
    }
    if(Math.abs(mouseX-(width/2-40+190*(i-frame)))<40&&Math.abs(mouseY-100)<10){
      removeFrame(i)
      break
    }
    if(Math.abs(mouseX-(width/2+40+190*(i-frame)))<40&&Math.abs(mouseY-100)<10){
      replaceFrame(prompt('Paste file'),i)
      break
    }
  }
}
addFrame=(x,ix)=>{
  if(!x)return
  let a=JSON.parse(firebaseUtils.database.frames)
  a=[...a.slice(0,ix),x,...a.slice(ix)]
  firebase.database().ref(timeline+"/frames").set(JSON.stringify(a))
}
removeFrame=ix=>{
  let a=JSON.parse(firebaseUtils.database.frames)
  a=[...a.slice(0,ix),...a.slice(ix+1)]
  firebase.database().ref(timeline+"/frames").set(JSON.stringify(a))
}
replaceFrame=(x,ix)=>{
  if(!x)return
  let a=JSON.parse(firebaseUtils.database.frames)
  a=[...a.slice(0,ix),x,...a.slice(ix+1)]
  firebase.database().ref(timeline+"/frames").set(JSON.stringify(a))
}
copyString=(x,a)=>{
  try{
    let q=document.createElement("textarea")
    document.body.appendChild(q)
    q.value=x
    q.select()
    document.execCommand("copy")
    document.body.removeChild(q)
    if(a)alert('Copied!')
  }catch(e){
    alert('error: '+e)
  }
}
initTimeline=x=>{
  firebase.database().ref(timeline).off("value")
  timeline=x
  firebase.database().ref(timeline).on("value",snapshot=>{
    firebaseUtils.database=snapshot.val()
    if(firebaseUtils.database&&firebaseUtils.database.frames){
      frames=JSON.parse(firebaseUtils.database.frames)
      for(let i=0;i<frames.length;i++){
        frames[i]=loadImage(frames[i])
      }
    }
    if(!firebaseUtils.database||!firebaseUtils.database.frames)firebase.database().ref(timeline+"/frames").set("[]")
    if(0&&firebaseUtils.database)console.log(firebaseUtils.database)
  })
}
backupDatabase=_=>{
  firebase.database().ref("spline/backup/frames").set(firebaseUtils.database.frames)
}