Category: Assignment-05-Thousand-Lines

One Thousand Lines

Concept Concept

For my 1 thousand lines I created a series of lines that ran along the borders of the page. I mapped them to the position of the mouse and made it so stroke weight and the amount of lines would change depending on the position of the lines. I also changed the increment in which the lines were draw, switching between predetermined numbers to random ones. Like my other two line projects I seemed to have a incredibly hard time bringing what I had envisioned on paper into fruition. I had some issues with making if statements that weren’t complete contradictions of one another as well as call values. Unlike my other two line programs by this attempt I had become more familiar with mapping and didn’t have a big issue with it. Overall I was really pleased with my final outcome.

ten thousand lines

 

 

float x1=150;
float y1= 400;
float lines;
float botlines;
float leftlines;
float rightlines;
float mapDheight;
  float maplW;
  float addby=2;
void setup(){
  size(500,500);
}

void draw(){
  background(255);
  strokeWeight(1);
  //toplines
  smooth();
  
  
  float mapH= map(mouseY,0,height,400,500);
  //the top lines on the screen
   if (mouseX<=0){
    strokeWeight(5);
    
    
        }
        
  if (mouseY<=200){mapH=mouseX; }  if (mouseY>=400){
    mapDheight=mouseY;
    
 }
 
 if (mouseX>400){
   leftlines= mouseX;
   
   
 }
    
 
  //bottom lines on screen 
  for( lines = 0; lines<=width; lines= lines+addby){
  
  line(lines,mapH,lines,500);
  if(mouseY<250){
    addby=24;
  }else{
    addby=2;
  }
  
  
  
  }
 
  
  
  
  //the toplines on the screen 
mapDheight= map(mouseY,0,height,0,100);
   for(botlines=0; botlines<=width; botlines= botlines+addby){ line(botlines,mapDheight,botlines,0);if (mouseY>400){
      addby=.5;
    }
  
  }
  
  

  
  float maplW= map(mouseX,0,width,0,100);
  //the left lines on the screen 
 for(leftlines=0; leftlines<=height; leftlines= leftlines+addby){     if (mouseX>300){
      addby=random(10,30);
    }
   
   line(0,leftlines,maplW,leftlines);
  
 }
 
 
  float mapRW= map(mouseX,0,width,400,500);
  //the left lines on the screen 
 for(rightlines=0; rightlines<=height; rightlines= rightlines+addby){
  if(mouseX<100){
    addby=random(50,100);
    
  }
   
   line(500,rightlines,mapRW,rightlines);
 }
 println("MouseX", mouseX, "mouseY:", mouseY);
 

 
}

wheat waves (1000)

bloggif_542c676569efaScreen Shot 2014-10-01 at 16.42.14

Thank you Golan for the sinusoidal support!!

Each line is created from 30 segments, and there are approx. 33 independent waves to total 1000 lines. When the mouse is clicked, the waves react.
Would have liked to offset the reaction, so that one starts slightly after the other.

float maxAmplitude;

void setup() {
  size(800, 500);
  maxAmplitude = 0;
}



void draw() {
  background (148, 213, 214);


  maxAmplitude = maxAmplitude * 0.96;
  fill (0);


  int nSegments = 30; 
  float segmentLength = 10; 
  noFill() ;

  int numWaves = 33;
  float spacing = float(width)/float(numWaves);

  for (float j = 0; j < spacing*numWaves; j += spacing) {
    pushMatrix();
    println(j);
    translate(j, 0);
    
    
    float howFar = j / float(width);
    strokeWeight (1);
    stroke (247, 231, 213, 255*howFar); //gradient
    beginShape(); 
    for (int i=20; i<nSegments; i++) {
      float phase = 0.4; 
      float frequency = 120;
      float t0 = millis()/frequency + (i  )*phase;

      float amplitude0 = map(i, 0, nSegments, 0, maxAmplitude); 
      float sinusoidalDeflection0 = amplitude0 * sin(t0); 
      float x0 = 100 + sinusoidalDeflection0; 
      float y0 = i*segmentLength; 

      curveVertex (x0, y0);
      curveVertex (x0*1.5, y0*1.5);
      curveVertex (x0/2, y0/4);
      curveVertex (x0, y0);
      curveVertex (x0+5, y0+5);
    }
    endShape();
    popMatrix();
  }
}



