Screen

./wp-content/uploads/sites/2/2013/10/frame-0070.pdf
Confetti Screen 1

./wp-content/uploads/sites/2/2013/10/frame-0082.pdf
Confetti Screen 2

Description

This screen design was mostly just an interesting mistake that came about while I was working on my original screen concept. The basic way that the sketch works is that a set of uniform particles are placed at random locations in the window. Then, a repulsive force between the particles gradually pushes them apart. The particles draw their own trails as paths, and the stroke outliner helper function turns those paths into wider strokes. The sketch stops when the user presses ‘d’ and is recorded when the user presses ‘r’.

Code

Main

import oscP5.*;
import netP5.*;
import processing.pdf.*;

ArrayList myParticles;
boolean doneDrawing = false;

int margin;
boolean record = false;

void setup() {
  size(864, 864);
  myParticles = new ArrayList();

  margin = 50;

  for (int i=0; i<900; i++) {
    float rx = random(margin, width-margin);
    float ry = random(margin, height-margin);
    myParticles.add( new Particle(rx, ry));
  }
  smooth();
}

void mousePressed() {
  noLoop();
}
void mouseReleased() {
  loop();
}
void keyPressed() {
  if (key == 'd') {
    doneDrawing = true;
  }
  if (key == 'r') {
    record = true;
  }
}

