One line concept sketch

For my one line project I made a code in which a line is attempting to cross the board but every time your mouse gets in front of it stops it. When your mouse is on greater than it by ten paces/pixel it is pushed back one pixel. I had a lot of problems with this piece, most of which dealt with my initial code which had a numerous amount of ‘if’ statements that seemed to contradict each other at one point. I made many versions of this piece but I feel that I’m happiest with the last one which incorporates some of the skills we’ve learned.

Finished Product

int x=0;
int x2=0;
int y1=150;
int y2=300;
void setup(){
size(450,450);


}


void draw(){
background(0);

stroke(255);
if(x<width){
line(x,150,x,300);
x=x+1;

}
if ((mouseX>=x+10)&&(x>11)){//if the mouse is ten pixels in from it

x=x-1;

}
if (mouseX==x){
x=x-10;
}
if (x>=width){//if line crosses the border reset it to 0
x=0;

}

}

This is a game I thought of using only one line and your mouse. The point of the game is to keep the line from touching the bottom by keeping the mouse under each of the ends of the line. Changing one variable will make it harder or easier to keep it up by limiting the “grace” space the mouse is in, the bubble of effectiveness, down to one pixel.

// RULES: keep mouse under each end to bounce back up
//        keep mouse over each end to freeze the end
//        keep from hitting the bottom

int points =0;

float x = 80;   // x location of square
float x2 = 120;
float y = 0;     // y location of square
float y2 = 0;

float speed = 0;   // speed of square
float speed2 = 0.5;

float gravity = .05;

int hardness = 7;

void setup() {
  size(200, 900);
  background(255);
}

void draw() {
  fill(#ffffff, 90);
  rect(0, 0, width, height);
  // Display the square
  fill(175);
  stroke(0);
  line(x, y, x2, y2);

  // Add speed to location.
  y = y + speed;
  y2 =y2+speed2;

  // Add gravity to speed.
  speed = speed + gravity;
  speed2 = speed2 + gravity;

  // If square reaches the bottom
  // Reverse speed

  int floor1 = mouseY;
  int floor2 = mouseY;

  if (mouseX >80-hardness && mouseX < 80+hardness && y > floor1 && y < floor1+10) {
    floor1 = mouseY;
    points++;
    speed = speed * -.98;
  } else {
    floor1 = height;
  }
  if (mouseX>120-hardness && mouseX<120+hardness && y2 > floor2 && y2 < floor2+10) {
    points++;
    speed2 = speed2 * -.97;
    floor2 = mouseY;
  } else {
    floor2 = height;
  }


  if (y >= height || y2 >= height) {
    noLoop();
    textSize(30);
    text("Game Over", 20, height/2);
    textSize(15);
    int finalPoints = points;
    text("Points: "+finalPoints, 65, height/2+30);
    speed = 0;
    speed2 = 0;
  }
}

 

 

 

 

I’m aware these could be more interesting; I kind of lost track of time with the other parts of this assignment and this (and the 10 lines one) kind of got the short end of the stick in terms of my attention. But basically the line follows the cursor around, and gets longer and shorter depending where the cursor is located, as well as changes its angle to gravitate toward the top and left depending which one the cursor is closer to.

 

void setup(){
  size(300,300);
  background(0);
  stroke(255);
  strokeWeight(3);
  frameRate(15);
}

void draw(){
  float x1 = mouseX+mouseX/5;
  float y1 = mouseY+mouseY/5;
  float x2 = mouseX-mouseX/5;
  float y2 = mouseY-mouseY/5;
  line(x1,y1, x2,y2);
  fill(0,0,0, 10);
  rect(0,0, 300,300);
} 

 

In this assignment I was trying to make a line that waves when it touches the mouse. The line would be following the mouse but when the mouse moves quickly the line would need time to catch up with the mouse.

float n = 8;
float m = 0;
float x;
float y;
float easing = 0.05;

void setup() {
  size(500, 500);  
}

void draw() { 
  background(255);
  follow();
}

void follow(){
    float followX = mouseX;
    float distanceX = followX - x;
    float followY = mouseY;
    float distanceY = followY - y;
  if(abs(distanceX)<=1 && abs(distanceY)<=1){
    noFill();
    beginShape();
    for(int i=1; i<n; i++){         m = random(-20,20);         curveVertex(x + m, y + i * 40 / n );     }     endShape();   }   else{     if(abs(distanceX) > 1) {
      x += distanceX * easing;
    }
    if(abs(distanceY) > 1) {
      y += distanceY * easing;
    }
    line(x, y-20, x, y+20);
  }
}

(For some reason the program isn’t rendering properly on the blog, so here’s a .gif.)

When interacting with this program, in what way do you move your mouse? Are its movement patterns curved, straight, or twisty? The coordinates of this sketch’s line are influenced by the mouse’s, creating a basic interaction.

If I were to build on this program, I’d add an element that creates a graphical representation of mouse’s path, making it easier to observe mouse movement patterns.

sketch.js code

oneline

Trying to make something really cool with just one line was a real creative roadblock for me, so I thought about some ways to sneak past the limitation. Here is a simple space invader-esque shooter demo. Although it may look like there are multiple lines, there is actually only one line during any single frame. The way it works is that frames are shared between each of the lasers, such that every in every frame, a single different laser is rendered. The result is somewhat flickery, but it gets the job done and it emulates having multiple lines without actually having multiple lines at any instance.