Ny logotyp

27/2 2014
gjort js slump y

logo-smalllogoDet kändes rätt. I tiden, så att säga. Kärnvärden, strategi och designen av kaffemuggar kommer att komma så småningom, i ett separat dokument.
Iden bygger på ögats tvång att skapa tredimensionella tolkningar av en tvådimensionell form. Sex trianglar i en hexagon, lite slump, och hjärnan låter sig lekas med. Så här ser det ut i svg (med snap.svg.js):

//
// © 2014 lhli.net.
// Licence: http://creativecommons.org/licenses/by-sa/3.0/
//
$(document).ready(function() {  
    "use strict";

    var LOGOSIZE = 50;
    var CLRS = ['#eee','#111','#ff0'];
    var svg, logo, g, gg, matrix, rad;
   
    function setup() {
        svg = Snap("#logoCanvas");
        logo = svg.group();
        $("#logoCanvas").mousedown(function(){render();});
       
        g = svg.gradient('l(0, 0, 0, 1)'+ CLRS[0] +'-'+ CLRS[1]);
        gg = svg.gradient('l(0, 0, 0, 1)'+ CLRS[1] +'-'+ CLRS[0]);
        rad = (1/6)*Math.sqrt(3)*LOGOSIZE;
       
        matrix = new Snap.Matrix();
        matrix.translate(LOGOSIZE-((1/6)*Math.sqrt(3)*LOGOSIZE), LOGOSIZE-LOGOSIZE/2);
        matrix.rotate(30);
       
        logo.transform(matrix);
    }

    function render()
    {  
        logo.clear();

        var x = 0, y = 0, rotation, shape;
        for (var i=0, triangle; i < 6; i++) {
            triangle = svg.group();
            shape = equilateralTriangle(LOGOSIZE, 0, 0);
            triangle.add(shape);
            logo.add(triangle);
           
            if (Math.floor(Math.random()*6) === 0) { shape.attr({ fill: CLRS[Math.floor(Math.random()*clrs.length)] }) };
            else if (Math.floor(Math.random()*2) === 0) { shape.attr({ fill: g }) };
            else { shape.attr({ fill: gg }) };

            matrix = new Snap.Matrix();
           
            if (i === 3) {
                y += LOGOSIZE*Math.sqrt(0.75);
                x = 0;
            }
            if (i%2){
                rotation = (Math.floor(Math.random()*3)*120)+60;
                matrix.translate(x, y-rad);
            } else {
                rotation = Math.floor(Math.random()*3)*120;
                matrix.translate(x, y);
            }
            matrix.rotate(rotation);
            matrix.scale(1.01, 1.01);

            x += LOGOSIZE/2;
           
            triangle.transform(matrix);
        }; 
    };

    function equilateralTriangle(side, x, y)
    {
        var height = side*Math.sqrt(0.75);
        var innerRadius = (1/6)*Math.sqrt(3)*side;
        return svg.polygon([
            (side/2)+x, innerRadius+y,
            x, -(height-innerRadius)+y,
            (-side/2)+x, innerRadius+y
            ]);
    };
         
    setup();
    render();
});

Och så här ser det ut med canvas (med easel.js):

//
// © 2014 lhli.net.
// Licence: http://creativecommons.org/licenses/by-sa/3.0/
//
$(document).ready(function() {  
    var LOGOSIZE = 40; 
    var myCanvas, myStage;
    var logo = new Container();
   
    function setup() {
        myCanvas = document.getElementById("logoCanvas");
        var context = myCanvas.getContext("2d");

        myStage = new Stage(myCanvas);
        myStage.addChild(logo);

        $("#logoCanvas").mousedown(function(){render();});

        logo.x=(myCanvas.width/2)-((1/6)*Math.sqrt(3)*LOGOSIZE);
        logo.y=(myCanvas.height/2)-LOGOSIZE/2;

        logo.rotation = 30;
    }

    function render() {
        logo.removeAllChildren();

        var x = 0, y = 0, rad = (1/6)*Math.sqrt(3)*LOGOSIZE, clrs = ['#eee','#111','#ff0'];
        for (var i=0, triangle; i < 6; i++) {
            triangle = new Shape();
            logo.addChild(triangle);
            if (Math.floor(Math.random()*2) === 0) triangle.graphics.beginLinearGradientFill(['#eee','#111'],[0,1],0,rad,0,-rad*2);
            else triangle.graphics.beginLinearGradientFill(['#111','#eee'],[0,1],0,rad,0,-rad*2);
            if (Math.floor(Math.random()*6) === 0) triangle.graphics.beginFill(clrs[Math.floor(Math.random()*clrs.length)]);

            drawEquilateralTriangle(triangle, LOGOSIZE, 0, 0);

            if (i === 3) {
                y += LOGOSIZE*Math.sqrt(0.75);
                x = 0;
            }
            if (i%2){
                triangle.rotation = (Math.floor(Math.random()*3)*120)+60;
                triangle.x = x;
                triangle.y = y-rad;
            } else {
                triangle.rotation = (Math.floor(Math.random()*3)*120);
                triangle.x = x;
                triangle.y = y;
            }
            triangle.scaleX = triangle.scaleY = 1.01;
            x += LOGOSIZE/2;
            triangle.graphics.endFill();
        }; 
        myStage.update();
    };

    function drawEquilateralTriangle(obj, side, x, y) {
        var height = side*Math.sqrt(0.75);
        var innerRadius = (1/6)*Math.sqrt(3)*side;
        obj.graphics.moveTo((side/2)+x, innerRadius+y);
        obj.graphics.lineTo(x, -(height-innerRadius)+y);
        obj.graphics.lineTo((-side/2)+x, innerRadius+y);
        obj.graphics.lineTo((side/2)+x, innerRadius+y);
    };
   
    setup();
    render();
});