xxxxxxxxxx
258
var SKEW_FACTOR = 1.4;
var TRANSPARENT = true;
var I_SIZE = 8;
var STROKE_WEIGHT = 0.4;
var STROKE_COLOR = 200;
var BACKGROUND_COLOR = 30;
var mods = [];
var count;
var bgColor;
var strokeColor;
var lowestY = null;
var secondLowestY = null;
var largestY = null;
var lowestX = null;
var largestX = null;
function setup() {
createCanvas(windowHeight, windowHeight); // square
noLoop();
var wideCount = width / (I_SIZE * 3);
var highCount = height / (I_SIZE * 6.5);
var t = I_SIZE;
var l = t * 3;
var h = t * 4;
var index = 0;
var yt = -t / 4;
var yo = t + yt;
lowestX = l / 2;
lowestY = (h - t) - yo;
secondLowestY = (h - t) + yo;
largestX = Math.ceil(wideCount - 1) * l / 2;
secondLargestX = Math.ceil(wideCount - 2) * l / 2;
largestY = Math.floor(highCount) * (h - t) + yo;
for (var xc = 1; xc < wideCount; xc++) {
for (var yc = 1; yc < highCount; yc++) {
xOffset = xc * l / 2;
yOffset = yc * (h - t) + yo;
mods[index++] = new I(xOffset, yOffset, l, t, h);
yt = -yt
}
yo = -yo
}
bgColor = BACKGROUND_COLOR;
strokeColor = STROKE_COLOR;
}
function draw() {
//drawGrid();
if (!TRANSPARENT) {
background(bgColor);
}
for (var i = 0; i < mods.length; i++) {
if (mods[i].y === lowestY) {
// do nothing
} else if (mods[i].y === secondLowestY) { // bottom only
if (mods[i].x === lowestX || mods[i].x === largestX || mods[i].x === secondLargestX) {
// do nothing
} else {
mods[i].draw(drawIBottom);
}
} else if (mods[i].y === largestY) { // top only
if (mods[i].x === lowestX || mods[i].x === largestX || mods[i].x === secondLargestX) {
// do nothing
} else {
mods[i].draw(drawITop);
}
} else if (mods[i].x === lowestX) { // right only
mods[i].draw(drawIRight);
} else if (mods[i].x === largestX) { // left only
// do nothing
} else if (mods[i].x === secondLargestX) {
mods[i].draw(drawILeft);
} else {
mods[i].draw(drawI);
}
}
}
function drawGrid() {
push();
for (var x = 0; x < width; x += width / 40) {
for (var y = 0; y < height; y += height / 40) {
stroke(100);
strokeWeight(1);
stroke(100);
line(x, 0, x, height);
line(0, y, width, y);
}
}
pop();
}
function I(_x, _y, _l, _t, _h) {
this.x = _x;
this.y = _y;
this.l = _l;
this.t = _t;
this.h = _h;
}
I.prototype.draw = function (drawFunction) {
push();
translate(this.x, this.y);
strokeWeight(STROKE_WEIGHT);
if (!TRANSPARENT) {
stroke(strokeColor);
fill(bgColor);
} else {
stroke(30);
noFill();
}
smooth();
beginShape();
drawFunction(this.x, this.y, this.l, this.t, this.h, this.skew());
pop();
}
// @return [horizontal lines, middle vertical lines, horizontal smalls, vertical smalls ]
I.prototype.skew = function () {
//return [0, 2, 0, 0];
middleX = mods[mods.length - 1].x;
middleY = mods[mods.length - 1].y;
xOffset = Math.abs((this.x - middleX / 2)) / 100;
yOffset = Math.abs((this.y - middleY / 2)) / 100;
skew = (xOffset + yOffset) * SKEW_FACTOR;
if (this.x > middleX / 2) {
if (this.y < middleY / 2) {
return [skew, skew, skew, skew]
} else {
return [-skew, -skew, skew, skew];
}
} else {
if (this.y < middleY / 2) {
return [skew, skew, -skew, -skew];
} else {
return [-skew, -skew, -skew, -skew];
}
}
}
function drawI(x, y, l, t, h, skew) {
vertex(x, y);
// top line -> vertex(x + l, y);
vertex(x + l / 2, y + skew[0]);
vertex(x + l, y);
// top right vertical -> vertex(x + l, y + t);
vertex(x + l - skew[3], y + t / 2);
drawIRight(x, y, l, t, h, skew);
// bottom right vertical -> vertex(x + l, y + h + t);
vertex(x + l - skew[3], y + h + t / 2);
vertex(x + l, y + h + t);
// bottom line -> vertex(x, y + h + t);
vertex(x + l / 2, y + h + t - skew[0]);
vertex(x, y + h + t);
// bottom left vertical -> vertex(x, y + h);
vertex(x + skew[3], y + h + t / 2);
drawILeft(x, y, l, t, h, skew);
// top left vertical -> vertex(x, y);
vertex(x + skew[3], y + t / 2);
vertex(x, y);
endShape();
}
function drawIBottom(x, y, l, t, h, skew) {
// bottom right horizontal -> vertex(x + l, y + h);
vertex(x + l, y + h);
// bottom right vertical -> vertex(x + l, y + h + t);
vertex(x + l - skew[3], y + h + t / 2);
vertex(x + l, y + h + t);
// bottom line -> vertex(x, y + h + t);
vertex(x + l / 2, y + h + t - skew[0]);
vertex(x, y + h + t);
// bottom left vertical -> vertex(x, y + h);
vertex(x + skew[3], y + h + t / 2);
vertex(x, y + h);
endShape();
}
function drawITop(x, y, l, t, h, skew) {
// top left horizontal -> vertex(x, y + t);
vertex(x, y + t);
// top left vertical -> vertex(x, y);
vertex(x + skew[3], y + t / 2);
vertex(x, y);
// top line -> vertex(x + l, y);
vertex(x + l / 2, y + skew[0]);
vertex(x + l, y);
// top right vertical -> vertex(x + l, y + t);
vertex(x + l - skew[3], y + t / 2);
vertex(x + l, y + t);
endShape();
}
function drawIRight(x, y, l, t, h, skew) {
// top right vertical -> vertex(x + l, y + t);
vertex(x + l, y + t);
// top right horizontal -> vertex(x + l / 2 + t / 2, y + t);
vertex(x + l / 2 + t, y + t + skew[2]);
vertex(x + l / 2 + t / 2, y + t);
// middle right vertical -> vertex(x + l / 2 + t / 2, y + h);
vertex(x + l / 2 + t / 2 + skew[1], y + h - 1.5 * t);
vertex(x + l / 2 + t / 2, y + h);
// bottom right horizontal -> vertex(x + l, y + h);
vertex(x + l - t / 2, y + h - skew[2]);
vertex(x + l, y + h);
endShape();
}
function drawILeft(x, y, l, t, h, skew) {
// bottom left vertical -> vertex(x, y + h);
vertex(x, y + h);
// bottom left horizontal -> vertex(x + l / 2 - t / 2, y + h);
vertex(x + l / 2 - t, y + h - skew[2]);
vertex(x + l / 2 - t / 2, y + h);
// middle left vertical -> vertex(x + l / 2 - t / 2, y + t);
vertex(x + l / 2 - t / 2 - skew[1], y + 2.5 * t);
vertex(x + l / 2 - t / 2, y + t);
// top left horizontal -> vertex(x, y + t);
vertex(x + t / 2, y + t + skew[2]);
vertex(x, y + t);
endShape();
}