Created a small little animation thing.

Author: freddxyz

landing/landing.js

@@ -1,3 +1,17 @@
+class Rectangle {
+    constructor(w,h, color, context){
+        this.w = w;
+        this.h = h;
+        this.color = color;
+        this.context = context;
+    }
+    draw(){
+        this.context.fillStyle = this.color;
+        this.context.fillRect(-this.w/2, -this.h/2, this.w, this.h);
+    }
+}
+
+
 window.onload = function(){
     var canvas = document.getElementById("landing_canvas");
     var context = canvas.getContext("2d")
@@ -12,6 +26,10 @@ window.onload = function(){
     var prevTick = Date.now();
     var deltaTime = 0;
     var rot = 0
+    var whiteSquare = new Rectangle(4000,4000, "white", context);
+    var redStripe = new Rectangle(33, 100, "red", context);
+    var squareX = window.innerWidth/2;
+    var squareY = window.innerHeight/2;
     var draw = function(){
         requestAnimationFrame(draw);
         context.canvas.width = window.innerWidth;
@@ -20,24 +38,30 @@ window.onload = function(){
         deltaTime = (currentTick - prevTick) / 1000;
         prevTick = currentTick;
 
-        if(ticker < 2.125){
-            rot += 360 * deltaTime;
+        if(ticker < 1){
+            squareX = window.innerWidth/2;
+            squareY = window.innerHeight/2;
+            whiteSquare.w -= deltaTime * 3900;
+            whiteSquare.h -= deltaTime * 3900;
+            rot += 765 * deltaTime;   
+        }else if(ticker > 1 && ticker < 1.5) {
+            rot -= 720 * (deltaTime * 1.5);
+            squareX = window.innerWidth/2 - (ticker - 1) * 500;
+            //TODO:
+            //scaling with window maybe
+            //uhhh finish animation
         }
-        context.translate(window.innerWidth/2, window.innerHeight/2)
+
+        context.translate(squareX, squareY)
         context.rotate(rot * (Math.PI/180))
-        rect(100, 100, "white");
-        rect(33, 100, "red");
+        whiteSquare.draw();
+        //redStripe.draw();
         ticker += deltaTime;
     }
 
     var fillBg = function(color){
         context.fillStyle = color;
         context.fillRect(0, 0, window.innerWidth, window.innerHeight);
     }
-
-    var rect = function(w, h, color){
-        context.fillStyle = color;
-        context.fillRect(-w/2, -h/2, w, h);
-    }
     requestAnimationFrame(draw);
 }