Category: Project-03-Dynamic-Drawing

mstropka-Project 03-Section E

sketch

//Max Stropkay
//Section E
//mstropka@andrew.cmu.edu
//Project 03

var squares = []; //empty array for squares
var speed = 5; // speed multiplyer for motion of squares
var squaresize = 40; //initial square size
var angle = 0 //initial rotation of squares

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

    //loop that continually makes 400 squares inside the array
    for (var i = 0; i < 400; i++) {
      squares[i] = {
      //squares are drawn at a random location on canvas
      x : random(0, width),
      y : random(0, height),
      //draw the squares
      display: function() {
        push();
        noFill();
        stroke(225);
        //if the mouse is within 100 pixels of any of the squares
        if(dist(mouseX, mouseY, this.x, this.y) < 100){
          stroke(255,0,0); //stroke will become red
          rotate(angle + random(-10,10)); //squares will rotate +-10 degrees
          squaresize = squaresize + 10; //squares will grow by 10 pixels in the x and y direction
        }else{
          squaresize = 40; //if the mouse is not close, the squares will return to normal size
        }
        rect(this.x, this.y, squaresize, squaresize); //draw the squares
        pop();
      },
      //gives squares random movement in x and y direction if mouse is within 100 pixels
      move: function() {
        if(dist(mouseX, mouseY, this.x, this.y) < 100){
          this.x = this.x + random(-1, 1) * speed; //causes squares to move in a random x direction
          this.y = this.y + random(-1, 1) * speed; //causes squares to move in a random y direction
          }else{
          this.x = this.x //if the mouse is not within 100 pixels, dont move
          this.y = this.y
        }
      }
    }
  }
}
function draw() {
    background(120);
    //make squares until the array is full
    for (var i = 0; i < squares.length; i++){
    squares[i].move(); //runs move function
    squares[i].display(); //runs display funtion

  }

}

For this project I wanted the mouse to interact with a lot of shapes in the sketch. I did some research and figured the best way to do that was to set up an array for all of the objects that the mouse was to interact with. After watching several explanations on youtube, I figured out how to apply what we learned about changing shapes in class to what I learned online about arrays. The result is a program that generates a bunch of squares that rotate, grow, move, and change color when the mouse is near them.

katieche – project 03 – dynamic drawing

katieche-03

// alters:
// dot position
// line length
// line and dot color
// speed that dots follow cursor
// angle of lines

// dot 1
var x = 300;
var y = 300;
var diffx = 0;
var diffy = 0;

// dot 5
var a = 320;
var b = 240;
var diffa = 0;
var diffb = 0;

// dot 3
var c = 320;
var d = 240;
var diffc = 0;
var diffd = 0;

// dot 4
var e = 320;
var f = 320;
var diffe = 0;
var difff = 0;

// dot 2
var g = 270;
var h = 220;
var diffg = 0;
var diffh = 0;

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

function draw() {
	background(0);
    
    stroke(500-mouseX);
    // lines that follow cursor
    // line 1
    line(320, 240, mouseX, mouseY);
    // line 2
    var mx = map(mouseX, 0, width, mouseX, mouseY);
    line(320, 240, mx, mouseY);
    // line 3
    var mx = map(mouseX, 0, width, mouseX, mouseY);
    line(320, 240, mx, mouseY);
    // line 4
    var mx = map(mouseX, 0, width, mouseX, mouseY);
    line(320, 240, mx, mouseY);
    // line 5
    var mx = map(mouseX, 100, width,mouseX, mouseY);
    line(320, 240, mx, mouseY);

    // longer lines
    stroke(320-mouseX);
    // line 1
    var mx = map(200, mouseY, width, -260, 380);
    line(320, 240, mx, mouseY);
    // line 2
    var mx = map(-mouseX, 40, width, 760, -180);
    line(320, 240, mx, mouseY);
    // line 3
    var mx = map(mouseX, 30, width, -260, 100);
    line(320, 240, mx, mouseY);
    // line 4
    var mx = map(-mouseX, 300, width, 660, 190);
    line(320, 240, mx, mouseY);

    // dot 1 (slow)
    // dots are in order: slow to fast
    noStroke();
	diffx = mouseX - x;
    diffy = mouseY - y;
    x = x + 0.01*diffx;
    y = y + 0.01*diffy;
    fill (250-mouseY);
    ellipse(x, y, 10, 10);

    // dot 2
    diffg = mouseX - g;
    diffh = mouseY - h;
    g += 0.03*diffg;
    h += 0.03*diffh;
    fill (240-mouseX);
    ellipse(g, h, 35, 35);

    // dot 3
    diffc = mouseX - c;
    diffd = mouseY - d;
    c = c + 0.05*diffc;
    d = d + 0.05*diffd;
    fill (240-mouseX);
    ellipse(c, d, 30, 30);

  	// dot 4
    diffe = mouseX - e;
    difff = mouseY - f;
    e += 0.07*diffe;
    f += 0.07*difff;
    fill (300-mouseY);
    ellipse(e, f, 25, 25);

   	// dot 5 (fastest)
    diffa = mouseX - a;
    diffb = mouseY - b;
    a = a + 0.1*diffa;
    b = b + 0.1*diffb;
    fill (500-mouseX);
    ellipse(a, b, 20, 20);

}

