void setup(){
  size(500,500); 
  frameRate(10);
}
 
void draw(){
  background(255);
 
  float randomness = map(mouseX, 0,width, 0,1);
  randomness = constrain(randomness, 0,1); 
  float randomColors = map(mouseX, 0,width, 0,255);
  randomColors = constrain(randomColors, 0,255);
  color randomBall = color (255,255,255);
 
  for (int i=1; i < 17; i++){
    for (int j=1; j < 17; j++){
      float x = (i*30)  + randomness * random(-30,30); 
      float y = (j*30)  + randomness * random(-30,30);
      ellipseMode(CENTER);
      randomBall = color(random(0,randomColors),
      random(0,randomColors),random(0,randomColors),100);
      float randomSize = 20 + randomness * random(-20,20);
      fill(randomBall);
      ellipse(x,y,randomSize,randomSize); 
    }
  }
}

Continue reading →

mbk-chaos

I started this with just wanting to do swarming. After tinkering with the swarming behavior for a while I decided that the particles should have trails. After I added the trails I noticed that in looked like the trails were part of the particles, so I put the trails into a different buffer and drew outlines around the particles in the main buffer. The mouse position only changes the velocity. The chaos comes from the velocity multiplied by its effect constant outgrowing the bounds by which particles can attract each other. This results in particles traveling only in similar directions creating swarms when the mouse is to the right, and particles clustering into groups when the mouse is on the left.

Seizure warning, I guess.

 

I liked the halftone stuff I was doing in the iteration assignment so I kept it and messed with it. Sorry the gif seems to be lagging; that’s a problem that happened when I was recording it because my computer can’t actually keep up with the speed that Processing was animating it in.

 

//electronic media studio: interactivity
//copyright 2014 natroze
//with a bit of help from Mark Helenurm (MCS)

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

void draw(){
  background(254,255,198);
  noStroke();

//background shenanigans
float bg = map(mouseX, 0,width, 254,random(0,255));
  background(bg,120,198);
 
//tiny halftone
for (int y=0; y< =height; y+=10){
  for (int x=0; x<=width; x+=10){
    //size of each individual circle
    float r3 = map(mouseX, 0,width, 60,random(0,60));
    float r1 = map(x,0,width, 0,r3);
    //transparency and color
    float t1 = map(mouseX, 0,width, 0, random(100,130));
    float red = map(mouseX, 0,width, 0,random(0,255));
    fill(red,187,224, t1);
    ellipse(x+10,y+10, r1,r1);
    }
  }
  
//medium halftone
  for (int y=0; y<=height; y+=30){
    for (int x=5; x<=width; x+=30){
      //size of each individual circle
      float r2 = map(mouseX, 0,width, 60,random(5,100));
      float r1 = map(x,0,width, 0,r2);
      //transparency and color
      float t1 = map(mouseX, 0,width, 255, random(130,180));
      float blue = map(mouseX, 0,width, 187, random(0,255));
      fill(90,blue,224, t1);
      ellipse(x,y, r1,r1);
     }
  }
  
//bigass halftone 
for (int y=0; y<=height; y+=60){
  for (int x=0; x<=width; x+=60){
    float r1 = map(x,0,width, 0,60);
    float t1 = map(mouseX, 0,width, 0, random(0,255));
    float red = map(mouseX, 0,width, 90, random(0,255));
    fill(red,210,224, t1);
    ellipse(x+50,y, r1,r1);
    }
  }
}

CSBCHAOS

Chaos

For this project, I wanted to create grid similar ti the lines that were the example.  and as you moved left to right, the squares got more randomized.  However, in class, we were taught how to randomize color and create a “vibrating” shape in the mouse cursor.  My idea then developed into creating a organized greyscale grid of squares that were “activated” (motion and color) only when the mouse was on top of one square.  After making it, I came to realize that it resembles pretty much my life motto, standing out from a crowd. However, that only standing out if activated part adds an interesting twist to the moto and makes me think about if I am “activated” at certain times and am not truly a person who stands out on their own.

 

 

void setup() {
  size(600, 200);
}

void draw() {
  fill(50,50,50,20);
  rect(0,0,600,200); 
  frameRate(25);
  float dx=random (-15, 15);
  float dy=random (-15, 15); 
  float r=random(0,255);
  float g=random(0,255);
  float b=random(0,255);
  float s=random(1,10);
  
  for (int y=0; y< =height; y+=30) {
    for (int x=0; x<=width; x+=25) {       if ((mouseX > x) && (mouseX < (x+20)) && (mouseY > y) && (mouseY < (y+20))){
        fill(r,g,b);
        strokeWeight(s);
        stroke(r,g,b);
        rect (x+dx, y+dy, 20, 20);
      } 
        else {
        fill(155);
        strokeWeight(1);
        stroke(0);
        rect (x, y, 20, 20);
      }
    }
  }
}

I modified my pattern program to take input from the mouse’s X and Y positions to cause changes in color and circle location. Through this project, I learned a bit about how to use Perlin noise, as well as how to scale it so that the mouse’s movement has greatest effect on the visual output. I suppose the next step would be to implement Perlin noise on a larger scale to create some sort of natural pattern.

//Copyright Miranda Jacoby 2014

//A big thanks to Matt for helping me figure out how to use perlin noise!
//A big thanks to Golan for helping me figure out how to scale perlin noise!

//***How This Program Works***
//The closer the mouse is to the bottom right corner, 
//the more chaotic the colors get.

//number of circles
float cnum = 30;
//circle x and y coordinates
float cx = noise(frameCount*0.1);//20;
float cy = noise(frameCount*0.2);//20;
//circle width and height
float cw = 50;
float ch = 50;
//circle offsetx and offsety
float offsetx = 25;
float offsety = 25;

void setup () {
 size (600, 600) ;
 //background(130, 108, 245);
}

void draw () {
  background(255);
  //offsetx = offsetx + random(-10, 10);
  //offsety = offsety + random(-10, 10);
  for (int i=0; i<cnum; i++) {
    cx = 50*i;
        for (int j=0; j<cnum; j++) {
          cy = 50*j;
          
          float mouseInfluenceX = map(mouseX, 0,width, 0,1); // 0...1
          mouseInfluenceX = pow(mouseInfluenceX, 4); //noise scaled down by power of 4
          mouseInfluenceX = mouseInfluenceX * width; //noise scaled back to window sizw
          
          float mouseInfluenceY = map(mouseY, 0,height, 0,1); // 0...1
          mouseInfluenceY = pow(mouseInfluenceY, 4); //noise scaled down by power of 4
          mouseInfluenceY = mouseInfluenceY * height; //noise scaled back to window size
          
          float noisex = (noise(cx, cy, frameCount*0.1)-0.5)*mouseInfluenceX; // -0.5 makes it so that noise is centered on zero.
          float noisey = (noise(cx, cy, frameCount*0.5)-0.5)*mouseInfluenceY;
          float cx2 = cx+ noisex;
          float cy2 = cy+ noisey;
          fill(random(i,i+j),random(400-mouseX,401),random(400-mouseY,401), 25);  
          //The above line adapts code found in yousufali.n's Mouse Position & color Behavior with circles,
          //which can be found at https://openprocessing.orgsketch/84991.
          //float noiseVal = noise((mouseX+i)*noiseScale, mouseY*noiseScale);
          ellipse(cx2, cy2, cw, ch);
          ellipse(cx2, cy2, cw + offsetx, ch + offsety);
          ellipse(cx2, cy2, cw + offsetx*2, ch + offsety*2); //Tile-like
        
    }
  }
}