GMU:Einführung ins Programmieren mit Processing/final/Elastic Lace

From Medien Wiki
< GMU:Einführung ins Programmieren mit Processing‎ | final
Revision as of 17:32, 14 December 2011 by Ktrin (talk | contribs) (Created page with "= Elastic Lace = Recently a good friend of mine asked me to design a Web site for her small business for hand-made slips (thin skirts that are worn under other skirts). She line...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Elastic Lace

Recently a good friend of mine asked me to design a Web site for her small business for hand-made slips (thin skirts that are worn under other skirts). She lines her slips with lace and so, having recently worked with many images of lace for the Web site, I thought to try to program a lace pattern for this project in Processing.

Processing einfuehrung mertz elasticLace.jpg

Lace patterns can be infinitely complex, but I wanted to try to achieve something simple with some transparency and with the appearance that it is resting on the body. Because lace is a mixture of knots and weavings at different intervals, I thought to try to utilize a few overlapping trigonometric functions at different frequencies. After a few experiments, I came up with something that is akin to lace, but also appeared like something biological, like a layer of blood vessels lying just under the skin.

The final image recalls something in-between lace and blood vessels – something that lies just above and just below the skin. >> bodies revealed blood vessels

PROGRAM

Processing einfuehrung final dianna.jpg

float angle = 3.0;
float speed = 0.05;
float beginX = 20.0; // Initial x-coordinate
float beginY = 10.0; // Initial y-coordinate
float endX = 1500.0; // Final x-coordinate
float endY = 1500.0; // Final y-coordinate
float distX; // X-axis distance to move
float distY; // Y-axis distance to move
float exponent = 3.4; // Determines the curve
float x = 0.0; // Current x-coordinate
float y = 0.0; // Current y-coordinate
float step = 0.001; // Size of each step along the path
float pct = 0.0; // Percentage traveled (0.0 to 1.0)

float radius = 30.0; // Range of motion
float sx = 2.0;
float sy = 2.0;

void setup() {
  size(650, 650);
  strokeWeight(1);
  fill(234, 90, 90, 114);
  smooth();
  distX = endX - beginX;
  distY = endY - beginY;
}

void draw() {
  //fill(234,90,90,114);
  angle = angle + speed;
  pct += step;
  if (pct < 1.0) {
    x = beginX + (pct * distX);
    y = beginY + (pow(pct, exponent) * distY);
  }
  fill(234, 90, 90, 14);
  for (int i = 0; i < 600; i = i+90) {
    ellipse(x+i, y+i, (sin(angle + PI) * 5*i), 800);
    stroke(255);
    ellipse(x+i, y+i, (cos(angle + PI/8) * 5*i), 800);
    stroke(234, 190, 190, 14);
  }
  for (int w = 0; w < 600; w = w+45) {
    ellipse(x+w, y+w, (sin(angle + PI/4) * 4*w), 800);
    //stroke(255);
    ellipse(x+w, y+w, (cos(angle + PI/4) * 4*w), 800);
    stroke(66, 33, 133, 34);
    strokeWeight(1);
  }
}