This project was hard for me since it was so open ended, I didn’t know where to start or where to go, so I referenced the notes a lot. I knew I wanted to do something abstract, so I started with a few interactive functions that I thought were cool (ie. the dots following the cursor, and the lines changing based on the mouse position), and then played around with the code from there. Here are a few things I first tried:

I wanted to combine some of these functions but the circles and the lines just looked too crowded together so I switched to the dots that follow the cursor, so it seems like the lines follow the dots.

rkarp1 – Project-03 – Section A

Rachel Karp – Dynamic Drawing

var d = 10; // distance between triangles

/*
This drawing consists of three "modes"
1) "Old" mode, when mouseY is above the middle of the canvas
(minus variable d, the space between the triangles)
2) "Young" mode, when mouseY is below the middle of the canvas
(plus variable d, the space between the triangles)
3) "Contemplative" mode, when mouseY is within the space between the traingles
*/

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

function draw() {
    //BACKGROUND
    //set background color for "old" mode
    background(0);
    //background color changes in "young" mode
    if(mouseY>height/2+d){
        background(255, 255, 77);
    }
    //backgrond color changes in "contemplatative" mode
    if(mouseY>=height/2-d & mouseY<=height/2+d){
        background(255);
    }

    //set outline color
    stroke(255);

    //TOP TRIANGLE
    //set color in "young" mode
    fill(255, 51, 0);
    //set color in "old" mode
    if(mouseY<height/2-d){
        fill(150);
    }
    //set color in "contemplative" mode
    if(mouseY>=height/2-d & mouseY<=height/2+d){
        fill(255);
    }
    //draw triangle dependent on mouseY
    triangle(width/4, height/2-d, width/2, mouseY, 
        width-width/4, height/2-d);

    //BOTTOM TRIANGLE
    //set color in "young" mode
    fill(255, 51, 0);
    //set color in "old" mode
    if(mouseY<height/2-d){
        fill(150);
    }
    //set color in "contemplative" mode
    if(mouseY>=height/2-d & mouseY<=height/2+d){
        fill(255);
    }
    //draw triangle dependent on mouseY
    triangle (width/4, height/2+d, width/2, height-mouseY, 
        width-width/4, height/2+d);

    //TOP TRIANGLE LINE (age line)
    strokeWeight(3);
    //draw line dependent on mouse Y
    line(0, mouseY, width, mouseY);

    //BOTTOM TRIANGLE LINE (age line)
    //draw line dependent on mouse Y
    line(0, height-mouseY, width, height-mouseY);

    //TEXT
    //add text in "young" mode
    if(mouseY>height/2+d){
        fill(102,102,255);
        //set font size dependent on mouseX
        //constrain font size so that "young!" will remain visible relative to mouseX
        var sizeX = constrain(mouseX, 0, 160);
        textSize(sizeX);
        textAlign(RIGHT);
        text("I feel " + mouseX + " years young!", width, mouseY);
    } 
    //add text in "old" mode
    if(mouseY<height/2-d){
        fill(107, 107, 71);
        //set font size dependent on mouseX
        //constrain font size so that "old." will remain visible relative to mouseX
        var sizeX = constrain(mouseX, 0, 300);
        textSize(sizeX);
        textAlign(RIGHT);
        text("I feel " + mouseX + " years old.", width, mouseY);
    }
    //add text in "contemplative" mode
    if(mouseY>=height/2-d & mouseY<=height/2+d){
        fill(0);
        noStroke();
        textSize(50);
        textAlign(CENTER);
        text("I feel...", width/2, mouseY);
    }

}

I had a hard time coming up with a concept for this project. I knew I wanted to experiment with triangles because I thought I hadn’t made myself work with them much before, and I knew I wanted to experiment with text. I ended up with this. I like the “age lines” that track age based on mouseX, and I like that I got to learn about constrain().

myoungsh-project03-dynamicdrawing

sketch

var topX = 320; //original triangle
var topY = 190;
var leftX = 260;
var leftY = 290 ;
var rightX = 380;
var rightY = 290;

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

