Ny logotyp
27/2 2014gjort ◌ js slump y
Det 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();
});
// © 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();
});
// © 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();
});