void draw() {
  if (record) {
    // Note that #### will be replaced with the frame number. Fancy!
    beginRecord(PDF, "frame-####.pdf");
  }

  // background (255);
  float gravityForcex = 0;
  float gravityForcey = 0.02;
  float mutualRepulsionAmount = 3.0;

  if (doneDrawing == false) {
    // calculating repulsion and updating particles
    for (int i=0; i 1.0) {

          float componentInX = dx/dh;
          float componentInY = dy/dh;
          float proportionToDistanceSquared = 1.0/(dh*dh);

          float repulsionForcex = mutualRepulsionAmount * componentInX * proportionToDistanceSquared;
          float repulsionForcey = mutualRepulsionAmount * componentInY * proportionToDistanceSquared;

          ithParticle.addForce( repulsionForcex, repulsionForcey); // add in forces
          jthParticle.addForce(-repulsionForcex, -repulsionForcey); // add in forces
        }
      }
    }

    for (int i=0; i

Particle

class Particle {
  //float px;
  //float py;
  float vx;
  float vy;
  PVector currentPosition;
  ArrayList trail;
  int trailWidth;
  float damping;
  float mass;
  boolean bLimitVelocities = true;
  boolean bPeriodicBoundaries = false;

  // Constructor for the Particle
  Particle (float x, float y) {
    currentPosition = new PVector(x, y);
    vx = vy = 0;
    damping = 0.96;
    mass = 1.0;
    trail = new ArrayList();
    trailWidth = 5;
  }

  // Add a force in. One step of Euler integration.
  void addForce (float fx, float fy) {
    float ax = fx / mass;
    float ay = fy / mass;
    vx += ax;
    vy += ay;
  }

  // Update the position. Another step of Euler integration.
  void update() {
    vx *= damping;
    vy *= damping;
    limitVelocities();
    handleBoundaries();
    currentPosition.x += vx;
    currentPosition.y += vy;
    PVector logPosition = new PVector(currentPosition.x, currentPosition.y);
    trail.add(logPosition);
    println(trail.size());
  }

  void limitVelocities(){
    if (bLimitVelocities){
      float speed = sqrt(vx*vx + vy*vy);
      float maxSpeed = 10;
      if (speed > maxSpeed){
        vx *= maxSpeed/speed;
        vy *= maxSpeed/speed;
      }
    }
  }

  void handleBoundaries() {
    // wraparound
    if (bPeriodicBoundaries) {
      if (currentPosition.x > width - margin ) currentPosition.x -= width;
      if (currentPosition.x < margin     ) currentPosition.x += width;
      if (currentPosition.y > height - margin) currentPosition.y -= height;
      if (currentPosition.y < margin     ) currentPosition.y += height;
    }
    // bounce
    else {
      if (currentPosition.x > width - margin ) vx = -vx;
      if (currentPosition.x < margin     ) vx = -vx;
      if (currentPosition.y > height - margin) vy = -vy;
      if (currentPosition.y < margin     ) vy = -vy;
    }
  }

 /* I want my particles to draw their trails but can't figure out how. Thoughts? */
  void render() {
    drawStrokeOutline(trail, trailWidth);
  }
}

Simple Stroke Outliner

void drawStrokeOutline(ArrayList points, int strokeWidth) {
  noFill();
  stroke(0);
  strokeWeight(1);

  beginShape();
  // iterate over points in array going from to back, drawing shape
  for (int i=0; i < points.size(); i++) {
    PVector currentPoint = points.get(i);
    vertex(currentPoint.x, currentPoint.y);
  }
  endShape();

  beginShape();
  // then go backwards, and shift all points down by strokeWidth, 
  // continuing the same shape
  int lastIndex = points.size() - 1;
  for (int i=lastIndex; i >=0; i--) {
    PVector currentPoint = points.get(i);
    vertex(currentPoint.x - strokeWidth, currentPoint.y + (strokeWidth*0.5));
  }
  endShape();

  /* delete later
   stroke(0);
   PVector sPoint = points.get(points.size() - 1);
   line(sPoint.x, sPoint.y, sPoint.x - strokeWidth, sPoint.y + (strokeWidth*0.5));
  */

  if (doneDrawing) {  // draw start cap
    stroke(0);
    PVector startPoint = points.get(0);
    line(startPoint.x, startPoint.y, startPoint.x - strokeWidth, startPoint.y + (strokeWidth*0.5));

    // close line by drawing caps
    PVector endPoint = points.get(lastIndex);
    line(endPoint.x, endPoint.y, endPoint.x - strokeWidth, endPoint.y + (strokeWidth*0.5));
  }
}

That’s right folks – we’ve been lied to this entire time by our art professors and the like that white is not a color, but a tone (or maybe it was just me). I had recently received an email from Golan informing me that, despite how it appeared to be suitable for cutting, my laser cut design failed. Because white is a color.

I am assuming what happened with my design was that, because I constructed the arcs with the ‘arc’ primitive and used strokeWeights / color manipulation to create the illusion of an outlined curve, the laser cutter misinterpreted the white strokes – which were meant to be holes – as filled-in shapes.

My code will have to undergo some revisions; and the code for creating the arcs will not be as short and sweet as I hoped it would be. Thankfully, Golan gave me some reference code (below) to assist me with making the necessary changes. Regardless of the additional work that must be done to make the design compatible with the laser cutter, this is certainly a valuable learning experience that will be useful for my future laser cutting endeavors.

I find this incident to be funny, because while we can make judgments on how a program or machine behaves based on what we see visually, things can be interpreted in a completely different way. My high school computer science teacher once told us that our programs are only as smart as we are, but I think there are some cases where they can be just a little bit dumber.

I hope none of you guys ran into the same issue that I had. 😛

/*
Ticha 
White is a color. Your lasercut failed. 
Run this program to understand the solution.
Please write a blog post explaining why this is so.
*/

void setup() {
  size(450, 400);
}

void draw() {
  background (220, 255, 220); 
  noFill(); 
  
  // Properties of the arc
  float arcCenterX = 300;
  float arcCenterY = 200;
  float angleA = radians (mouseX); 
  float angleB = radians (mouseY); 
  float startAngle = min(angleA, angleB); 
  float endAngle   = max(angleA, angleB); 
  float innerDiam  = 160;
  float outerDiam  = 200;
  
  float averageDiam = (innerDiam + outerDiam)/2;
  float averageRadius = averageDiam/2;
  float littleArcDiam = (outerDiam - innerDiam)/2; 

  // draw the center points of the endcap arcs
  float p1x = arcCenterX + averageRadius * cos (startAngle); 
  float p1y = arcCenterY + averageRadius * sin (startAngle); 
  float p2x = arcCenterX + averageRadius * cos (endAngle); 
  float p2y = arcCenterY + averageRadius * sin (endAngle); 
  stroke (255, 120, 0, 120); 
  ellipse (p1x, p1y, 3, 3); 
  ellipse (p2x, p2y, 3, 3); 

  // draw the spine, which is just for reference
  stroke (255, 120, 0, 120); 
  arc(arcCenterX, arcCenterY, averageDiam, averageDiam, startAngle, endAngle);

  // draw the main arcs (inner and outer), in lblue
  stroke (0, 0, 255); 
  arc(arcCenterX, arcCenterY, innerDiam, innerDiam, startAngle, endAngle);
  arc(arcCenterX, arcCenterY, outerDiam, outerDiam, startAngle, endAngle);

  // draw the endcap arcs, in purple
  stroke (255, 0, 255); 
  arc(p1x, p1y, littleArcDiam, littleArcDiam, startAngle-PI, startAngle ); 
  arc(p2x, p2y, littleArcDiam, littleArcDiam, endAngle, endAngle+PI );
}

Inspired by this topography-style graphic I found while scrolling through Tumblr, as well as Ian Dixon’s ‘Roots’, I studied his code, along with other organic and Perlin noise simulations to try to recreate the organic, flowy blobs, and enclosing them within a circle to make for an interesting silhouette I wouldn’t have the patience of cutting by hand.

Unfortunately I haven’t been able to figure out how to get the outlines, as opposed to trying to be smart and having white eclipse trails over a black circle. At the same time I have yet to figure out how to implement a repulsion system for each drawing particle so as to make them stay a little more separate. Hopefully I can figure out something soon.

./wp-content/uploads/sites/2/2013/10/organicircle4.pdf

organicircle4

Concept

My concept for the lasercut screen was to have a screen with a pattern of cutouts similar to the pattern of highlights on water/waves.

 

A trace of a wave image in illustrator.

The Tale of Many Dead Ends

I did not manage to create the kind of pattern that I wanted to. I tried a bunch of things that didn’t work, then ended up using one of my more interesting mistakes for the screen. These are some of the things that didn’t work:

Creating Ripple Force Field

I couldn’t manage to turn ripples into a flow field.

One failed approach was to create a flow field (like the one described in Chapter 6 of the Nature of Code) using ripples to determine the strong and weak points of the field. I think this failed because I didn’t spend enough time thinking about how to take circles—graphic ripples—and translate them into a flow field.

Note: I also couldn’t find the chapter in the Nature of Code Book while I was working on it—refound it while writing this. It would have been helpful to review while trying to code the ripples thing.

Playing with Physics

After I figured out that the early universe had similar patterns to light on water, I decided to try to simulate distributed particles with certain masses and gravity forces. I spent a fair amount of time just messing around with repulsion forces, masses, and velocities, trying to see if I could get the particles to attract/repulse into the right pattern (with the particles drawing trails behind them).

Things that happened while I played with the constants in my particle simulations.

Clicking to Disturb Particles

My next attempt was to just set up a field of particles, then apply a repulsive force when and where the mouse was clicked. I figured I could create my own waves until a pattern I liked emerged, then trace through or around the particles to create my pattern. The first part of this approach worked, but I could not find a good enough approach to tracing.

Connect Closest

The first thing I tried was just having particles connect to the ones closest to them. This approach was not well thought out, and that became apparent very quickly when I implemented it. Connecting the particles created overlapping geometric shapes that weren’t really in the pattern I wanted, and which would also probably leave me with a shredded piece of board rather than a cut out screen if I used it with the laser cutter. (Since the approaches flaws were apparent, I didn’t fix the bugs in it, which explains some of the random seeming lines in the screenshot below.)

Blob Tracing

I decided to try tracing the darkest areas of the particles in order to create the forms I wanted. I looked at many different blob tracing libraries, some of which worked and some of which didn’t:

• BlobDetection – didn’t work
• openCV blobs – didn’t work (meant for video)
• dieWaldCV – kind of worked, but didn’t smooth the edges of my blobs enough to my taste. This might have ended up working if I had played with the color/gradients of the blobs themselves.

 

One approach I didn’t try was making the blob tracing libraries trace the white areas rather than the black dots. That might have gotten me closer to what I wanted, but it also might have just produced ugly blobs.

Code

Code: https://github.com/juliat/lasercut-screen

Side Note: Hopefully Helpful Helper Function

I wrote a really basic helper function that takes in a normal stroke and draws an outlined version of it. This may be useful to others: helper function code

The pattern currently does not utilize a particle system. I am still working on making each hexagonal unit (as a particle) stack on top of each other in an organic way using repulsion force. While I’m still tweaking that, I put together this image as my placeholder piece for now.

poop

UPDATE!
The code is working precisely as I described now. Here’s the son-of-a-bitch:
Link to the piece on OP: https://openprocessing.orgsketch/113878

poop 

ArrayList myPattern;
int maxPattern = 1;

void setup() {
  size (864, 864);
  myPattern = new ArrayList();
}

void draw() {

  background(255);

  for (int i=0; i= ithPattern.py) {

        float jx = jthPattern.px;
        float jy = jthPattern.py;
        float ix = ithPattern.px;
        float iy = ithPattern.py;
        float distance = sqrt((jy-iy)*(jy-iy) + (jx-ix)*(jx-ix));

        //radius of pattern
        if (distance < (jthPattern.l*2.6 + ithPattern.l*2.6)) { 
          myPattern.get(i).addForce(0, 0);
          ithPattern.vy = 0;
        }
      }
    }

    ithPattern.update();
    ithPattern.render();
  }

  if (maxPattern < 400) {
    maxPattern ++;
  }
}