function draw() {
    background(256);
    noStroke()
    fill(0);
    triangle(topX, topY, leftX, leftY, rightX, rightY); //draw original triangle
    
    if(dist(mouseX, mouseY, topX, topY) > 25 || //return original triangle after transformations
    dist(mouseX, mouseY, rightX, rightY) > 25 || 
    dist(mouseX, mouseY, leftX, leftY) > 25) {
      topX = 320;
      topY = 190;
      leftX = 260;
      leftY = 290 ;
      rightX = 380;
      rightY = 290
    }
    
    if(dist(mouseX, mouseY, rightX, rightY) <= 25) { //build 1st itteration of large triangle
      rightX = 200;
      rightY = 190;
      fill(0, 256, 256);
      triangle(320, 190, 260, 290, 380, 290);
      fill(256, 256, 0);
      triangle(440, 190, 320, 190, 380, 290);
      fill(256, 0, 256);
      triangle(260, 290, 380, 290, 320, 390);
    }
    
    if(dist(mouseX, mouseY, topX, topY) <= 25) { //build 2nd itteration of large triangle
      topX = 320;
      topY = 390;
      fill(256, 0, 256);
      triangle(320, 190, 260, 290, 380, 290);
      fill(0 ,256, 256);
      triangle(440, 190, 320, 190, 380, 290);
      fill(256, 256, 0);
      triangle(200, 190, 320, 190, 260, 290);
    }
    
    if(dist(mouseX, mouseY, leftX, leftY) <= 25) { //build 3rd itteration of large triangle
      leftX = 440;
      leftY = 190;
      fill(256, 256, 0);
      triangle(320, 190, 260, 290, 380, 290);
      fill(256, 0, 256);
      triangle(200, 190, 320, 190, 260, 290);
      fill(0, 256, 256);
      triangle(260, 290, 380, 290, 320, 390);
    }
    
    if(dist(mouseX, mouseY, 320, 240) <= 25) { 
      triangle(320, 190, 260, 290, 380, 290);
      triangle(200, 190, 320, 190, 260, 290);
      triangle(260, 290, 380, 290, 320, 390);
      triangle(320, 190, 380, 290, 440, 190);
    }
}

For this project I kept it simple, after using them in the pong exercise I got very comfortable using if statement and they were the easy part of this project. Hardest part was finding coordinates, I assume I could have used some sort of relationships in place of numbers to save time in writing the code.

Michelle Janco – Project 3- Dynamic Drawing

changing drawing

//Michelle Janco
//Section B
//mjanco@andrew.cmu.edu
//Project - 3

var Xpos
var Ypos
var pupilYpos
var pupilXpos

function setup() {
    createCanvas(400, 400);
}
function draw() {
  background(255);
//drawing the eye
if (mouseX < (width/2)){
  noStroke();
  fill(249, 214, 87);
}
else {
  noStroke();
  fill(random(0, 255), random(0, 255), random(0, 255));
}
ellipse(200, 200, 350, 350);
//shaking iris
fill(255);
ellipse(Xpos, Ypos, 200, 100);
if (mouseX > width/2) {
Xpos = width/2+ random(0,mouseX/60);
Ypos = height/2 + random(0,mouseX/60);
}
//pupil movement
var pupilXpos = constrain(mouseX, 150, 250);
noStroke();
fill(0);
ellipse(pupilXpos, 200, 40, 40);
}

For this assignment I created an eye that changes color when it looks to the right and follows the mouse. I had a little trouble with the order of things, but finally found the way to make it work.

mmirho – Project 3 – Dynamic Drawing

Move your mouse over the image from the top left corner to the bottom right corner. If you move just outside the bottom right corner, something colorful will happen!

I apologize for not using the 640 x 480 canvas size, that caused my program not to work last time I posted.

My program changes color, and fades into the background,
The lines (Which are rectangles) change size and end-location,
The squares rotate with the mouse location.

I hope I satisfied all the requirements! 🙂

sketch


//variable created to the size of the canvas
//(I used numbers here because width/height
//can't be input into global variables, I think
var blockW = 480/6;
var blockH = 480/6;

//The different fade variables I created
//to make each rotating square fade into
//the background seperately from each other
var fade = 255;
var fade1 = 255;
var fade2 = 255;
var fade3 = 255;
var fade4 = 255;
var fade5 = 255;
var angle = 0;
var side = 0;
var red = 255;
var blue = 255;

function setup() {
    createCanvas(480, 480);
}
 
