spaceship.js

readme.md

https://flems.io/#0=N4Igxg9gdgzhA2BTEAucD4EMAONEBMQAaEAMwEskZUBtUKTAW2TQDoALAF0fmPSk6IBqECAC+RekxYhWAK2olIAoZxH4IYAK7MBrAEYR8AT1bkoURACcAKogAenAAQBeJwB0Qn91DCYork4a2rqcrGBWiJiCAKJIoQAUAOR+UABumDBJAJQ+yoGprADmiJwAwtCCjskATPg5PsE6qgZGpjjYQvhl7JT4Cam5vv6sAO7k+JzsBSPsiORFXIEAbAAMqz550KycVv4wWIIJAMzrRKerQz4ZVk5+2IHAPk5O9iirRE7GKAC0ACwARk+zycMD8SBQTmAbwAHERvjCJCDsBBzJwYJCaCCXi8aB8fgCALpEbE4mhAokkgI43GrVgAViIdPpxNJuJ+zKZDNZ1JpNAJREpbKceKIBMJIJ5Lwo8HgkKSViK+gSAHYPmqiGrskkqWIPFBrphbpAwABrbDkZxuJ7Ut4fL6-U7A6lgzAQqFvAHLeEoAGIqkvFFojEi4Wi8UBmkiilSqN4hmC7mRvkchMApNhgVC3lk-FEyWRmVypwKpWYBIwj41M41emM5na3XPQ23OSogLWkF2z7fY4J-UvV3u6Eoas+-5I6lBgQhrE52li7NRkWcpdx1OMtd8vMS6mxovyxXKgH0j4ns+nxs+MTN9JGu6ac2WgASABlHl33j3frXnYPwYgkIjgCHzfACNSToG7bopiYb4jUsYpnScLpjCLLJmSBKsN66YgYhuaLruLz7pQxalvo5a1oyVFEDRDY6tet43A+ZoWpwADK7CYBoowfraX4Oj8v4DqCAFAW8BKgb6EGRtOMGhvOK5ighGHsshiZofh7LpjhrB4apSnigWIIHiWR7lh8llcjUV5QDeBoOfqzFQBAeCdvx9rfD8ToiUOgEeqOUnVpBThybOcGEQZ5KClpK5phmin8quCXLvyMZRTuxnUqZ5Gquq+W2fZTn3kIRTmIgABK5CMFVixWlCn6eQJIJ+eJvynj6p4hWFsGJTuGVciqsVpTFA1GXuhakYeSoJNWVY1ushWbHetyleVVWMK+iCkPVNovN2Dr2i1YkBR13xdbJ0HhX1kURXSQ1RVmw2ZRNJlTWZM1zbRC2XAxdnLcVtzsFosq1Us7n7QJ3xHS6J0jj8Z0oBdyJXb1qX9XdKXrnSACcXIws9hFZdK725R15O-U2ARMfewOyltO18ZDTUw-+br+SOiPI1OqMKejt03cyw2pnjyGE+NxGTbK8pFJExh-fZLZOKQ8AQBAtwQ68UPNbD7NtVzqzdbzc78xGYbpRF6YqZmFs3RLTgkdLJb6FgZoK7egPK1gzBM1rThNX8HzHXrAVOl5tZG8GaNxhjiW26lT1jfmr3ZaT5mzXWRAdSBlmsDjS3UytXvSDUvtvP734dcHw5vMcjLh-SkcztH24C6l8frh3rf247ZHpzRHW5-n7uF8xRSq7xEPl01mfVxztdwl5pxN-JJsx23cZd5hW8Lj3Ut92WGfUWcOdcn8Bf6hApCkHg9WkFovicOQ0AJFfN+lNke1OJEnBaFYAT30fs-KACQ5Kf1JD-P+AQ140jkniQkABqN+t9WD2AMnAokSDr4oOMKSIiTh7JFR8H5QIgCwBPxfn5T4YVwHUkgf-UKV1WCMBwAkMhFCQFgK-i8eh0DhRwNWISJwAAqUS7NUFOAAD6SKcECfh0FyRCNEX5VgxgpEyIBHgkEYghhEKgPgPYk9lYP3IcA1++g5C0JeMoAwiAypQAAArRHYAkIYLxmJhUCH5cxchWBUIgBY1gNC2TMNYcg0oPjshuJBDYxgEA0iIBsBAVgHR4DGAGNAIgYV4FuMYcGPx8ByBgEQAkIEBJsihOwGwkxHDQHQSsTiZQcAkCsFVkUOpaJcnWO2IUywSSUnYGwGkjJUAsn1O0bkgJviixOAAGSzKcCM1gRZ2KcGMEgQIUzlmkWyHMhZNiiyuJidsMAqs8BOKmEc6kWyYC7AgKaRAezFk2NuVYe5iBVnrMeW4G5dyHm7PmQ+KAfi-klN0ctRohi2Gq3VkMAxmBRjQpLnCqFKtpAooRQkceEBRgYsRWtSwG0GacDxQkAllVqpgxJZCzFdN4DEtJXSqlpKXJ4FJSaJ81L9FQrbOYdlj42Jvn5axS0nFuI4qcOynA2Q+B4CQKY6A1A0A1DrigHG4hJAgAYMwEQ4QYCKH4IIYQaBxCEjEEAA

