Category: SectionC

I tried many different ways to create mountains and alter them somehow with the mouse. I first attempted to create a gradient on the shapes to give a sense of the sun shining on them from different angles. Eventually, I had to settle for drawing lines along the yellow mountains to give the sense of fog crawling across them. Click the canvas then drag your mouse along it.

sketch

/*		Austin Garcia
		Section C
		aegarcia@andrew.cmu.edu
		Project - 03
*/
var x1 = 0;
var y1 = 100;
var x2 = 80;
var y2 = 100;
var x3 = 40;
var y3;
var mountain1 = 5;
var c1;
var c2;
var diffx = 0;
var diffy = 0;
var targetX = 300;
var targetY = 300;
var x = 300;
var y = 300;
var r

function setup() {
    createCanvas(400, 100);
    background(220);
    y3 = random(40, 90);
    c1 = ("yellow");



  //  triangle (x1, y1, x2, y2, x3, y3)

}

function draw() {


    r = random(80);


    fill(c1);

    strokeWeight(4);
    stroke(225);
    diffx = mouseX / 2 - x;
    diffy = mouseY / 2 - y;
    x = x + 0.1 * diffx;
    y = y + 0.1 * diffy;
    line(x1, y1, x, y);
    line(x2, y2, x, y);



}
    function mousePressed() {

      push();
      translate(mountain1, 0);
      strokeWeight(1)
      triangle (x1, y1, x2, y2, x3, y3);
      pop();


    mountain1 = mountain1 + r;
    y3 = r;

    if (mountain1 > 400) {
      strokeWeight(0);
    }
}

sketch

/*
Aaron Lee
//Section C
//sangwon2@andrew.cmu.edu
Project-03-Dynamic Drawing
*/

//variables

   var x = 0;
   var y = 100;

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


function draw() {
 
   background(0);
   stroke(0);
   fill(255, 204, 0);
   
   if (mouseY < (height / 2)) {
         fill(0);  
      }
   rect(10, 10, 30, 30);
   textSize(30);
   text('touch!', 40, 40);//if mouse is located on bottom portion of canvas, the text lights 

    fill(0);
   if (mouseY < (height / 2)) {
         fill(255, 204, 0);
      }
   rect(440, 600, 30, 30);
   textSize(30);
   text('touch!', 350, 630);//if mouse is located on top portion of canvas, the text lights

   push();

   translate(mouseX, mouseY);
   scale(mouseX/100, mouseY/100); 
   noFill();
   stroke(255);
   rotate(radians(x));
   rect(-50, -50, y, y);//scale of the rectangle changes following the movement of mouse

   x = x + mouseX/25;

   pop(); 

   stroke(255);

   //lines from top
   line(0, 0, mouseX, mouseY);
   line(40, 0, mouseX, mouseY);
   line(80, 0, mouseX, mouseY);
   line(120, 0, mouseX, mouseY);
   line(160, 0, mouseX, mouseY);
   line(200, 0, mouseX, mouseY);
   line(240, 0, mouseX, mouseY);
   line(280, 0, mouseX, mouseY);
   line(320, 0, mouseX, mouseY);
   line(360, 0, mouseX, mouseY);
   line(400, 0, mouseX, mouseY);
   line(440, 0, mouseX, mouseY);
   line(480, 0, mouseX, mouseY);
     //lines from right
   line(width, 40, mouseX, mouseY);
   line(width, 80, mouseX, mouseY);
   line(width, 120, mouseX, mouseY);
   line(width, 160, mouseX, mouseY);
   line(width, 200, mouseX, mouseY);
   line(width, 240, mouseX, mouseY);
   line(width, 280, mouseX, mouseY);
   line(width, 320, mouseX, mouseY);
   line(width, 360, mouseX, mouseY);
   line(width, 400, mouseX, mouseY);
   line(width, 440, mouseX, mouseY);
   line(width, 480, mouseX, mouseY);
   line(width, 520, mouseX, mouseY);
   line(width, 560, mouseX, mouseY);
   line(width, 600, mouseX, mouseY);
   line(width, 640, mouseX, mouseY);
        //lines from left
   line(0, 40, mouseX, mouseY);
   line(0, 80, mouseX, mouseY);
   line(0, 120, mouseX, mouseY);
   line(0, 160, mouseX, mouseY);
   line(0, 200, mouseX, mouseY);
   line(0, 240, mouseX, mouseY);
   line(0, 280, mouseX, mouseY);
   line(0, 320, mouseX, mouseY);
   line(0, 360, mouseX, mouseY);
   line(0, 400, mouseX, mouseY);
   line(0, 440, mouseX, mouseY);
   line(0, 480, mouseX, mouseY);
   line(0, 520, mouseX, mouseY);
   line(0, 560, mouseX, mouseY);
   line(0, 600, mouseX, mouseY);
   line(0, 640, mouseX, mouseY);
      //lines from bottom
   line(0, height, mouseX, mouseY);
   line(40, height, mouseX, mouseY);
   line(80, height, mouseX, mouseY);
   line(120, height, mouseX, mouseY);
   line(160, height, mouseX, mouseY);
   line(200, height, mouseX, mouseY);
   line(240, height, mouseX, mouseY);
   line(280, height, mouseX, mouseY);
   line(320, height, mouseX, mouseY);
   line(360, height, mouseX, mouseY);
   line(400, height, mouseX, mouseY);
   line(440, height, mouseX, mouseY);
   line(480, height, mouseX, mouseY);
}

I tried to make more user interactive animation with textual instruction.

sketch_project3

/*Katrina Hu
15104-C
kfh@andrew.cmu.edu
Project-03-Dynamic Drawing*/

var sunW = 50
var sunH = 50

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

function draw() {
    //change background color
    background (191 - mouseY, 228 - mouseY, 255 - mouseY);
    noStroke();
    //change sun size
    if (mouseY < height / 2.5) {
        sunW = height / 3 - mouseY;
        sunH = height / 3 - mouseY;
    } 
    else {
        sunW = 10
        sunH = 10;
    }
    //draw sun
    //sun moves by mouseY
    fill (255, 247, 158);
    ellipse (300 - mouseY, 200 - mouseY, sunW, sunH);
    //draw houses
    //color of house lightens by mouseY/3
    //shape of house changes 
    fill(79 + mouseY / 3, 68 + mouseY / 3, 61 + mouseY / 3);
    rect(50, 380, 100 + mouseY / 25, 100);
    rect(200, 380, 100 + mouseY / 25, 100);
    rect(350, 380, 100 + mouseY / 25, 100);
    rect(500, 380, 100 + mouseY / 25, 100);
    triangle(100, 330, 30, 380, 170, 380);
    triangle(250, 330, 180, 380, 320, 380);
    triangle(400, 330, 330, 380, 470, 380);
    triangle(550, 330, 480, 380, 620, 380);

}

This project changes four different aspects of image elements – size, shape, position, and color. It was a fun project to do, as it was interesting to experiment with how mouse position would affect these elements.