function draw() {
    background(0); //black background
    noStroke();


    //The lines are now strobe-party-effected ONLY
    //when the mouse is beyond the bottom right edge 
    //of the canvas
    if ((mouseX > 6*blockW) & (mouseY > 6*blockH)) {
        fill(random(0,255), random(0,255), random(0,255));
    } else {
        fill(255);
    }

    //These are all the vertical lines
    rect(blockW, 0, 5, 2*mouseY);
    rect(2*blockW, 0, 5, 2*mouseY);
    rect(3*blockW, 0, 5, 2*mouseY);
    rect(4*blockW, 0, 5, 2*mouseY);
    rect(5*blockW, 0, 5, 2*mouseY);

    //These are all the horizontal lines
    rect(0, blockH, 2*mouseX, 5);
    rect(0, 2*blockH, 2*mouseX, 5);
    rect(0, 3*blockH, 2*mouseX, 5);
    rect(0, 4*blockH, 2*mouseX, 5);
    rect(0, 5*blockH, 2*mouseX, 5);

    rectMode(CENTER);
    side = min(blockH/2, blockW/2);
    //The side of the rotating squares is based off the
    //length of the smallest


    //This is the rotating square in box 1x1
    if ((mouseX > blockW) & (mouseY > blockH)) {
        fill(fade); 
        push();
        rectMode(CENTER);
        translate(blockW/2, blockH/2);
        rotate(radians(angle));
        angle = (mouseY + mouseX)/2;
        rect(0, 0, side, side);
        pop();
        fade -= 1;
    } else {
        fade = 255;
    }

    //This is the rotating square in box 2x2
    if ((mouseX > 2*blockW) & (mouseY > 2*blockH)) {
        fill(fade1); 
        push();
        rectMode(CENTER);
        translate(3*blockW/2, 3*blockH/2);
        rotate(radians(angle));
        angle = (mouseY + mouseX)/2;
        rect(0, 0, side, side);
        pop(); 
        fade1 -= 1;
    } else {
        fade1 = 255;
    }


    //This is the rotating square in box 3x3
    if ((mouseX > 3*blockW) & (mouseY > 3*blockH)) {
        fill(fade2); 
        push();
        rectMode(CENTER);
        translate(5*blockW/2, 5*blockH/2);
        rotate(radians(angle));
        angle = (mouseY + mouseX)/2;
        rect(0, 0, side, side);
        pop(); 
        fade2 -= 1;
    } else {
        fade2 = 255;
    }


    //This is the rotating square in box 4x4
    if ((mouseX > 4*blockW) & (mouseY > 4*blockH)) {
        fill(fade3); 
        push();
        rectMode(CENTER);
        translate(7*blockW/2, 7*blockH/2);
        rotate(radians(angle));
        angle = (mouseY + mouseX)/2;
        rect(0, 0, side, side);
        pop(); 
        fade3 -= 1;
    } else {
        fade3 = 255;
    }


    //This is the rotating square in box 5x5
    if ((mouseX > 5*blockW) & (mouseY > 5*blockH)) {
        fill(fade4); 
        push();
        rectMode(CENTER);
        translate(9*blockW/2, 9*blockH/2);
        rotate(radians(angle));
        angle = (mouseY + mouseX)/2;
        rect(0, 0, side, side);
        pop(); 
        fade4 -= 1;
    } else {
        fade4 = 255;
    }


    //This is the rotating square in box 6x6
    if ((mouseX > 6*blockW) & (mouseY > 6*blockH)) {
        fill(fade5); 
        push();
        rectMode(CENTER);
        translate(11*blockW/2, 11*blockH/2);
        rotate(radians(angle));
        angle = (mouseY + mouseX)/2;
        rect(0, 0, side, side);
        pop(); 
        fade5 -= 1;
    } else {
        fade5 = 255;
    }

    //The red square in the cell 2x5
    if ((mouseX > 2*blockW) & (mouseY > 5*blockH)) {
        fill(red, 0, 0); 
        push();
        rectMode(CENTER);
        translate(3*blockW/2, 9*blockH/2);
        rotate(radians(angle));
        angle = (mouseY + mouseX)/2;
        rect(0, 0, side, side);
        pop(); 
        red -= 1;
    } else {
        red = 255;
    }

    //The blue square in the cell 5x2
    if ((mouseX > 5*blockW) & (mouseY > 2*blockH)) {
        fill(0, 0, blue); 
        push();
        rectMode(CENTER);
        translate(9*blockW/2, 3*blockH/2);
        rotate(radians(angle));
        angle = (mouseY + mouseX)/2;
        rect(0, 0, side, side);
        pop(); 
        blue -= 1;
    } else {
        blue = 255;
    }
}

mjeong1-Project-03-Dynamic Drawing-Section A

sketch

//Min Young Jeong
//Section A 9:30am
//mjeong1@andrew.cmu.edu
//Project-03
var a;
var x = 400;
var y = 400;
var cloud = 100;
var dir = 1;
var dir2 =1;
var speed = 4;
var speed2 = 1;
var diam = 50;