//=========================================================================


class Pattern {
  float l;
  float ptheta;
  float px;
  float py;
  float vx;
  float vy;

  //constructor for Pattern
  Pattern(float x, float y, float theta, float rl) {
    ptheta = theta;
    px = x;
    py = y;
    l = rl;
  }

  // Add a force in. One step of Euler integration.
  void addForce (float fx, float fy) {
    float ax = fx;
    float ay = fy;
    vx += ax;
    vy += ay;
  }

  void update() {
    px += vx;
    py += vy;
    if (py > height) { //land
      py = height;
    }
  }

  void render() {
    pushMatrix();
    translate(px, py);
    rotate(ptheta);
    noFill();
    strokeWeight(1);
    line(-l, 0, -l/2, round(-0.866*l));
    line(-l/2, round(-0.866*l), l/2, round(-0.866*l));
    line(l/2, round(-0.866*l), l, 0);
    line(l, 0, l/2, round(l*0.866));
    line(l/2, round(l*0.866), -l/2, round(l*0.866));
    line(-l/2, round(l*0.866), -l, 0);
    for (int i = 0; i < 6; i++) {
      rotate(PI/3);
      rect(-l/2, 3*l/2, l, l/2);
    }
    popMatrix();
  }
}

[EDIT]

Since my last lasercut screen design proved to be an abysmal failure… here is the follow up.

./wp-content/uploads/sites/2/2013/10/frame-0031.pdf
./wp-content/uploads/sites/2/2013/10/frame-0060.pdf
./wp-content/uploads/sites/2/2013/10/frame-0300.pdf
./wp-content/uploads/sites/2/2013/10/frame-0383.pdf
./wp-content/uploads/sites/2/2013/10/frame-0415.pdf
./wp-content/uploads/sites/2/2013/10/frame-0784.pdf
./wp-content/uploads/sites/2/2013/10/frame-0791.pdf
./wp-content/uploads/sites/2/2013/10/frame-2213.pdf
./wp-content/uploads/sites/2/2013/10/frame-2654.pdf

Although it turns out there is in fact a way to flatten images like the first one I produced in Rhino 3D… I would be beyond pleased if that worked, but until then… I will lasercut one from the above selection as soon as I can figure out how to find/book/use the lasercutter.
—

This design is extremely simple, made by a series of small circles attracted to a central circle. In this way, I hope to see the most light come through at the center of the design.

 

 
./wp-content/uploads/sites/2/2013/10/Kristina-LaserScreen-copy.pdf

Here is my final version of my PDF — save for having to tweak some things to get it to laser cut. The idea behind having just the barest most minimalistic way is that snow itself is minimalistic/white. Additionally, I wanted something which wouldn’t completely delete Os and Ds on the laser cutter.

Warp

I was thinking about Wood Bora for this project and imagining what would happen if they co-ordinated their “boring” efforts.

I wanted to create a point mesh that would then be distorted by a point travelling over it using an inverse square relationship.

Early attempts:

Unfortunately I was unable to get the points to stay in their new positions and had to borrow some code of the internet.

Using an adaptation of code that Golan had written for me and some help from Miles. The code is no longer borrowed, but my own!

Final attempts:

./wp-content/uploads/sites/2/2013/10/5.pdf
./wp-content/uploads/sites/2/2013/10/4.pdf
./wp-content/uploads/sites/2/2013/10/3.pdf
./wp-content/uploads/sites/2/2013/10/2.pdf
./wp-content/uploads/sites/2/2013/10/6.pdf
./wp-content/uploads/sites/2/2013/10/1.pdf

int numParticles = 19600;
PVector[] positions = new PVector[numParticles];

void setup() {
  size (700, 700); 
  smooth();
  noStroke();
  noFill(); 
  fill(0);

  for (int y=0; y<140; y++) {
    for (int x=0; x<140; x++) {
      positions[y*140+x] = new PVector(x*5, y*5);
    }
  }
}

void draw() {
  background(255); 
  float xOffset = 0; 
  float yOffset = 0;
  float xScale = 5; 
  float yScale = 5; 
  float distortion = .08; 

  for (int y=0; y<140; y++) {
    for (int x=0; x<140; x++) {
      int index = y * 140 + x;
      float px = positions[index].x; 
      float py = positions[index].y;

      if (mousePressed) {

        float dx = px - mouseX;
        float dy = py - mouseY;
      
      float dh = sqrt(dx*dx + dy*dy); 
      if ( dh > 0) {
        px += distortion * dx/pow(dh, .7);
        py += distortion * dy/pow(dh, .7);
      }}
      //rect(px, py, 1, 1);
      positions[y * 140 + x] = new PVector(px, py);
      rect(positions[index].x, positions[index].y, 1, 1);
    }
  }
}

./wp-content/uploads/sites/2/2013/10/laser_cut1.pdf

Was supposed to go for shattered-glass look, but shattered glass has a lot more randomness… So it turned out looking like a spider web. Heh. Had quite a bit of trouble not getting the lines to overlap, which made adding randomness a lot harder.