spaceship.js

document.body.innerText = ""
can = document.createElement('canvas')
con = can.getContext('2d')
document.body.appendChild(can)
can.width = can.height = 600

con.translate(300,300)

var cap = {
  x:0, y:-41, 
  scale: {x:8,y:8},
  points: [
      [0,-1],
      [1,1],
      [0.5,0.5],
      [-0.5,0.5],
      [-1,1],
      [0,-1]
  ],
  fill: 'rgb(70,70,70)',
} 

var cockpit = {
  x:0, y:-30, 
  scale: {x:16,y:18},
  points: [
      [0,-1],
      [1,1],
      [0.5,1.5],
      [-0.5,1.5],
      [-1,1],
      [0,-1]
  ],
  fill: 'rgba(80,200,255,0.5)',
}
 
var join = {
  x:0, y:3.5, 
  scale: {x:20,y:-4},
  points: [
      [0,-1],
      [0.5,1],
      [-0.5,1],
      [0,-1]
  ],
  fill: 'rgb(150,150,150)',
}
 
var cockpitHL = {
  x:0, y:-25, 
  scale: {x:10,y:12},
  points: [
      [0,-2],
      [-0.8,1.85],
      [-1.6,1.10],
      [0,-1]
  ],
  fill: 'rgba(255,255,255,0.5)',
}
 
var cockpitShadow = {
  x:0, y:-25, 
  scale: {x:-10,y:12},
  points: [
      [0,-2],
      [-0.8,1.85],
      [-1.6,1.10],
      [0,-1]
  ],
  fill: 'rgba(0,0,0,0.2)',
}


 
var nose= {
  x:0, y:-30, 
  scale: {x:20,y:20},
  points: [
      [0,-1],
      [1,1],
      [0.5,1.5],
      [-0.5,1.5],
      [-1,1],
      [0,-1]
  ],
  fill: 'rgb(70,70,70)',
}
 
var engineRimRight = {
  x:0, y:0, 
  scale: {x:-50,y:50},
  points: [
      [0,-1],
      [0,0.7],
      [-1,1],
      [0,-1]
  ],
  fill: 'rgb(200,200,200)',
}

var engineRimLeft = {
  x:0, y:0, 
  scale: {x:50,y:50},
  points: [
      [0,-1],
      [0,0.7],
      [-1,1],
      [0,-1]
  ],
  fill: 'rgb(200,200,200)',
}

 
var hullRight = {
  x:0, y:0, 
  scale: {x:-50,y:50},
  points: [
      [0,-1],
      [0,0.5],
      [-0.9,0.8],
      [0,-1]
  ],
  fill: 'rgb(50,50,50)',
}
 
 
var hullLeft = {
  x:0, y:0, 
  scale: {x:50,y:50},
  points: [
      [0,-1],
      [0,0.5],
      [-0.9,0.8],
      [0,-1]
  ],
  fill: 'grey',
}

var floor = {
  x:0, y:0, 
  scale: {x:50,y:50},
  points: [
      [0,-1],
      [1,1],
      [0,1.2],
      [-1,1],
      [0,-1]
  ],
  fill: 'black',
}
 
 
var flame = {
  x: 0, y:40,
  scale: {x:30,y:-25},
  points: [
      [0,-1],
      [1,1],
      [-1,1],
      [0,-1]
  ],
  fill: 'rgba(255,50,100,0.9)',
}
 
var flame2 = {
  x: 0, y:50,
  scale: {x:35,y:-25},
  points: [
      [0,-1],
      [1,1],
      [-1,1],
      [0,-1]
  ],
  fill: 'rgba(255,50,0,0.9)',
}
 
var glow = {
 x: 0, y:55,
  scale: {x:38,y:-30},
  points: [
      [0,-1],
      [1,1],
      [-1,1],
      [0,-1]
  ],
  fill: 'rgba(255,200,100,0.4)',
}
 
offset = function(offset){
  return function(point){
    return [
      point[0]+offset.x,
      point[1]+offset.y
    ]
  }
}
 
scale = function(scale, points){
  return points.map(function(point){
    return [
      point[0] * scale.x || 1,
      point[1] * scale.y || 1
    ]
  })
}
 
draw = function(obj){
  con.beginPath()
  var points = scale(obj.scale,obj.points)
     .map(offset(obj))
 
  con.moveTo.apply(con,points[0])
  points.slice(1,-1).map(function(point){
    console.log(point)
    con.lineTo.apply(con,point)
  })
  obj.fill && (con.fillStyle = obj.fill) && con.fill()
  con.closePath()
  obj.stroke && (con.strokeStyle = obj.stroke) && con.stroke()
}


draw(floor)
draw(flame2)
draw(flame)
draw(glow)
draw(engineRimLeft)
draw(engineRimRight)
draw(hullLeft)
draw(hullRight)
draw(nose)
draw(cockpit)
draw(join)
draw(cockpitHL)
draw(cockpitShadow )
draw(cap)