function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(168,204,239);
    //sunny background
    if (dist(mouseX,mouseY,width/2,height/2)<=100) {
        background(124,146,181);
    }
    //cloudy background
    noStroke();
    fill(150,234,148);
    rect(0,390,640,height - 350);
    //sunny ground
    if (dist(mouseX,mouseY,width/2,height/2)<=100) {
        fill(107,145,106);
        rect(0,390,640,height - 350);
    }
    //cloudy ground


    fill(206,166,124);
    strokeWeight(1);
    stroke(255);
    rect(width/2 - 4,height/2 - 4,8,200);
    stroke(255);
    //1st windmill stick


    push();
    translate(width/2,height/2);
    var a = atan2(mouseY-height/2,mouseX-width/2);
    rotate(a);
    if (dist(mouseX,mouseY,width/2,height/2)<=100) {
        fill(255,105,113);
    }
    else {fill(100);}
    triangle(-50,-50,0,-50,0,0);
    triangle(-50,-50,-100,0,0,0);
    if (dist(mouseX,mouseY,width/2,height/2)<=100) {
        fill(118,135,255);
    }
    else {fill(100);}
    triangle(0,0,0,-100,50,-50);
    triangle(0,0,50,-50,50,0);
    if (dist(mouseX,mouseY,width/2,height/2)<=100) {
        fill(118,255,118);
    }
    else {fill(100);}
    triangle(0,0,100,0,50,50);
    triangle(0,0,50,50,0,50);
    if (dist(mouseX,mouseY,width/2,height/2)<=100) {
        fill(255,242,118);
    }
    else {fill(100);}
    triangle(0,0,0,100,-50,50);
    triangle(0,0,-50,50,-50,0);
    pop();

    fill(0);
    ellipse(width/2,height/2,10,10);
    //center windmill clockwise


    push();
    translate(width/2 - 200, height/2 + 100);
    var a = atan2(mouseY-height/2,mouseX-width/2);
    rotate(-a);
    if (dist(mouseX,mouseY,width/2,height/2)<=50) {
        fill(158,118,255);
    }
    else {fill(100);}
    triangle(-25,-25,0,-25,0,0);
    triangle(-25,-25,-50,0,0,0);
    triangle(0,0,0,-50,25,-25);
    triangle(0,0,25,-25,25,0);
    triangle(0,0,50,0,25,25);
    triangle(0,0,25,25,0,25);
    triangle(0,0,0,50,-25,25);
    triangle(0,0,-25,25,-25,0);
    pop();
    //left windmill counterclockwise 

    push();
    translate(width/2 + 200, height/2 + 100);
    var a = atan2(mouseY-height/2,mouseX-width/2);
    rotate(-a);
    if (dist(mouseX,mouseY,width/2,height/2)<=50) {
        fill(155,189,115);
    }
    else {fill(100);}
    triangle(-25,-25,0,-25,0,0);
    triangle(-25,-25,-50,0,0,0);
    triangle(0,0,0,-50,25,-25);
    triangle(0,0,25,-25,25,0);
    triangle(0,0,50,0,25,25);
    triangle(0,0,25,25,0,25);
    triangle(0,0,0,50,-25,25);
    triangle(0,0,-25,25,-25,0);
    pop();
    //right windmill counterclockwise


    if (dist(mouseX,mouseY,width/2,height/2)<=100) {
        x = mouseX; 
        y = mouseY; 
        noFill();
        strokeWeight(5);
        stroke(65,95,183);
        beginShape ();
        curveVertex(x,y);
        curveVertex(x,y);
        curveVertex(x + 25, y +25);
        curveVertex(x + 50, y);
        curveVertex(x + 75, y +25);
        curveVertex(x + 100, y);
        curveVertex(x + 100, y);
        endShape();
        beginShape ();
        curveVertex(x,y + 20);
        curveVertex(x,y + 20);
        curveVertex(x + 25, y +45);
        curveVertex(x + 50, y + 20);
        curveVertex(x + 75, y +45);
        curveVertex(x + 100, y +20);
        curveVertex(x + 100, y +20);
        endShape();
        beginShape ();
        curveVertex(x,y + 40);
        curveVertex(x,y + 40);
        curveVertex(x + 25, y + 65);
        curveVertex(x + 50, y + 40);
        curveVertex(x + 75, y + 65);
        curveVertex(x + 100, y + 40);
        curveVertex(x + 100, y + 40);
        endShape();
    }
    //wind 


    fill(178,119,119);
    stroke(255);
    strokeWeight(2);
    ellipse(0,0,200,200);
    //sunny sun 


    if (dist(mouseX,mouseY,width/2,height/2)>=100){
        fill(249,143,143);
        ellipse(0,0,200,200);
    }
    //cloudy sun 


    if (dist(mouseX,mouseY,width/2,height/2)<=100){
        fill(220);
        ellipse(0,100,50,50);
        ellipse(30,110,40,40);
        ellipse(50,70,70,70);
        ellipse(70,100,50,50);
        ellipse(100,90,50,50);

        ellipse(200,100,50,50);
        ellipse(230,110,40,40);
        ellipse(250,70,70,70);
        ellipse(270,100,50,50);
        ellipse(300,90,50,50);

        ellipse(400,100,50,50);
        ellipse(430,110,40,40);
        ellipse(450,70,70,70);
        ellipse(470,100,50,50);
        ellipse(500,90,50,50);

        ellipse(600,100,50,50);
        ellipse(630,110,40,40);
        ellipse(650,70,70,70);
        ellipse(670,100,50,50);
        ellipse(700,90,50,50);
}
    //cloud


    fill(255);
    noStroke();

    ellipse(x,100,diam,diam);
    ellipse(x - diam/2,100-diam/3,diam,diam);
    ellipse(x + diam/2,100-diam/3,diam * 1.5,diam *1.5);
    ellipse(x + diam * 1.4,100-diam/4,diam,diam);
