TXN CAT

Dongle Cat

by Alex

HTML

<script src="https://s3.amazonaws.com/f.cl.ly/items/2m0430293G1z02302Q1u/pixi.min.js"></script>

CSS

body {
    margin: 0;
    padding: 0;
}

canvas {
    width: 100vw;
    height: 101vh;
}

JavaScript

w = 1024, h = 768;
var renderer = new PIXI.WebGLRenderer(w, h);

document.body.appendChild(renderer.view);

var stage = new PIXI.Container();
var container = new PIXI.Container();
var foreground = new PIXI.Container();
stage.addChild(container);
stage.addChild(foreground);

var cat, bg, d, f;

PIXI.loader.add('bg', 'https://www.augsburg-tourismus.de/assets/images/0/rathausplatz-7f972e48.jpg').load(function(loader, resources) { //M3VDxHJ.jpg
    bg = new PIXI.Sprite(resources.bg.texture);
    bg.position.x = w / 1.6;
    bg.position.y = h / 2;
    bg.scale.x = 1.0; // 1.6
    bg.scale.y = 1.1;
    bg.pivot.x = 1680 / 2; //1509 / 2;
    bg.pivot.y = 880 / 2; //935 / 2;
    container.addChild(bg);
});

var pickles = [];
PIXI.loader.add('pickle', 'https://upload.wikimedia.org/wikipedia/fr/thumb/9/9f/MAN_Logo.svg/640px-MAN_Logo.svg.png').load(function(loader, resources) {
    var shadow = new PIXI.filters.DropShadowFilter();
    shadow.distance = 0;
    shadow.blur = 20;

    for (i = 0; i < 8; i++) {
        var p = new PIXI.Sprite(resources.pickle.texture);
        p.position.y = Math.random() * 400;
        p.pivot.x = 480 / 2;
        p.pivot.y = 263 / 2;
        p.scale.x = 0.5;
        p.scale.y = 0.5;

        p.filters = [shadow];

        pickles[i] = p;
        foreground.addChild(p);
    }
});

PIXI.loader.add('cat',
    'https://s3.amazonaws.com/f.cl.ly/items/070k44422j0l24390L1E/mesmercat.png'
    //'https://s3.amazonaws.com/f.cl.ly/items/2P2q0c353G3I460F2C3L/koenig.png'
).load(function(loader, resources) {
    cat = new PIXI.Sprite(resources.cat.texture);
    cat.pivot.x = 250;
    cat.pivot.y = 320;
    cat.position.x = w / 2;
    cat.position.y = h;
    cat.scale.x = w / 500 * 0.6;
    cat.scale.y = h / 333 * 0.6;
    foreground.addChild(cat);
});


var mousex = w / 2,
    mousey = h / 2;
PIXI.loader.add('catdisplacement',
    'https://s3.amazonaws.com/f.cl.ly/items/0C3m1Q3O051l3K0E3k1S/mesmercatdisplacement.jpg'
   ...