main.js

var origPlanet
class Vector{
  constructor(x,y){
    this.x=x
    this.y=y
  }

  distanceVector(vec){

    return new Vector(vec.x-this.x,vec.y-this.y)
  }
  magnitude(vec){
    var dist=this.distanceVector(vec)
    return Math.sqrt(Math.pow(dist.x,2)+Math.pow(dist.y,2))
  }

}

class Planet{
  constructor(r,pos,vx,vy,color){

    this.pos=new Vector(pos.x,pos.y)
    this.r=r
    this.m=Math.PI*r*r*r*4/3*100000000
    this.vx=vx?vx:0
    this.vy=vy?vy:0
    this.color=color || '#'+Math.floor(Math.random()*0xFFFFFF).toString(16)
    this.iterator=0
    this.tail=[]
  }
  calcSpeed(plans){
    plans.forEach((p)=>{
      if(p!==this){
        var distVec=this.pos.distanceVector(p.pos)
        var dist=this.pos.magnitude(p.pos)
        if(dist<p.r){
          if(this.m>p.m){
            this.m+=p.m
            plans.splice(plans.indexOf(p),1)
          }else{
            p.m+=this.m
            plans.splice(plans.indexOf(this),1)
            origPlanet=p
          }
        }else{
          var G=0.000000000006
          var F=G*this.m*p.m/(dist*dist)
          this.vx+=F/this.m*(distVec.x/dist)
          this.vy+=F/this.m*(distVec.y/dist)

        }
      }

    })

  }
  updatePosition(){
    this.tail.splice(0,0,new Vector(this.pos.x,this.pos.y))
    this.pos.x+=this.vx
    this.pos.y+=this.vy
    this.iterator++
  }
  draw(ctx){
    ctx.beginPath()
    ctx.fillStyle=this.color
    ctx.arc(this.pos.x,this.pos.y,this.r,0,2*Math.PI)
    ctx.fill()
    ctx.closePath()
  }
  drawTail(ctx){
    ctx.beginPath()
    ctx.strokeStyle=this.color
    for(var i=0;i<Math.min(500,this.tail.length);i++)
    ctx.lineTo(this.tail[i].x,this.tail[i].y)
    ctx.stroke()
    ctx.closePath()
  }
}




function saveSimulation(){

  console.log("save")
  localStorage.setItem("simu",JSON.stringify(planets.map((p)=>{
    p.tail=[]
    return p;
  })))
}
function loadSimulation(){
  var storedPlanets=JSON.parse(localStorage.getItem("simu"))
  if(storedPlanets){
    storedPlanets.forEach((p)=>planets.push(new Planet(p.r,p.pos,p.vx,p.vy,p.color)))
  }
}

var planets=[]


function save(){
  saveSimulation()
}

function init(){
  loadSimulation()

  var c=document.createElement("canvas")
  c.style.cssFloat="left"
  window.onresize=()=>{
    c.height=window.innerHeight
    c.width=window.innerWidth
  }
  window.onresize()

  var dummy=new Planet(0,new Vector(0,0),0,0)
  origPlanet=dummy
  var start,xstart,ystart

  c.ontouchstart=(event)=>{
    event.preventDefault()
    c.onmousedown(event)
  }
  c.ontouchend=(event)=>{
    event.preventDefault()
    c.onmouseup(event)
  }
  c.onmousedown=function(event){
    start=new Date().getTime()
    xstart=event.offsetX
    ystart=event.offsetY
  }
  c.onmouseup=function(event){
    planets.push(new Planet(((new Date().getTime())-start)/100,
    new Vector(event.offsetX+origPlanet.pos.x-c.width/2,
      event.offsetY+origPlanet.pos.y-c.height/2),
    (event.offsetX-xstart)/100+origPlanet.vx,(event.offsetY-ystart)/100+origPlanet.vy
    ))
  }

  document.body.appendChild(c)

  var menu=document.createElement("div")
  menu.style.padding="10px"
  menu.style.position="absolute"
  menu.style.cssFloat="right"
  document.body.appendChild(menu)


  var but=document.createElement("button")
  but.onclick=function(event){
    console.log(JSON.stringify(planets))
    origPlanet=dummy
    planets=[]
  }
  but.innerHTML="reset"
  menu.appendChild(but)


  var info=document.createElement("p")
  menu.appendChild(info)
  var planetlist=document.createElement("ol")
  planetlist.id="planetlist"
  menu.appendChild(planetlist)

  var ctx=c.getContext("2d")
  // ctx.fillRect(20,20,20,20)




  setInterval(function () {
    planets.forEach((p)=>{
      p.calcSpeed(planets)
    })
    planets.forEach((p)=>{
      p.updatePosition()
    })

    ctx.clearRect(0,0,c.width,c.height)
    ctx.translate(-origPlanet.pos.x+c.width/2,
      -origPlanet.pos.y+c.height/2)
    planets.forEach((p)=>{
      p.drawTail(ctx)
    })
    planets.forEach((p)=>{
      p.draw(ctx)
    })
    ctx.translate(origPlanet.pos.x-c.width/2,
      origPlanet.pos.y-c.height/2)

  }, 40);


  setInterval(function () {
    info.innerHTML=planets.length+" planets<br>"
    //JSON.stringify(planets)
    planetlist.innerHTML=""
    planets.forEach((p,index)=>{
      var opt=document.createElement("li")
      opt.style.color=p.color
      opt.innerHTML="planet "+index
      opt.onclick=()=>{origPlanet=p}
      planetlist.appendChild(opt)
    })

  }, 500);
}