//cloud 1
    ellipse(x - 100,150,diam,diam);
    ellipse(x - diam/2 - 100,150-diam/3,diam,diam);
    ellipse(x + diam/2 -100,150-diam/3,diam * 1.5,diam *1.5);
    ellipse(x + diam * 1.4 -100,150-diam/4,diam,diam);
//cloud 2
    ellipse(x + 100,150,diam,diam);
    ellipse(x - diam/2 + 100,150-diam/3,diam,diam);
    ellipse(x + diam/2 +100,150-diam/3,diam * 1.5,diam *1.5);
    ellipse(x + diam * 1.4 +100,150-diam/4,diam,diam);
//cloud 3
    x += dir*speed;
    if (x > width - 25 || x < 25) {
        dir = -dir;
    }

    if (diam > 50) {
        dir2 = -dir2;
    }

    if (diam < 10){
        dir2 = -dir2;
    }

    if (mouseX < width/2 + 50 || mouseX > width/2 - 50) {
        diam += dir2 * speed2;
    }
    //moving clouds

}

For this assignment I created windmills generated by mouse movement. As the middle windmill rotates clockwise, the other windmills on both sides rotates counterclockwise. Weather condition is also controlled by the mouse movement.

selinal-Project-03

sketch

//Selina Lee
//Section C
//selinal@andrew.cmu.edu
//Project-03

var cx = 320; //center points for canvas
var cy = 240;

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

}

