Squarshed Squares
I needed an interesting new linear texture so I made this SWF to generate rectangular shapes with the following characteristics:
- All corners of each rectangular shape align on a single “X” pattern.
- The “X” crosses through the center of an invisible rectangle with 90 degree corners.
- The 90 degree corners are each located at the middle of their respective corner areas.
Getting everything to work the way I wanted was a bit more complicated than I initially expected. The code for the above SWF looks like this:
//
//
var minSquoreWidth = 20;
var maxSquoreWidth = 120;
var minSquoreHeight = 20;
var maxSquoreHeight = 120;
//
var minPositionX = 70;
var maxPositionX = 430;
var minPositionY = 70;
var maxPositionY = 430;
//
var innerWi = 0;
var outerWi = 1;
var innerRandom = 10;
var outerRandom = 10;
//
//
function drawSquores(x, y, wi, hi, inWi, outWi, inRand, outRand){
//
// Vars.
var yHi = y+hi;
var xWi = x+wi;
var hypot = Math.sqrt(wi*wi + hi*hi);
var xFactor = wi/hypot;
var yFactor = hi/hypot;
//
// Top Left Points.
var d1 = inWi + Math.random()*inRand;
var d2 = d1 + outWi + Math.random()*outRand;
var p1A = {x:x-d1*xFactor, y:y-d1*yFactor};
var p1C = {x:x-d2*xFactor, y:y-d2*yFactor};
//
d1 = inWi + Math.random()*inRand;
d2 = d1 + outWi + Math.random()*outRand;
var p1B = {x:x+d1*xFactor, y:y+d1*yFactor};
var p1D = {x:x+d2*xFactor, y:y+d2*yFactor};
//
// Top Right Points.
d1 = inWi + Math.random()*inRand;
d2 = d1 + outWi + Math.random()*outRand;
var p2A = {x:xWi+d1*xFactor, y:y-d1*yFactor};
var p2C = {x:xWi+d2*xFactor, y:y-d2*yFactor};
//
d1 = inWi + Math.random()*inRand;
d2 = d1 + outWi + Math.random()*outRand;
var p2B = {x:xWi-d1*xFactor, y:y+d1*yFactor};
var p2D = {x:xWi-d2*xFactor, y:y+d2*yFactor};
//
// Bottom Right Points.
d1 = inWi + Math.random()*inRand;
d2 = d1 + outWi + Math.random()*outRand;
var p3A = {x:xWi+d1*xFactor, y:yHi+d1*yFactor};
var p3C = {x:xWi+d2*xFactor, y:yHi+d2*yFactor};
//
d1 = inWi + Math.random()*inRand;
d2 = d1 + outWi + Math.random()*outRand;
var p3B = {x:xWi-d1*xFactor, y:yHi-d1*yFactor};
var p3D = {x:xWi-d2*xFactor, y:yHi-d2*yFactor};
//
// Bottom Left Points.
d1 = inWi + Math.random()*inRand;
d2 = d1 + outWi + Math.random()*outRand;
var p4A = {x:x-d1*xFactor, y:yHi+d1*yFactor};
var p4C = {x:x-d2*xFactor, y:yHi+d2*yFactor};
//
d1 = inWi + Math.random()*inRand;
d2 = d1 + outWi + Math.random()*outRand;
var p4B = {x:x+d1*xFactor, y:yHi-d1*yFactor};
var p4D = {x:x+d2*xFactor, y:yHi-d2*yFactor};
//
beginFill(0x000000);
moveTo(p1C.x, p1C.y);
lineTo(p2C.x, p2C.y);
lineTo(p3C.x, p3C.y);
lineTo(p4C.x, p4C.y);
moveTo(p1D.x, p1D.y);
lineTo(p2D.x, p2D.y);
lineTo(p3D.x, p3D.y);
lineTo(p4D.x, p4D.y);
//
beginFill(0xFFFFFF);
moveTo(p1A.x, p1A.y);
lineTo(p2A.x, p2A.y);
lineTo(p3A.x, p3A.y);
lineTo(p4A.x, p4A.y);
moveTo(p1B.x, p1B.y);
lineTo(p2B.x, p2B.y);
lineTo(p3B.x, p3B.y);
lineTo(p4B.x, p4B.y);
}
//
//
var count = 0;
var goal = 100;
function drawRandomSquore(){
var wide = minSquoreWidth + (maxSquoreWidth-minSquoreWidth) * Math.random();
var high = minSquoreHeight + (maxSquoreHeight-minSquoreHeight) * Math.random();
var rx = minPositionX + (maxPositionX-minPositionX) * Math.random() - wide/2;
var ry = minPositionY + (maxPositionY-minPositionY) * Math.random() - high/2;
drawSquores(rx, ry, wide, high, innerWi, outerWi, innerRandom, outerRandom);
if(++count >goal) {
onKeyDown();
}
}
//
//
onEnterFrame = drawRandomSquore;
onMouseDown = function(){
if(onEnterFrame == null){
onEnterFrame = drawRandomSquore;
}else{
onEnterFrame = null;
}
}
onKeyDown = function (){
clear();
count = 0;
goal = Math.random()*150 + 50;
}
Key.addListener(this);
//
//
//
var minSquoreWidth = 20;
var maxSquoreWidth = 120;
var minSquoreHeight = 20;
var maxSquoreHeight = 120;
//
var minPositionX = 70;
var maxPositionX = 430;
var minPositionY = 70;
var maxPositionY = 430;
//
var innerWi = 0;
var outerWi = 1;
var innerRandom = 10;
var outerRandom = 10;
//
//
function drawSquores(x, y, wi, hi, inWi, outWi, inRand, outRand){
//
// Vars.
var yHi = y+hi;
var xWi = x+wi;
var hypot = Math.sqrt(wi*wi + hi*hi);
var xFactor = wi/hypot;
var yFactor = hi/hypot;
//
// Top Left Points.
var d1 = inWi + Math.random()*inRand;
var d2 = d1 + outWi + Math.random()*outRand;
var p1A = {x:x-d1*xFactor, y:y-d1*yFactor};
var p1C = {x:x-d2*xFactor, y:y-d2*yFactor};
//
d1 = inWi + Math.random()*inRand;
d2 = d1 + outWi + Math.random()*outRand;
var p1B = {x:x+d1*xFactor, y:y+d1*yFactor};
var p1D = {x:x+d2*xFactor, y:y+d2*yFactor};
//
// Top Right Points.
d1 = inWi + Math.random()*inRand;
d2 = d1 + outWi + Math.random()*outRand;
var p2A = {x:xWi+d1*xFactor, y:y-d1*yFactor};
var p2C = {x:xWi+d2*xFactor, y:y-d2*yFactor};
//
d1 = inWi + Math.random()*inRand;
d2 = d1 + outWi + Math.random()*outRand;
var p2B = {x:xWi-d1*xFactor, y:y+d1*yFactor};
var p2D = {x:xWi-d2*xFactor, y:y+d2*yFactor};
//
// Bottom Right Points.
d1 = inWi + Math.random()*inRand;
d2 = d1 + outWi + Math.random()*outRand;
var p3A = {x:xWi+d1*xFactor, y:yHi+d1*yFactor};
var p3C = {x:xWi+d2*xFactor, y:yHi+d2*yFactor};
//
d1 = inWi + Math.random()*inRand;
d2 = d1 + outWi + Math.random()*outRand;
var p3B = {x:xWi-d1*xFactor, y:yHi-d1*yFactor};
var p3D = {x:xWi-d2*xFactor, y:yHi-d2*yFactor};
//
// Bottom Left Points.
d1 = inWi + Math.random()*inRand;
d2 = d1 + outWi + Math.random()*outRand;
var p4A = {x:x-d1*xFactor, y:yHi+d1*yFactor};
var p4C = {x:x-d2*xFactor, y:yHi+d2*yFactor};
//
d1 = inWi + Math.random()*inRand;
d2 = d1 + outWi + Math.random()*outRand;
var p4B = {x:x+d1*xFactor, y:yHi-d1*yFactor};
var p4D = {x:x+d2*xFactor, y:yHi-d2*yFactor};
//
beginFill(0x000000);
moveTo(p1C.x, p1C.y);
lineTo(p2C.x, p2C.y);
lineTo(p3C.x, p3C.y);
lineTo(p4C.x, p4C.y);
moveTo(p1D.x, p1D.y);
lineTo(p2D.x, p2D.y);
lineTo(p3D.x, p3D.y);
lineTo(p4D.x, p4D.y);
//
beginFill(0xFFFFFF);
moveTo(p1A.x, p1A.y);
lineTo(p2A.x, p2A.y);
lineTo(p3A.x, p3A.y);
lineTo(p4A.x, p4A.y);
moveTo(p1B.x, p1B.y);
lineTo(p2B.x, p2B.y);
lineTo(p3B.x, p3B.y);
lineTo(p4B.x, p4B.y);
}
//
//
var count = 0;
var goal = 100;
function drawRandomSquore(){
var wide = minSquoreWidth + (maxSquoreWidth-minSquoreWidth) * Math.random();
var high = minSquoreHeight + (maxSquoreHeight-minSquoreHeight) * Math.random();
var rx = minPositionX + (maxPositionX-minPositionX) * Math.random() - wide/2;
var ry = minPositionY + (maxPositionY-minPositionY) * Math.random() - high/2;
drawSquores(rx, ry, wide, high, innerWi, outerWi, innerRandom, outerRandom);
if(++count >goal) {
onKeyDown();
}
}
//
//
onEnterFrame = drawRandomSquore;
onMouseDown = function(){
if(onEnterFrame == null){
onEnterFrame = drawRandomSquore;
}else{
onEnterFrame = null;
}
}
onKeyDown = function (){
clear();
count = 0;
goal = Math.random()*150 + 50;
}
Key.addListener(this);
//
//
Comments(4)
RSS Feeds
[…] black and white oval pattern goes along with “Squarshed Squares”. […]
@fff, I pasted the provided code into a new Flash document and everything worked fine. You may need to set your frame rate lower to slow it down a bit (the above SWF runs at about 10 frames per second). I’m not sure what you mean when you say “without transparency”.
What settings are you using to publish the SWF?
not working code, all comes too fast and without transparency like yours example.