Updated to draw shapes using only black lines (no whites), and made the border of the shapes proportional to closeness to center. Had to review some trig to do this. Now it looks like a snowflake people can cut out just from paper. Eh..

import processing.pdf.*;

ArrayList< Arraylist > allVeins;

float defaultDP; //default percentage of length of vein
float currDP;
int defaultV; //base # of veins
int currV;
boolean recording;

void setup() {
  size(864, 864);
  background(255);
  recording = false;

  allVeins = new ArrayList< Arraylist >();

  defaultDP = 1.0;
  defaultV = 24;
  currDP = defaultDP;
  currV = defaultV;

  setNewVeins(currV);
}

void setNewVeins(int n) {
  allVeins.clear();
  setLvl(n, 1.0);
}

void setLvl(int n, float percent) {
  ArrayList veins = new ArrayList< Vein>();

  for (int i=0; i lvl = allVeins.get(0);
  int n = lvl.size();

  beginShape();
  for (int i=0; i lvl0 = allVeins.get(j);
  int n = lvl0.size();
  float da = 0.07;
  float dd = 0.2;

  ArrayList lvl1 = allVeins.get(j+1);

  for (int i=0; i

					
					
			

./wp-content/uploads/sites/2/2013/10/Screen.pdf

Screen

I started thinking about this project with the nature of screens. I thought about old fashioned planetariums I had when I was a child, and how they used screens with holes to project constellations on the ceiling. I wanted to make “personal constellations” with my screen:patterns of holes that generated symbols/ imagery specific to my visual vocabulary. I chose a symbol I use in my work, the egg, as the constellation in this instance.

My simulation plays with the radii of circles. A field of particles is set, then a growth rate force is determined by each particle’s distance to a given point. That force is multiplied by the radius of each circle, plus a little added randomness to the particle’s position, to form a design.I could not figure out how to make a curved boundary, so I set the particles manually. I got several interesting, non-cuttable designs from this, like this:

I wanted my particles to behave organically as well, forming an egg of cells. Essentially, an egg cell. I want to return to the design with spring connected particles to achieve this.

 

 

/*Rachel Moeller
Particle System:Amebloid 4th Chakric Connections:
                Blood Vessels
9/28/13
*/
class Particle{
  //Center
  float px;
  float py;
  //Velocity
  float vx;
  float vy;
  //Radius
  float radius;
  
  Particle()
  {
   vx=0;
   vy=0;
  }
  
  Particle(float x, float y,float vxx, float vyy, float r)
  {
   px=x;
   py=y; 
   vx=vxx;
   vy=vyy;
   radius=r;
  }
  
  
  
  void update(float friction)
  {
    //friction
    vx*=friction;
    vy*=friction;
    //containment to the window+border
    //condiseration given to maximum radius
    if(px>width-10){vx=-vx;}
    if(px<10){vx=-vx;}
    if(py>height-10){vy=-vy;}
    if(py<10){vy=-vy;}
    //movement
    
    px+=vx;
    py+=vy;
  }
  
 
  
  void render(float gr)
  {
    noFill();
    
    ellipse(px,py,radius*gr,radius*gr);
 
  
  }   
}

Particle[] pArray;
int numParticles;
float emitterX;
float emitterY;
float growthRate;
float originX;
float originY;


void setup()
{
  size(400,400);
  originX=width/2;
  originY=height/2;
  emitterX=(width/2)+50;
  emitterY=(width/2)+50;
  numParticles=260;
  pArray=new Particle[numParticles];
  int j=10;
  int r=2;
  float w2=width/2;
  float a=random(-3,3);
  float ax=random(-3,3);
  float ay=random(-2,2);
 
  pArray[0]=new Particle(w2-5,10,0,0,r);
  pArray[1]=new Particle(w2+5,10,0,0,r);
  //1
  pArray[2]=new Particle(w2-15,25,0,0,r);
  pArray[3]=new Particle(w2,25,0,0,r);
  pArray[4]=new Particle(w2+15,25,0,0,r);
  //2
  pArray[5]=new Particle(w2-35,40,0,0,r);
  pArray[6]=new Particle(w2-20,40,0,0,r);
  pArray[7]=new Particle(w2-7,40,0,0,r);
  pArray[8]=new Particle(w2,40,0,0,r);
  pArray[8]=new Particle(w2+7,40,0,0,r);
  pArray[9]=new Particle(w2+20,40,0,0,r);
  pArray[10]=new Particle(w2+35,40,0,0,r);
  //3
  pArray[11]=new Particle(w2-45,55,0,0,r);
  pArray[12]=new Particle(w2-30,55,0,0,r);
  pArray[13]=new Particle(w2-15,55,0,0,r);
  pArray[14]=new Particle(w2,55,0,0,r);
  pArray[15]=new Particle(w2+15,55,0,0,r);
  pArray[16]=new Particle(w2+30,55,0,0,r);
  pArray[17]=new Particle(w2+45,55,0,0,r);
  //4
  pArray[18]=new Particle(w2-55,70,0,0,r);
  pArray[19]=new Particle(w2-40,70,0,0,r);
  pArray[20]=new Particle(w2-25,70,0,0,r);
  pArray[21]=new Particle(w2-10,70,0,0,r);
  pArray[22]=new Particle(w2+10,70,0,0,r);
  pArray[23]=new Particle(w2+25,70,0,0,r);
  pArray[24]=new Particle(w2+40,70,0,0,r);
  pArray[25]=new Particle(w2+55,70,0,0,r);
  //5
  pArray[26]=new Particle(w2-65,85,0,0,r);
  pArray[27]=new Particle(w2-50,85,0,0,r);
  pArray[28]=new Particle(w2-35,85,0,0,r);
  pArray[29]=new Particle(w2-20,85,0,0,r);
  pArray[30]=new Particle(w2-7,85,0,0,r);
  pArray[31]=new Particle(w2+7,85,0,0,r);
  pArray[32]=new Particle(w2+20,85,0,0,r);
  pArray[33]=new Particle(w2+35,85,0,0,r);
  pArray[34]=new Particle(w2+50,85,0,0,r);
  pArray[35]=new Particle(w2+65,85,0,0,r);
  //6
  pArray[36]=new Particle(w2-75,100,0,0,r*3);
  pArray[37]=new Particle(w2-60,100,0,0,r);
  pArray[38]=new Particle(w2-45,100,0,0,r);
  pArray[39]=new Particle(w2-30,100,0,0,r);
  pArray[40]=new Particle(w2-15,100,0,0,r);
  pArray[41]=new Particle(w2,100,0,0,r);
  pArray[42]=new Particle(w2+15,100,0,0,r);
  pArray[43]=new Particle(w2+30,100,0,0,r);
  pArray[44]=new Particle(w2+45,100,0,0,r);
  pArray[45]=new Particle(w2+60,100,0,0,r);
  pArray[46]=new Particle(w2+75,100,0,0,r*3);
  //7
  pArray[47]=new Particle(w2-85,115,0,0,r*1.4);
  pArray[48]=new Particle(w2-70,115,0,0,r*7);
  pArray[49]=new Particle(w2-55,115,0,0,r);
  pArray[50]=new Particle(w2-40,115,0,0,r);
  pArray[51]=new Particle(w2-25,115,0,0,r);
  pArray[52]=new Particle(w2-10,115,0,0,r);
  pArray[53]=new Particle(w2+10,115,0,0,r);
  pArray[54]=new Particle(w2+25,115,0,0,r);
  pArray[55]=new Particle(w2+40,115,0,0,r);
  pArray[56]=new Particle(w2+55,115,0,0,r);
  pArray[57]=new Particle(w2+70,115,0,0,r*7);
  pArray[58]=new Particle(w2+85,115,0,0,r*1.4);
  //8
  pArray[59]=new Particle(w2-90,130,0,0,r);
  pArray[60]=new Particle(w2-75,130,0,0,r*4);
  pArray[61]=new Particle(w2-60,130+a,0,0,r*5);
  pArray[62]=new Particle(w2-45,130+a,0,0,r);
  pArray[63]=new Particle(w2-30,130+a,0,0,r);
  pArray[64]=new Particle(w2-15,130+a,0,0,r);
  pArray[65]=new Particle(w2,130+a,0,0,r);
  pArray[66]=new Particle(w2+15,130+a,0,0,r);
  pArray[65]=new Particle(w2+30,130+a*3,0,0,r);
  pArray[67]=new Particle(w2+45,130+a,0,0,r);
  pArray[68]=new Particle(w2+60,130+a,0,0,r*5);
  pArray[69]=new Particle(w2+75,130+a,0,0,r*4);
  pArray[70]=new Particle(w2+90,130+a,0,0,r);
  pArray[71]=new Particle(w2,130+a,0,0,r);
  //9
  pArray[72]=new Particle(w2-95,145,0,0,r*2);
  pArray[73]=new Particle(w2-80,145,0,0,r);
  pArray[74]=new Particle(w2-65,145,0,0,r);
  pArray[75]=new Particle(w2-50,145,0,0,r*4);
  pArray[76]=new Particle(w2-35,145,0,0,r);
  pArray[77]=new Particle(w2-20,145,0,0,r);
  pArray[78]=new Particle(w2-7,145,0,0,r);
  pArray[79]=new Particle(w2+7,145,0,0,r);
  pArray[80]=new Particle(w2+20,145,0,0,r);
  pArray[81]=new Particle(w2+35,145,0,0,r);
  pArray[82]=new Particle(w2+50,145,0,0,r*4);
  pArray[83]=new Particle(w2+65,145,0,0,r);
  pArray[84]=new Particle(w2+80,145,0,0,r);
  pArray[85]=new Particle(w2+95,145,0,0,r*2);
  //10
  pArray[86]=new Particle(w2-100,160,0,0,r*2);
  pArray[87]=new Particle(w2-85,160,0,0,r);
  pArray[88]=new Particle(w2-70,160,0,0,r);
  pArray[89]=new Particle(w2-55,160,0,0,r);
  pArray[90]=new Particle(w2-40,160,0,0,r);
  pArray[91]=new Particle(w2-25,160,0,0,r*4);
  pArray[92]=new Particle(w2-10,160,0,0,r);
  pArray[93]=new Particle(w2+10,160,0,0,r);
  pArray[94]=new Particle(w2+25,160,0,0,r*4);
  pArray[95]=new Particle(w2+40,160,0,0,r);
  pArray[96]=new Particle(w2+55,160,0,0,r);
  pArray[97]=new Particle(w2+70,160,0,0,r);
  pArray[98]=new Particle(w2+85,160,0,0,r);
  pArray[99]=new Particle(w2+100,160,0,0,r*2);
  //11
  pArray[100]=new Particle(w2-105,175+a,0,0,r*4);
  pArray[101]=new Particle(w2-90+a,175,0,0,r*2.1);
  pArray[102]=new Particle(w2-75,175+a,0,0,r*2);
  pArray[103]=new Particle(w2-60+a,175,0,0,r);
  pArray[104]=new Particle(w2-45,175,0,0,r);
  pArray[105]=new Particle(w2-30,175,0,0,r*4);
  pArray[106]=new Particle(w2-15,175,0,0,r*5);
  pArray[107]=new Particle(w2,175,0,0,r*7);
  pArray[108]=new Particle(w2,175,0,0,r*5);
  pArray[109]=new Particle(w2+15,175,0,0,r*5);
  pArray[110]=new Particle(w2+30,175,0,0,r*4);
  pArray[111]=new Particle(w2+45,175,0,0,r);
  pArray[112]=new Particle(w2+60,175,0,0,r);
  pArray[113]=new Particle(w2+75,175,0,0,r*2);
  pArray[114]=new Particle(w2+90,175,0,0,r*2.1);
  pArray[115]=new Particle(w2+105,175,0,0,r*4);
  //12
  pArray[116]=new Particle(w2-110,190,0,0,r*1.7);
  pArray[117]=new Particle(w2-95,190,0,0,r*3);
  pArray[118]=new Particle(w2-80,190,0,0,r);
  pArray[119]=new Particle(w2-65,190,0,0,r);
  pArray[120]=new Particle(w2-40,190,0,0,r);
  pArray[121]=new Particle(w2-25,190,0,0,r*1.5);
  pArray[122]=new Particle(w2-10,190,0,0,r*3.5);
  pArray[123]=new Particle(w2+10,190,0,0,r*3.5);
  pArray[124]=new Particle(w2+25,190,0,0,r*1.5);
  pArray[125]=new Particle(w2+40,190,0,0,r);
  pArray[126]=new Particle(w2+65,190,0,0,r);
  pArray[127]=new Particle(w2+80,190,0,0,r);
  pArray[128]=new Particle(w2+95,190,0,0,r*3);
  pArray[129]=new Particle(w2+110,190,0,0,r*1.7);
  //13
  pArray[130]=new Particle(w2-115,205,0,0,r);
  pArray[131]=new Particle(w2-100,205,0,0,r);
  pArray[132]=new Particle(w2-85,205,0,0,r);
  pArray[133]=new Particle(w2-70,205,0,0,r);
  pArray[134]=new Particle(w2-55,205,0,0,r);
  pArray[135]=new Particle(w2-40,205,0,0,r);
  pArray[136]=new Particle(w2-25,205,0,0,r);
  pArray[137]=new Particle(w2-10,205,0,0,r*2);
  pArray[138]=new Particle(w2+10,205,0,0,r*2);
  pArray[139]=new Particle(w2+25,205,0,0,r);
  pArray[140]=new Particle(w2+40,205,0,0,r);
  pArray[141]=new Particle(w2+55,205,0,0,r);
  pArray[142]=new Particle(w2+70,205,0,0,r);
  pArray[143]=new Particle(w2+85,205,0,0,r);
  pArray[144]=new Particle(w2+100,205,0,0,r);
  pArray[145]=new Particle(w2+115,205,0,0,r);
  //14
  //BOTTOM
  pArray[146]=new Particle(w2-115,220,0,0,r*1.5);
  pArray[147]=new Particle(w2-95,220,0,0,r*1.5);
  pArray[148]=new Particle(w2-80,220,0,0,r*1.5);
  pArray[149]=new Particle(w2-65,220,0,0,r*1.5);
  pArray[150]=new Particle(w2-40,220,0,0,r*1.5);
  pArray[151]=new Particle(w2-25,220,0,0,r*1.5);
  pArray[152]=new Particle(w2-10,220,0,0,r*1.5);
  pArray[153]=new Particle(w2+10,220,0,0,r*1.5);
  pArray[154]=new Particle(w2+25,220,0,0,r*1.5);
  pArray[155]=new Particle(w2+40,220,0,0,r*1.5);
  pArray[156]=new Particle(w2+65,220,0,0,r*1.5);
  pArray[157]=new Particle(w2+80,220,0,0,r*1.5);
  pArray[158]=new Particle(w2+95,220,0,0,r*1.5);
  pArray[159]=new Particle(w2+115,220,0,0,r*1.5);
  //15
  pArray[160]=new Particle(w2-110,235,0,0,r*1.5);
  pArray[161]=new Particle(w2-90,235,0,0,r*1.5);
  pArray[162]=new Particle(w2-75,235,0,0,r*1.5);
  pArray[163]=new Particle(w2-60,235,0,0,r*1.5);
  pArray[164]=new Particle(w2-45,235,0,0,r*1.5);
  pArray[165]=new Particle(w2-30,235,0,0,r*1.5);
  pArray[166]=new Particle(w2-15,235,0,0,r*1.5);
  pArray[167]=new Particle(w2,235,0,0,r*1.5);
  pArray[168]=new Particle(w2,235,0,0,r*1.5);
  pArray[169]=new Particle(w2+15,235,0,0,r*1.5);
  pArray[170]=new Particle(w2+30,235,0,0,r*1.5);
  pArray[171]=new Particle(w2+45,235,0,0,r*1.5);
  pArray[172]=new Particle(w2+60,235,0,0,r*1.5);
  pArray[173]=new Particle(w2+75,235,0,0,r*1.5);
  pArray[174]=new Particle(w2+90,235,0,0,r*1.5);
  pArray[175]=new Particle(w2+110,235,0,0,r*1.5);
  // 16
  pArray[176]=new Particle(w2-100,250,0,0,r*1.6);
  pArray[177]=new Particle(w2-85,250,0,0,r*1.6);
  pArray[178]=new Particle(w2-70,250,0,0,r*1.6);
  pArray[179]=new Particle(w2-55,250,0,0,r*1.6);
  pArray[180]=new Particle(w2-40,250,0,0,r*1.6);
  pArray[181]=new Particle(w2-25,250,0,0,r*1.6);
  pArray[182]=new Particle(w2-10,250,0,0,r*1.6);
  pArray[183]=new Particle(w2+10,250,0,0,r*1.6);
  pArray[184]=new Particle(w2+25,250,0,0,r*1.6);
  pArray[185]=new Particle(w2+40,250,0,0,r*1.6);
  pArray[186]=new Particle(w2+55,250,0,0,r*1.6);
  pArray[187]=new Particle(w2+70,250,0,0,r*1.6);
  pArray[188]=new Particle(w2+85,250,0,0,r*1.6);
  pArray[189]=new Particle(w2+100,250,0,0,r*1.6);
  //17
  pArray[190]=new Particle(w2-95,265,0,0,r*2);
  pArray[191]=new Particle(w2-80,265,0,0,r*2);
  pArray[192]=new Particle(w2-65,265,0,0,r*2);
  pArray[193]=new Particle(w2-50,265,0,0,r*2);
  pArray[194]=new Particle(w2-35,265,0,0,r*2);
  pArray[195]=new Particle(w2-20,265,0,0,r*2);
  pArray[196]=new Particle(w2-7,265,0,0,r*2);
  pArray[197]=new Particle(w2+7,265,0,0,r*2);
  pArray[198]=new Particle(w2+20,265,0,0,r*2);
  pArray[199]=new Particle(w2+35,265,0,0,r*2);
  pArray[200]=new Particle(w2+50,265,0,0,r*2);
  pArray[201]=new Particle(w2+65,265,0,0,r*2);
  pArray[202]=new Particle(w2+80,265,0,0,r*2);
  pArray[203]=new Particle(w2+95,265,0,0,r*2);
  //18
  pArray[204]=new Particle(w2-90,280,0,0,r*2);
  pArray[205]=new Particle(w2-75,280,0,0,r*2);
  pArray[206]=new Particle(w2-60,280,0,0,r*2);
  pArray[207]=new Particle(w2-45,280,0,0,r*2);
  pArray[208]=new Particle(w2-30,280,0,0,r*2);
  pArray[209]=new Particle(w2-15,280,0,0,r*2);
  pArray[210]=new Particle(w2,280,0,0,r*2);
  pArray[211]=new Particle(w2+15,280,0,0,r*2);
  pArray[212]=new Particle(w2+30,280,0,0,r*2);
  pArray[213]=new Particle(w2+45,280,0,0,r*2);
  pArray[214]=new Particle(w2+60,280,0,0,r*2);
  pArray[215]=new Particle(w2+75,280,0,0,r*2);
  pArray[216]=new Particle(w2+90,280,0,0,r*2);
  pArray[217]=new Particle(w2,280,0,0,r*2);
  //19
  pArray[218]=new Particle(w2-85+a,295,0,0,r*1.4);
  pArray[219]=new Particle(w2-70+a,295,0,0,r*1.4);
  pArray[220]=new Particle(w2-55+a,295,0,0,r*1.4);
  pArray[221]=new Particle(w2-40,295,0,0,r*1.4);
  pArray[222]=new Particle(w2-25,295+a,0,0,r*1.4);
  pArray[223]=new Particle(w2-10,295+a,0,0,r*1.4);
  pArray[224]=new Particle(w2+10+a,295,0,0,r*1.4);
  pArray[225]=new Particle(w2+25,295,0,0,r*1.4);
  pArray[226]=new Particle(w2+40,295,0,0,r*1.4);
  pArray[227]=new Particle(w2+55,295,0,0,r*1.4);
  pArray[228]=new Particle(w2+70,295,0,0,r*1.4);
  pArray[229]=new Particle(w2+85,295,0,0,r*1.4);
  //20
  //pArray[230]=new Particle(w2-75,310,0,0,10);
  pArray[230]=new Particle(w2-60,310,0,0,r*1.3);
  pArray[231]=new Particle(w2-45,310,0,0,r*1.3);
  pArray[232]=new Particle(w2-30,310,0,0,r*1.3);
  pArray[233]=new Particle(w2-15,310,0,0,r*1.3);
  pArray[234]=new Particle(w2,310,0,0,r*1.3);
  pArray[235]=new Particle(w2+15,310,0,0,r*1.3);
  pArray[236]=new Particle(w2+30,310,0,0,r*1.3);
  pArray[237]=new Particle(w2+45,310,0,0,r*1.3);
  pArray[238]=new Particle(w2+60,310,0,0,r*1.3);
  //21
  pArray[239]=new Particle(w2-55,325+a,0,0,r*1.4);
  pArray[240]=new Particle(w2-35+a,325,0,0,r*1.4);
  pArray[241]=new Particle(w2-20,325,0,0,r*1.4);
  pArray[242]=new Particle(w2-7+a,325+a,0,0,r*1.4);
  pArray[243]=new Particle(w2+7,325+a,0,0,r*1.4);
  pArray[244]=new Particle(w2+20,325,0,0,r*1.4);
  pArray[245]=new Particle(w2+35+a,325,0,0,r*1.4);
  pArray[246]=new Particle(w2+55+a,325,0,0,r*1.4);
  //22
  pArray[247]=new Particle(w2-35,340,0,0,r*1.4);
  pArray[248]=new Particle(w2-15,340,0,0,r*1.4);
  pArray[249]=new Particle(w2,340,0,0,r*1.4);
  pArray[250]=new Particle(w2+15,340,0,0,r*1.4);
  pArray[251]=new Particle(w2+35,340,0,0,r*1.4);
  //23
  pArray[252]=new Particle(w2-20,355,0,0,r*1.5);
  pArray[253]=new Particle(w2-7,355,0,0,r*1.5);
  pArray[254]=new Particle(w2+7,355,0,0,r*1.5);
  pArray[255]=new Particle(w2+20,355,0,0,r*1.5);
  //24+
  pArray[256]=new Particle(w2-72,310,0,0,r);
  pArray[257]=new Particle(w2+3,200,0,0,r);
  pArray[258]=new Particle(w2-2,210,0,0,r*1.5);
  pArray[259]=new Particle(w2+72,310,0,0,r*1.5);
}
    



void draw()
{
   
  background(255);
  for(int i=2;i

					
					
			

./wp-content/uploads/sites/2/2013/10/final-1.pdf

UPDATE: I changed the design so that it took out all the white lines, hopefully there is nothing else wrong with it! Thanks Golan!

Ever since the generative art assignment I had been itching to delve into art that took design elements from Indian culture. At the beginning, I was keen on using henna patterns and designs in my laser cut print, however after researching I realized that I did not know much about the art and also was as driven to piece together a code for it. Through my research, I soon turned to Indian architecture. I’ve been to many Indian palaces and all of them seemed to have a few design elements in common, namely the repetition of curves, hexagons, and squares. Particularly, I was looking at the architecture used in various Bollywood movies since they have drastically simplified traditional architecture so that it is much more comprehensive.

Some of the architecture I used and things that inspired me appear in this song, if anyone’s interested:

https://www.youtube.com/watch?v=YxINX5Y6Fr0

I couldn’t sketch my design too well, but I definitely used my sketchbook to work out the placements in the design:

My design is a pattern created using lines and incorporates the design elements I researched. The pattern is also manipulable by moving your cursor along the screen to activate the particles. These particles do not have a gravity force on them but instead have a very simple attraction and repulsion force in them. For each 50 by 50 square of the screen, two cube particles exist in it. These particles will not leave the 50 by 50 square but will instead form designs in the square since one will move toward you and one away. The squares also have friction, velocity, and mass thus making them able to bounce on the walls for a short period of time before coming to a pause. if the image ends up moving into something the user likes, then the user can click to freeze the image and then export from there. I don’t know too much about the laser cutter, but hopefully this design will work.

here’s a few pics of my design to show the variability:

 

 
  fill(255);
  strokeWeight(0);
  stroke(255);
  rect(44,44,width-88,height-88);
  stroke(0);
  noFill();
  
 for(int row = 0; row< numBallsX; row+=1){
    for(int col = 0; col< numBallsY; col +=1){
      strokeWeight(1);
      
      pushMatrix();
      translate(50+row*50, 50+col*50); 
      if (mouseClicked == false) {   
        balls[row][col].move(0);
        oppositeBalls[row][col].move(1);
      }
      balls[row][col].display(); 
      oppositeBalls[row][col].display(); 
      popMatrix();
      
      pushMatrix();
      translate(50+row*50, 50+col*50);
      createDesign();
      popMatrix();
    }
  }
  
  if(record){
    endRecord();
      record = false;
  }
  
}



void createDesign(){
  strokeWeight(1);
  Hex();
  accents();
  halfHex();
  angles();
  makeBezier();
  
}

void createSquare(){
  smallDesign();
  line(0,7, 7,7);
  line(7,7,7,0);
  line(43, 7, 50, 7);
  line(43,0, 43, 7);
  line(50, 43, 43, 43);
  line(43,50, 43,43);
  line(0, 43, 7, 43);
  line(7,50, 7,43);
}
 void createSmallHex(float a,float b, 
                   float c, float d,
                   float x , float  y,
                   float w, float z,
                   float e, float f,
                   float s, float t){
  line(a, b, c , d);
  line(c, d, x, y);
  line(x, y, w , z);
  line(w, z, e, f);
  line(e, f, s, t);
  }

void smallDesign(){
  createSmallHex(18, 50, 18, 46.5, 21.5, 43, 28.5, 43, 32, 46.5, 32, 50);
  createSmallHex(0, 18, 3.5, 18, 7, 21.5, 7, 28.5, 3.5, 32, 0, 32);
  createSmallHex(50, 18, 46.5, 18, 43, 21.5, 43, 28.5, 46.5, 32, 50, 32);
  createSmallHex(18, 0, 18, 3.5, 21.5, 7, 28.5, 7, 32, 3.5, 32, 0);
  createSmallHex(25, 32, 21.5, 32,  18, 28.5, 18, 21.5, 21.5, 18, 25, 18);
  createSmallHex(25, 32, 28.5, 32,  32, 28.5, 32, 21.5, 28.5, 18, 25, 18);
  
  
  createSmallHex(12, 19, 7, 14, 12, 14, 12, 9, 17, 14, 12, 19);
  createSmallHex(50-12, 19, 50-7, 14, 50-12, 14, 50-12, 9, 50-17, 14, 50-12, 19);
  createSmallHex(12, 50-19, 7, 50-14, 12, 50-14, 12, 50-9, 17, 50-14, 12, 50-19);
  createSmallHex(50-12, 50-19, 50-7, 50-14, 50-12, 50-14, 50-12, 50-9, 50-17, 50-14, 50-12, 50-19);
}

void makeBezier(){
  noFill();
  bezier(40,40,42,40,49,43,44,49);
  bezier(40,40,40,42,43,49,49,44);
  
  bezier(10,10,8,10,1,7,6,1);
  bezier(10,10,10,8,7,1,1,6);
  
  bezier(10,40,8,40,1,43,6,49);
  bezier(10,40,10,42,7,49,1,44);
  
  bezier(40,10,42,10,49,7,44,1);
  bezier(40,10,40,8,43,1,49,6);
    
 stroke(255);
 line(0,0,0,50);
 line(50,0,50,50);
 line(0,0, 10,0);
 line(40,0, 50,0);
 strokeWeight(3);
 line(0,50,50,50);
 line(0,0,0,50);
 line(0,0,50,50);
 line(0,50,50,0);
 line(25,0,25,50);
 line(0,25,50,25);
 strokeWeight(1);
 stroke(0);
}

  

void accents(){
  line(20,15, 30,35);
  line(30,15, 20,35);
}
  

void angles(){
  line(10, 10, 10, 0);
  line(0, 10, 10, 10);
  line(10, 50, 10, 40);
  line(0, 40, 10, 40);
  line(40, 40, 50, 40);
  line(40, 40, 40, 50);
  line(40, 10, 40, 0);
  line(40, 10, 50, 10);
}

void Hex(){
  line(20, 15, 30,15);
  line(20, 15, 15,20);
  line(30, 15, 35,20);
  line(15, 30, 15,20);
  line(35, 30, 35,20);
  line(35, 30, 30,35);
  line(15, 30, 20,35);
  line(20,35,30,35);
  
}
  
void halfHex(){
  line(20,40,30,40);
  line(20,40,15,45);
  line(35,45,30,40);
  line(15,45, 15, 50);
  line(35,50, 35, 45);
  
  line(20,10,30,10);
  line(20,10,15,5);
  line(35,5,30,10);
  line(35,5, 35, 0);
  line(15,5, 15, 0);
  
  line(10,20,10,30);
  line(10,20,5,15);
  line(5,35,10,30);
  line(5,35, 0, 35);
  line(5,15, 0, 15);
  
  line(40,20,40,30);
  line(40,20,45,15);
  line(45,35,40,30);
  line(45,15, 50, 15);
  line(50,35, 45, 35);
  
}
//particle code modified from example in processing.org
//http://processing.org/examples/bouncybubbles.html


class Ball {

  float x, y;
  float diameter;
  int vx = 0;
  int vy = 0;
  int id;
  Ball[][] others;

  Ball(float din, int idin, Ball[][] oin) {
    x = 25;
    y = 25;
    diameter = din;
    id = idin;
    others = oin;
  } 



  void move(int moving) {
    if (mouseX != 0) {
      dirX = mouseX-width/2;
      dirX = dirX/ abs(dirX);
      if ( moving == 1) {
        dirX = - dirX;
      }
    }
    if (mouseY!=0) {
      dirY = mouseY-height/2;
      dirY = dirY/ abs(dirY);
      dirY = - dirY;
      if ( moving == 1) {
        dirY = - dirY;
      }
    }

    vx +=dirX;
    vy += dirY;
    x += vx;
    y += vy;
    if (x + diameter/2 > 50) {
      x = 50 - diameter/2;
      vx *= friction;
    }
    else if (x - diameter/2 < 0) {
      x = diameter/2;
      vx *= friction;
    }
    if (y + diameter/2 > 50) {
      y = 50 - diameter/2;
      vy *= friction;
    } 
    else if (y - diameter/2 < 0) {
      y = diameter/2;
      vy *= friction;
    }
  }

  void display() {
    rect(x, y, diameter, diameter);
  }
}