function draw() {
	background(50); //off black background

	var x = mouseX; //easy to write mouse variables and to be used in other functions
	var y = mouseY;

	var colorx = mouseX%255; //variables to alter color on canvas without going over 255 RGB limit
	var colory = mouseY%255;

	var oppy = width/2 - mouseY; //reacts opposite of other part in the y direction

	var rad = dist(cx, cy, x, y); //creating area between center point and outerpoint of ellipses for interaction

	//upward and downward moving rectangles
	fill(colorx, 200, colory);
	rect(0, y, 320, 480);

	fill(colory, 200, colorx);
	rect(320, oppy, 320, 480);

	//series of ellipses changing size and color
	fill(colorx, 200, 200);
	ellipse(cx, cy, rad + 150, rad + 150);

	fill(200, colorx, 200);
	ellipse(cx, cy, rad + 140, rad + 50);

	fill(200, 200, colorx);
	ellipse(cx, cy, rad + 50, rad + 140);

	fill(colory, 200, 200);
	ellipse(cx, cy, rad, rad);

	fill(200, colory, 200);
	ellipse(cx, cy, rad - 20, rad - 40);

	fill(200, 200, colory);
	ellipse(cx, cy, rad - 40, rad - 20);

	//series of lines to follow mouse with
	stroke(colory, colorx, colory);
	line(cx, cy, x, y);
	stroke(colorx, 200, 200);
	line(cx, cy, x + 5, y + 5);
	stroke(colorx, colory, 200);
	line(cx, cy, x - 5, y - 5);
	stroke(colory, 200, 200);
	line(cx, cy, x + 5, y);
	stroke(200, colorx, 200);
	line(cx, cy, x - 5, y);
	stroke(200, 200, colory);
	line(cx, cy, x, y + 5);
	stroke(200, colory, colorx);
	line(cx, cy, x, y - 5);
	
	stroke(colorx, 200, 200);
	line(cx, cy, x + 15, y + 15);
	stroke(colorx, colory, 200);
	line(cx, cy, x - 15, y - 15);
	stroke(colory, 200, 200);
	line(cx, cy, x + 15, y);
	stroke(colory, 200, 200);
	line(cx, cy, x - 15, y);
	stroke(200, 200, colory);
	line(cx, cy, x, y + 15);
	stroke(200, colory, colorx);
	line(cx, cy, x, y - 15);
	
	stroke(colorx, 200, 200);
	line(cx, cy, x + 25, y + 25);
	stroke(colorx, colory, 200);
	line(cx, cy, x - 25, y - 25);
	stroke(colory, 200, 200);
	line(cx, cy, x + 25, y);
	stroke(colory, 200, 200);
	line(cx, cy, x - 25, y);
	stroke(200, 200, colory);
	line(cx, cy, x, y + 25);
	stroke(200, colory, colorx);
	line(cx, cy, x, y - 25);
	
	stroke(colorx, 200, 200);
	line(cx, cy, x + 35, y + 35);
	stroke(colorx, colory, 200);
	line(cx, cy, x - 35, y - 35);
	stroke(colory, 200, 200);
	line(cx, cy, x + 35, y);
	stroke(colory, 200, 200);
	line(cx, cy, x - 35, y);
	stroke(200, 200, colory);
	line(cx, cy, x, y + 35);
	stroke(200, colory, colorx);
	line(cx, cy, x, y - 35);
	
	stroke(colorx, 200, 200);
	line(cx, cy, x + 45, y + 45);
	stroke(colorx, colory, 200);
	line(cx, cy, x - 45, y - 45);
	stroke(colory, 200, 200);
	line(cx, cy, x + 45, y);
	stroke(colory, 200, 200);
	line(cx, cy, x - 45, y);
	stroke(200, 200, colory);
	line(cx, cy, x, y + 45);
	stroke(200, colory, colorx);
	line(cx, cy, x, y - 45);
	
	stroke(colorx, 200, 200);
	line(cx, cy, x + 55, y + 55);
	stroke(colorx, colory, 200);
	line(cx, cy, x - 55, y - 55);
	stroke(colory, 200, 200);
	line(cx, cy, x + 55, y);
	stroke(colory, 200, 200);
	line(cx, cy, x - 55, y);
	stroke(200, 200, colory);
	line(cx, cy, x, y + 55);
	stroke(200, colory, colorx);
	line(cx, cy, x, y - 55);
	
	stroke(colorx, 200, 200);
	line(cx, cy, x + 65, y + 65);
	stroke(colorx, colory, 200);
	line(cx, cy, x - 65, y - 65);
	stroke(colory, 200, 200);
	line(cx, cy, x + 65, y);
	stroke(colory, 200, 200);
	line(cx, cy, x - 65, y);
	stroke(200, 200, colory);
	line(cx, cy, x, y + 65);
	stroke(200, colory, colorx);
	line(cx, cy, x, y - 65);
	
	stroke(colorx, 200, 200);
	line(cx, cy, x + 75, y + 75);
	stroke(colorx, colory, 200);
	line(cx, cy, x - 75, y - 75);
	stroke(colory, 200, 200);
	line(cx, cy, x + 75, y);
	stroke(colory, 200, 200);
	line(cx, cy, x - 75, y);
	stroke(200, 200, colory);
	line(cx, cy, x, y + 75);
	stroke(200, colory, colorx);
	line(cx, cy, x, y - 75);
	
	stroke(colorx, 200, 200);
	line(cx, cy, x + 85, y + 85);
	stroke(colorx, colory, 200);
	line(cx, cy, x - 85, y - 85);
	stroke(colory, 200, 200);
	line(cx, cy, x + 85, y);
	stroke(colory, 200, 200);
	line(cx, cy, x - 85, y);
	stroke(200, 200, colory);
	line(cx, cy, x, y + 85);
	stroke(200, colory, colorx);
	line(cx, cy, x, y - 85);
}

The visuals for this project are based on a shadowed ray (the array assortment of lines which follow the position of the mouse but extend from the center of the canvas). The rest of the visuals were based on the centripetal movement of the lines, hence the creation of the ellipse series and their opposition to each other depending where mouseX and mouseY are. I noticed the project resembled an eye which was not intentional, but in order to balance the familiarity of the ellipses, the sliding blocks in the background were added as a more linear and angular contrast.

sunmink-Project03-Dynamic-Drawing

sketch

//SunMin Kim 
//Section E
//sunmink@andrew.cmu.edu
//project-03 

//variables for background elements
var smokecolor = 255; 
var angle = 0; 

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

