Skip to content

Instantly share code, notes, and snippets.

@dsci

dsci/index.html

Created August 5, 2013 14:26
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save dsci/6156320 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save dsci/6156320 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. dsci created this gist Aug 5, 2013.
    1 change: 1 addition & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    <canvas id="404" width="600" height="600"></canvas>
    61 changes: 61 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,61 @@
    var canvas = document.getElementById('404');
    var context = canvas.getContext('2d');

    var time = Date.now();
    var initFontSize = 20;
    var maxPosX = 420.0;
    var minPosX = 10;

    function clear() {
    context.clearRect(0, 0, canvas.width, canvas.height);
    }

    function Message(context, posX, posY){
    this.context = context;
    this.posX = posX;
    this.posY = posY;

    this.messageSize = "30px";
    }

    Message.prototype.shout = function(text){
    this.context.webkitImageSmoothingEnabled = true;
    this.context.fillStyle = "white";
    this.context.font= this.messageSize + " Freckle Face";
    this.context.fillText(text,this.posX,this.posY);
    this.context.strokeStyle = 'black';
    this.context.strokeText(text,this.posX,this.posY);
    }
    var message = new Message(context,180,65);
    var reachedRight = false;
    var reachedLeft = true;
    function scaleError(){
    clear();

    var newX = ((Date.now() - time) / 1000);

    if(message.posX <= maxPosX && !reachedRight){
    message.posX += newX;
    var newFontSize = (initFontSize + newX)*2.5;
    message.messageSize = newFontSize+"px";
    }else{
    if(message.posX >= maxPosX){
    reachedRight = true;
    reachedLeft = false;
    }
    //message.posX -= newX;
    }

    if(message.posX <= minPosX){
    reachedRight = false;
    }

    if(reachedRight){
    message.messageSize = "60px";
    }


    message.shout("404");
    }

    setInterval(scaleError,50);
    10 changes: 10 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,10 @@
    @import url(http://fonts.googleapis.com/css?family=Freckle+Face);

    body{
    font-family: 'Freckle Face', cursive;
    }

    canvas{
    border:1px solid black;
    background-color: #eeeeee;
    }