void mousePressed() {
  maxAmplitude = 50;
}

1000 lines- spirograph

Ok so basically I wanted to make a spirograph so I went and did a bunch of research and I made a spirograph and it’s kinda psychedelic. The gifs are kinda large and won’t play so right-click and open them in another tab.
spirograph2

spirograph

spirograph3

 

I guess I don’t really know what to say to talk about these other than I went and looked at actual math and other peoples’ code to see how spirographs even worked, and then I tried to do a much more complicated color thing that decided to refuse to work for some reason so instead it does a color thing related to the position of the mouse instead.

One Thousand Lines (Perlin Mess)

What a mess… experiments with Perlin Noise
Screen Shot 2014-10-01 at 3.47.39 PM (2)
Screen Shot 2014-10-01 at 3.47.53 PM (2)
Screen Shot 2014-10-01 at 3.47.40 PM (2)

float[] noise= new float[333];
int[] x1= new int[333];
int[] y1= new int[333];
int[] x2= new int[333];
int[] y2= new int[333];
float xoff = 0.0;
float xoff2 = 1;

void setup(){
  size(1280,720);
  for(int i=0;i<333;i++){
      x1[i] = int(random(5,2275));
      y1[i] = int(random(5,1715));
      x2[i] = x1[i] + int(random(-100,100));
      y2[i] = y1[i] + int(random(-100,100));
  }  
}

