Month: September 2016

sketch

// Liu Xiangqi xiangqil@andrew.cmu.edu Section-A Project-03
var backR = 255;
var backG = 219;
var backB = 77;
var radian = 0;
var size = 150;
var roundR = 255;
var roundG = 102;
var roundB = 0;
function setup() {
    createCanvas(640, 480)
}
 
function draw() {
    background(backR, backG, backB);
    noStroke();
    //change the background color 
    backR = map(mouseX, 0, width, 255, 0);
    backG = map(mouseX, 0, width, 219, 20);
    backB = map(mouseX, 0, width, 77, 51);
    
    if (mouseX > width ) {
        backR = 0;
        backG = 20;
        backB = 51;
    }
    
    if (mouseX < 0) {
        backR = 255;
        backG = 219;
        backB = 77;
    }
    
    //change the position of the moon/sun
    push();
    radian = map(mouseX, 0, width, 0, 1.57);
    translate(320,0);
    rotate(radian);
    
    //change the color
    roundR = map(mouseX, 0, width, 255, 255);
    roundG = map(mouseX, 0, width, 102,255);
    roundB = map(mouseX, 0, width, 0, 0); 
    fill(roundR, roundG, roundB);
    ellipse(200, 75, 150, 150);
    
    //change the size of the breach
    size = map(mouseX, 0, width, 0, 150);
    fill(backR, backG, backB)
    ellipse(200, 150, size, size);
    pop();
}   

I don’t know why the moon stuck in the middle of the canvas. It moves smoothly to the upper-left corner on my browser.

sketch

function setup() {
    createCanvas(640, 480);
   

}

function draw() {
	// Changes the colours from Red to Blue when the mouse is moved horizontally.
	 colR= map(mouseX,220,width,220,180);
	 colG= map(mouseX,180,width,100,180);
	 colB= map(mouseX,190,width,100,255);
	 background(colR,colG,colB);
	 noStroke();
	// Declares variables for height and width of shapes.
	 varOpp = width - mouseX;
	 var cH = 70;
	 var cW = 70;

	// Changes the size when the mouse is moved horizontally.
	 var cH = map(mouseX,0,width,250,0);
	 fill(255,255,255);
	 ellipse(width/2,height/4,cW,cH);

	 fill(180,170,255);
	 rect(mouseX+200,height/3,cW,cH);

	 fill(255,170,255);
	 rect(mouseX,height/2,cW,cH);

	 fill(255,170,255);
	 rect(varOpp,height/2,cW,cH);

	  fill(180,170,255);
	  rect(varOpp-200,height/2,cW,cH);

	 fill(255,170,255);
	 rect(mouseX,height/4,cW,cH);

	 fill(255,170,255);
	 rect(varOpp,height/1.5,cW,cH);
}

I took inspiration from the first deliverables assignment, so I’d say what I came up with is pretty simple. What I want to work on for next time is adding more depth to the movement of graphics, since this is pretty 2-dimensional.

I tried to review things that I have learned. I created a pattern, and tried to show different effects like color,scale change by using one interaction (by just moving x-axis cursor).

sketch

//Jiyoung Ahn
//section A
//jiyounga@andrew.cmu.edu
//project 03

  var intervX = 60; 
  var intervY = 60; 
  var Xspace = 35; 
  var Yspace= 35; 


  var crvd1 = 0;
  var crvd2 = 10;
  var crvd3 = 20;
  var crvd4 = 30;  

  var rectS1 = 10;
  var rectS2 = 20;
  var rectS3 = 30;
  var rectS4 = 40;

  var dir = 1;
  var speed = 5;
  var diam = 50;

  var rectt= 2;

function setup() {
  createCanvas(640,480);

}