function draw() {
  //Sky
  background(209, 234, 254);
  noStroke(0);

  //Greens 
  fill(109, 195, 50); 
  rect(0, 380, 640, 300); 

   //Tree trunks 
  fill(84, 78, 38);
  rect(20, 270, 20, 120);
  rect(60, 270, 20, 120);
  rect(100, 270, 20, 120);
  rect(140, 270, 20, 120);
  rect(180, 270, 20, 120);
  rect(220, 270, 20, 120);
  rect(260, 270, 20, 120);

  //Tree leaves 
  fill(135, 140, 30); 
  ellipse(30, 230, 50, 130);
  ellipse(110, 230, 50, 130);
  ellipse(190, 230, 50, 130);
  ellipse(270, 230, 50, 130);

  fill(135, 170, 30); 
  ellipse(70, 230, 50, 130);
  ellipse(150, 230, 50, 130);
  ellipse(230, 230, 50, 130);

  //Smokes move and change their color depending on position of mouseX 
  translate ((width) - mouseX * 1.5, 20); 
  fill (mouseX - smokecolor); 

   
  ellipse( 90, 150, 100, 100); 
  ellipse( 120, 150, 100, 100); 
  ellipse( 140, 120, 100, 100); 
  ellipse( 160, 120, 100, 100); 
  ellipse( 150, 180, 100, 100);
  ellipse( 190, 100, 100, 100);  
  ellipse( 220, 180, 100, 100);  
  ellipse( 220, 120, 100, 100); 
  ellipse( 250, 100, 100, 100); 
  ellipse( 290, 180, 100, 100); 
  ellipse( 220, 150, 100, 100); 
  ellipse( 260, 120, 100, 100); 
  ellipse( 260, 100, 100, 100); 
  ellipse( 230, 120, 100, 100); 
  ellipse( 250, 150, 100, 100);
  ellipse( 290, 80, 100, 100);  
  ellipse( 320, 130, 100, 100);  
  ellipse( 420, 170, 100, 100);  
  ellipse( 450, 120, 100, 100); 
  ellipse( 490, 180, 100, 100); 
  ellipse( 420, 150, 100, 100); 
  ellipse( 390, 80, 100, 100); 
  ellipse( 320, 100, 100, 100); 
  ellipse( 460, 100, 100, 100); 
  ellipse( 490, 150, 100, 100);  
  ellipse( 380, 170, 100, 100);  
  ellipse( 520, 150, 100, 100); 
  pop(); 

   //sun move depending on position of mouseX 
  translate ((width) - mouseX * 0.5, 60); 
  rotate (radians(angle));
  fill (236, 188, 0); 

  //sun changes its size, and constantly rises the angle in following angle + 0.2 
  ellipse(mouseX - 250, 30, (mouseX + 200)/ 5, (mouseX + 200)/ 5);
  angle = angle + 0.2;



}

After creating pong game, I became more interested in coding that can carry a narrative. Thus for the dynamic drawing, I wanted to put in a storyline. I first created a forest and then made smokes that are created before the sun arose.

Throughout this project, I struggled the most when coming up with a story and actualizing it. I feel good with the outcome I came up with and I am excited to create more interactive drawings with more variations.

egrady-Project03-DynamicDrawing

sketch

//Ean Grady
//section B
//egrady@andrew.cmu.edu
//Project-03

function setup() {
    createCanvas(640, 480);
    background(400-mouseX, 200-mouseY, 300);
}

function mouseMoved(){

    var R = (200-mouseX)/2;
    var G = (600-mouseY)/2;
    var B = 200;
    var Rx = (400+mouseX)/2;
    var Gx = (40+mouseY);
    var Bx = 100
    var Rz = (300+mouseX)/2; 
    var Gz = (80+mouseY);
    var Bz = 50

//the squares on each corner of the canvas
    fill(Rx, Gx, Bx);
    noStroke();
    rect (0, 0, 64, 48)
    rect (576, 432, 64, 48)
    rect (0, 432, 64, 48)
    rect (576, 0, 64, 48)

// the longer rectangles on the side
    fill (Rz, Gz, Bz);
    rect (64, 0, 512, 48)
    rect (64, 432, 512, 48)
    rect (0, 48, 64, 384)
    rect (576, 48, 64, 384)

//code for the ellipse used to draw
    noStroke();
    fill(R, G, B);
    ellipse (mouseX, mouseY, 120, 80);

    sizex=mouseX/2;
    if (sizex>120){
    sizex=mouseX/-4;
};
    sizey=mouseY/2;
    if(sizey>200){
    sizey=mouseY/-4;
};
}

For this project, I wanted to create a canvas for which you could draw something using different shapes. It ended up being a little too ambitious for my programming skills, so I instead created a canvas for which you could use an ellipse to just play around with, where it changes colors as you move it around. I had the most difficult time this week trying to come up with the right code to fit what I wanted, I had to go onto the p5.js reference page a lot, but it definitely helped to familiarize myself with the program.