void draw(){
  background(#ffffff);
  xoff = xoff + .02;
  xoff2 = xoff2+.02;
  for(int i=0; i<333; i++){
      float n = noise(xoff);
      float g = noise(cos(xoff2)+2);
     // int x1n = 
      int s1 = int(random(8,12)*random(0,1));
      int s2 = int(random(8,12)*random(0,1));
      line(x1[i]*g,y1[i]*n,x2[i]*n,y2[i]*g);
      fill(#ffffff); stroke(0); strokeWeight(2);
      ellipse(x1[i]*g,y1[i]*n,s1,s1);
      ellipse(x2[i]*n,y2[i]*g,s2,s2);
    }
    if(mousePressed){noLoop();}
  }

Thousand Lines

Thousand_Line

My idea of thousand lines came from my friends homework where it was some sort of magnetic field/graph. So I thought of it as a way to make the one thousand line assignment since the lines could react to the mouse by staying still but just moving the direction of the lines instead of following the whole thing like my first two line assignments.

 

float spaceBetween;
float columns;
float rows;
PVector mousePosition;
 
void setup() {
  size(480,480);
  spaceBetween = 15;
  columns = int(width/spaceBetween);
  rows = int(height/spaceBetween);
}
 
void draw() {
  background(201,240,242);
  mousePosition = new PVector(mouseX,mouseY);
  stroke(49,196,175);
  for(int i = 0; i <= columns; i++){
    for(int j = 0; j <= rows; j++){
      drawLines(i*spaceBetween, j*spaceBetween);
    }
  }
}
  
void drawLines(float x, float y) {
  PVector pos = new PVector(x,y);
  point(pos.x,pos.y);
  stroke(49,196,175);
  PVector lineTarget = new PVector(mouseX, mouseY);
  lineTarget.sub(pos);
  lineTarget.mult(-1);
   
  pushMatrix();
  translate(pos.x,pos.y);
  lineTarget.normalize();
  lineTarget.mult(10);
  line(0,0, lineTarget.x,lineTarget.y);
  popMatrix();
}

IMG_20141001_145640 copy

Thousand Lines: Circular Motion

thousandLines

I am intrigued by both the organic movement that can be created with circular motion and the oddly-curved shapes that can be drawn with lines, so I decided to combine the two. The overall motion is reminiscent of curtains flapping in a light breeze.  To meet the thousand line requirement, this sketch draws 600 white lines and overlays them with 400 black lines to create a mesh-like pattern.

//Miranda Jacoby
//EMS Interactivity Section A
//majacoby@andrew.cmu.edu
//Copyright Miranda Jacoby 2014

// Circular motion addapted from Heisei's code, 
// which can be found on OpenProcessing.org at 
// https://openprocessing.orgsketch/106191

//Variables for circular movement
int constant = 10;// anchor point
float angle = 0.05;// roational angle
int scalar = 150;// size of rotation
float speed = 0.05;// speed of rotation
  
void setup(){
size(600, 600);
strokeWeight(.5);
}
 
void draw(){
background(0);

angle = angle + speed;
float x = constant + sin(angle) * scalar;
float y = constant + cos(angle) * scalar;

for (int i = 0; i <= 100; i++) {
  stroke(255, 255, 255);// white lines
  //line(x, y, x + width + 100, y + height + 100);
//The exclusion of x from the second set of coordinates 
//creates the angled fan effect in the lines' position.
  line(y, x, y + (width/2) + 100, (height/2) + 100);
  y = y + 6;
  x = x + 6;
}

for (int i = 100; i <= 200; i++) {
  //line(x, y, x + width + 100, y + height + 100);
  line(y, x, y - (width/4) - 100, (height/4) - 100);
  y = y - 6;
  x = x - 6;
}

for (int i = 200; i <= 300; i++) {
//  stroke(200, 200, 250);
  //line(x, y, x + width + 100, y + height + 100);
  line(y - 10, x - 200, y + (width/2) + 100, (height/2) + 100);
  y = y + 6;
  x = x + 6;
}

for (int i = 300; i <= 400; i++) {
  //line(x, y, x + width + 100, y + height + 100);
  line(y - 10, x - 200, y - (width/4) - 100, (height/4) - 100);
  y = y - 6;
  x = x - 6;
}

for (int i = 400; i <= 500; i++) {
//  stroke(100, 150, 200);
  //line(x, y, x + width + 100, y + height + 100);
  line(y - 20, x - 400, y + (width/2) + 100, (height/2) + 100);
  y = y + 6;
  x = x + 6;
}

for (int i = 500; i <= 600; i++) {
  //line(x, y, x + width + 100, y + height + 100);
  line(y - 20, x - 400, y - (width/4) - 100, (height/4) - 100);
  y = y - 6;
  x = x - 6;
}
stroke(0); // black lines
for (int i = 600; i <= 700; i++) {
//  stroke(100, 150, 200);
  //line(x, y, x + width + 100, y + height + 100);
  line(y - 20, x - 600, y + (width/2) + 100, (height/2) + 100);
  y = y + 6;
  x = x + 6;
}

for (int i = 700; i <= 800; i++) {
  //line(x, y, x + width + 100, y + height + 100);
  line(y - 20, x - 600, y - (width/4) - 100, (height/4) - 100);
  y = y - 6;
  x = x - 6;
}
for (int i = 800; i <= 900; i++) {
//  stroke(100, 150, 200);
  //line(x, y, x + width + 100, y + height + 100);
  line(y - 20, x - 800, y + (width/2) + 100, (height/2) + 100);
  y = y + 6;
  x = x + 6;
}

for (int i = 900; i <= 1000; i++) {
  //line(x, y, x + width + 100, y + height + 100);
  line(y - 20, x - 800, y - (width/4) - 100, (height/4) - 100);
  y = y - 6;
  x = x - 6;
}
//for (int i = 200; i <= 300; i++) {
//  //line(x, y, x + width + 100, y + height + 100);
//  line(y, x, y - (width/3), (height/3));
//  y = y - 6;
//  x = x - 6;
//}

}


Thousand Line

thousandline

The final development to this little arcade jet-fighter simulator (with color s!). Since we can have 1000 lines during any one frame, I basically treated this as an arbitrarily large number and coded a simple space-invaders game, where all the graphics are being rendered with only lines. There is simple enemy AI and spawning, and the enemies’ left-right movement is controlled by a randomly spanned cosine wave against time. I also made a simple explosion system, in that whenever a jet is hit, a bunch of orange explosion particles fly out in random directions from the source of the jet that got hit. Also just for the heck of it, I also added a score counter on the bottom left of the screen, which resets every time the player gets hit by an enemy laser. Note that the control mechanic remained more or less identical from my one line demo, and that I didn’t have to employ single-frame “flickering” to conserve line count.

thousandline