Category: Uncategorized

sketch

var posx = 20;
var posy = 20;
var posyb = 20;
var posx1 =20;
var posy1 = 20;
var dirX = 1;
var diam = 30;
var falling = 1.1;
var diam1 =30;

function setup() {
    createCanvas(600, 600);

}

function draw() {
    background (157,156,201);

    for (var x = 5; x < width; x = x+50){
        for (var y = 5; y < height; y = y+50){
            push();
            translate(x, y);
            fill(255,255,102); //yellow            
            ellipse(posx1,posy,diam,diam);
            pop();
        }   
    } 
    //
    if (mouseX > width/2) {
        for (var x = diam; x < width; x = x+50){
            for (var y = diam; y < height; y = y+50){
                push();
                translate(x, y);
                fill(204,255,153);  //green         
                ellipse(-posx1,posy1,diam1,diam1);
                diam1 += .0001;
                pop();
            }   
        } 
    }
    //bluish
    if (mouseX < width/2) {
        for (var x = diam; x < width; x = x+50){
            for (var y = diam; y < height; y = y+50){
                push();
                posyb += falling*0.01;
                posy1+= falling*0.01*-1;
                translate(x, y);
                fill(153,255,255);           
                ellipse(posy1,posy1,diam,diam);
                pop();
            }   
        } 
    }
    // pink
    if (mouseY > height/2) {
        for (var x = diam; x < width; x = x+50){
            for (var y = diam; y < height; y = y+50){
                push();
                posyb += falling*0.01;
                posy1+= falling*0.01*-1;
                translate(x, y);
                fill(255,102,255);           
                ellipse(posx,posyb,diam1,diam1);
                pop();
            }   
        } 
    }
    // orange
    if (mouseY < height/2) {
        for (var x = diam; x < width; x = x+50){
            for (var y = diam; y < height; y = y+50){
                push();
                posyb += falling*0.01*-1;
                posx1 += falling*0.01*1;
                translate(x, y);
                fill(224,96,92);           
                ellipse(posx,posyb,diam,diam);
                pop();
            }   
        } 
    }
}

I wanted to create a curtain of balls that slide through the canvas in an uncomfortable way depending on the direction of the mouse. Are you able to make them dissapear? What if you wait for a little bit?

Dave Dynamic

//Yoonseo(Dave) Choi
//Section B
//yoonseo1@andrew.cmu.edu
//Assignment-03-B
//variable for Bezier curvature 
var Curv;
//variable for Red, Green, Blue color. 
  var R = 0;
  var B = 0;
  var G = 0;
  function setup() {
  createCanvas(640, 480); //setting Canvas size to 600x480
  //No fill for any geometry
  noFill();
  //initializing Curv 
  Curv = 0;
}
function draw() {
  //adding random number to Red for change of color when it is < 255 
  
  //adding random number to Blue for change of color when it is < 255 
 
   //adding random number to Green for change of color when it is < 255  

  //When any of R,G,B elements are over 255, it resets to 0.
  if (R >= 255){
    R = 0;
  }
  if (G >= 255){
    G = 0;
  }
  if (B >= 255){
    B = 0;
  }
  //variable for color c
  var c = color(R,B,G);
  //continuously assign color variable to stroke
  stroke(c, 10);
  //setting up standard place for x and y coordinate. 
  var x = width/2;
  var y = height/2;
  //Dividing the canvas into four difference quadrant. 
  if (mouseX > x & mouseY < y ) { //when mouse is on right top quadrant
    Curv += mouseX/60; //Curv value goes up randomly from 1 to 5
    R += mouseX/120 + mouseY/50;// Red is sum of differenct X and Y value
   }
   if (mouseX < x & mouseY < y){//when mouse is on left top quadrant
    Curv -= mouseY/30; //Curv value goes down randomly from 4 to 12
    B += mouseX/40 + mouseY/80;// Blue is sum of differenct X and Y value
   }
   if (mouseY > y & mouseX > x){//when mouse is on right bottom quadrant
    Curv += mouseY/60;//Curv value goes up randomly from 4 to 12
   }
   if (mouseY > y & mouseX < x){//when mouse is on left bottom quadrant
    Curv -= mouseX/30;//Curv valvue goes down randomly from 1 to 5
    G += mouseX/70 + mouseY/100;// Green is sum of differenct X and Y value
   }
   //when Curv is larger than height or width, or less than 0 , it will reset to 0.
  if ( Curv > height || Curv < 0 || Curv > width){ 
    Curv = 0;
   }
   //setting background to black 
  background(0);
  //bezier curves.
  //each for statement is used to generate multiple bezier curve based on increment of i value
  //bezier curve assigns, anchor points and control points to create paramatric curve. 
  //bezier(anchor pts, anchor pts, control pts, control pts, control pts2,control pts2, anchor pts2,anchor pts2)
  for (var i = 0; i < mouseX; i += 30){
    bezier(mouseX-(Curv+i/2.0), mouseY-Curv+i, Curv*2, Curv, Curv*2, Curv*2, mouseX, 0);
  }
  //based on the i and z constraint, number of lines are decided. 
  // i or z's constraints are defined by mouse X adn Y position
  // all the position of the anchor points are based on the mouse X and Y 
  for (var z = 200; z < mouseY; z += 30){
    bezier(mouseX-(Curv+z/2.0), mouseY-Curv+z, Curv*4, Curv/6, Curv*3, Curv*2, width-mouseX, 0);
  }
 for (var i = 0; i < height-mouseY; i += 30){
    bezier(mouseX+(Curv+i/2.0), mouseY+Curv+i, Curv*2, Curv, Curv*2, Curv*2, 0, mouseY);
  }
  for (var z = 200; z < width-mouseX; z += 30){
    bezier(mouseX+(Curv+z/2.0), mouseY-Curv+z, Curv*4, Curv/6, Curv*3, Curv*2, width, height-mouseY);
  }
  

}

For this Dynamic art project, I focused on the movement of line in a curve form. At first, I wanted to express very light wing like motion based on the mouse position. I abstracted the initial concept and created the following digital illustration of movement. Fortunately, I found a example at p5js website that resembles part of what I imagined. I took that example and modified to create my own dynamic art.