function draw() {


  var colorOne = map(mouseX, 246, height, 246,235,159); 
  var colorTwo = map(mouseX, 114, height, 159,208,246); 
  var colorThree = map(mouseX, 76, height, 196,246,159); 

  background(colorOne,colorTwo,colorThree);// color background change 

  var x = 300;
  var dir = 1;
  var speed = 5;

 


  
  for (var y = 0; y < 6; y++) {
    if ( y % 2== 0){
      for (var x =0; x <11; x++){
        var my = Yspace + y * intervY;
        var mx = Xspace + x * intervX;
        noStroke ();
        rectMode (CENTER);
        deg = radians (30);

        fill (135,192,250);
        rect (mx, my, rectS4, rectS4, crvd1);
        
        fill (170,204,239);
        rect (mx, my, rectS3, rectS3, crvd2);
        
        fill (249,253,143);
        rect (mx, my, rectS2, rectS2, crvd3);
        
        fill (255);
        rect (mx, my, rectS1, rectS1, crvd4);

         rotate(radians(map(mouseX, 0, height, 0, rectt)));// rotates when move mouse to X axis.
      }
    }

    else {

      for (var x = -10; x< 10; x++){
        var my = Yspace+ y * intervY;
        var mx = intervX/2 + Xspace + x * intervX

        fill (255, 171, 230);
        rect (mx, my, rectS4, rectS4);
        
        fill (251,209,239);
        rect (mx, my, rectS3, rectS3);
        
        fill (177,221,160);
        rect (mx, my, rectS2, rectS2);
        
        fill (255);
        rect (mx, my, rectS1, rectS1);
        
      }
  
    }
    if ((mouseX>80) & (mouseX<340)){  
    crvd4= map(mouseX,280,580,150,300);
    rectS4= map(mouseX,280,580,45,100);
    }  //pink, blue squares expand when you move mouse left to right
    

  }
}

It was quite a challenge for me to create a pattern with six lines. I had to figure out how to place them continuously.

sketch

var offset=50;
var barX=offset
var barY;
var barW;
var barH=30;
var sliderX = offset
var sliderY;
var sliderW=50;
var sliderH=30;
var modify=50;
var colorR=133;
var colorG=209;
var colorB=228;

function setup() {
    createCanvas(640, 480);
    
}

function draw() {
	background(colorR,colorG,colorB);
	fill(255);
	barY=height-50;
	barW=width-2*offset;
	rect(barX,barY,barW,barH);
	//draw slider box
	fill(247,176,193);
	sliderY=barY
	rect(sliderX,sliderY,sliderW,sliderH);
	//draw slider
	fill(144,217,148);
	ellipse(modify,modify,modify/2);
	//draw circle in the top left corner
	fill(116,100,185);
	ellipse(640-modify,480-modify,modify/2);
	//draw circle in the bottom right corner
	fill(255,204,222);
	ellipse(640-modify,modify,modify/2);
	//draw circle in bottom left corner
	fill(255,107,29);
	ellipse(modify,480-modify,modify/2);
	//draw circle in top right corner
	push();
	translate(width/2,height/2);
	rotate(millis()/sliderX);
	fill(62+sliderX/5,116,44);
	rotate(radians(0));
	ellipse(50,50,50,100);
	rotate(radians(50));
	ellipse(100,100,50,100);
	rotate(radians(100));
	ellipse(150,150,50,100);
	rotate(radians(150));
	ellipse(200,200,50,100);
	pop();
	//draw leaves falling down, leaves rotate in different speeds. 
	//Leaves turn from green to brown as slider moves.
}

function mouseMoved(){
	var sliderMax=width-offset-sliderW;
	if (mouseY>=barY & mouseY<=barY+barH){
        sliderX=max(min(mouseX,sliderMax),barX);
	    modify=sliderX/0.8+50;
	// if statement restrains that mouse can only be moved within the slider bar. The modify changes shapes of the circles. 
	}


}

The drawing I am presenting is named falling leaves. The user can put their mouse on the slider and move the mouse within the slider bar to see changes of how the tornado turned leaves from green to brown. The leaves spin really fast in the beginning and slows down once the slider is at the right end. The 4 circles represent people as they come and go and disappear. It should leave a sad feeling in the end as the leaves slowly whirls.

my-sketch.js

//Zhuoying Lin
//section A
//zhuoyinl@andrew.cmu.edu
//project03


function setup() {
    createCanvas(640, 480);
}

function draw() {
	background('lightPink');

	//box
	fill(255-(0.1*mouseX));
	noStroke();
	rect(0, 400-(0.75*mouseX), 0.125*mouseX, 0.125*mouseX);
	rect(mouseX, 0, 0.125*mouseX, 0.125*mouseX);
	rect(560-mouseX, 400, 0.125*mouseX, 0.125*mouseX);
	rect(560, 0.75*mouseX, 0.125*mouseX, 0.125*mouseX);

	//circles
	push();
	fill(255-(0.5*mouseX));
	noStroke();
	translate(320, 240);
	rotate((millis())/(mouseX*10));
	ellipse(-50, 0, 100, 100);
	fill(0+(0.5*mouseX));
	ellipse(50, 0, 100, 100);
	pop();

}

I tried to make some uniformed variables that changing with mouse movement and form a pattern. Here is my solution.