Month: September 2018

sketch

/* 
Eliza Pratt
Section E
elpratt@andrew.cmu.edu
Project-03
*/

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

function draw() {
    
    noStroke();

    //creates color variables for background based on mouse position
    var bG = (mouseX/width) * 255;
    var bB = (mouseY/height) * 255;
    background(100, bG, bB);

    //block of color that moves with mouseX
    fill(200, bG, bB);
    rect(0, 0, mouseX, 480);

    //starting positions for vertical and horizontal lines
    var y1 = 45;
    var x1 = 0;

    //variables for line weight and angle based on mouse position
    var hWidth = (mouseY/width) * 45 
    var angle = (mouseX/width) * 360
    fill(255);


    ////////ROTATING LINES///////
    push();
    //transforms vertical lines to rotate about the center
    translate(width/2, height/2);
    rotate(radians(angle));
    //draws vertical lines
    for(var i = 0; i < 20; i++) {
        fill(0);
        rect(x1 -50 - width/2, 0, hWidth, 800);
        x1+=50;
    } 
    pop();

    /////////HORIZONTAL LINES////////
    for(var i = 0; i < 9; i++) {    
        rect(width/2, y1, width, hWidth);
        y1+=50;
    } 

    
}

Compared to the last two weeks, I found this project to be the most challenging since it was so open ended. While this sketch was originally intended to be a grid with fixed horizontal and rotating vertical lines, I ended up with this just by commenting out the “recMode(CENTER) and letting the black lines do as they please! This turned out way cooler than I expected and I was pleasantly surprised with how the colors go together.

jenny’s dynamic drawing

//Jenny Hu
//Section E
//jjh1@andrew.cmu.edu
//Project 03 — Dynamic Drawing


var x1 = 320; //center of first ellipse
var y1 = 240;

var x2 = 50; 
var y2 = 240;

var x3 = 590; 
var y3 = 240;

var maxEllipse = 50;

var startD = 10; // starting diameter 
var R = 255; 
var G = 0; 
var B = 110; 

var bR = 0;
var bB = 0;

var rippleHappening = false;
var whereIsRipple = 0;//this is the number that controls where 
//the ripple is relative to the center
function setup() {
    createCanvas(640, 480);
    ellipseMode(CENTER); 
}


function draw() {
    //making background color variable
    bR = mouseX;
    bB = mouseY;
    background(bR,bB,100); 

    //Draw the ellipses
    for ( var i=0; i<maxEllipse; i++){
      noFill();

      //ellipse positions
      var x2 = mouseY - 10;
      var x3 = (width/2) - (x2-(width/2)); //make x3 move opposite of x2
      var y2 = mouseX + 10;
      var y3 = (height/2) - (y2-(height/2)); //mover y3 opposite of y2
      
      //making a ripple
      if(rippleHappening){
        //print("in the for loop?");
        if(i == int(whereIsRipple)){
          strokeWeight(6);
        }else{
          strokeWeight(2.25);
        }
      }else{
        strokeWeight(2.25);
      }


      var scale1 = (width/2-mouseX)/10; //all scale variables are to scale the space between ellipses
      var scale2 = (width/2-mouseX)/10;
      var scale3 = (width/2-mouseX)/10;

      R = mouseX;
      G = mouseX - (mouseX/2);
      B = mouseY - (mouseX/2);

      stroke(R, G, B);

      ellipse(x1,y1, startD+(i*scale1), startD+(i*scale1)); //center ellipse 
      ellipse(x2,y2, startD+(i*scale2), startD+(i*scale2)); //starting left ellipse
      ellipse(x3,y3, startD+(i*scale3), startD+(i*scale3)); //starting right ellipse

    }
    //whereIsRipple determines the ripple ellipse per set of rings 
    //if we mod the ripple, we limit it to how far the ripple goes
    whereIsRipple = (whereIsRipple+0.5)%maxEllipse;
    if(int(whereIsRipple) == (maxEllipse)){
      print("is rippleHappening turned false?");
      //turn boolean to false 
      rippleHappening = false;
    }

}
function mousePressed(){
  rippleHappening = !rippleHappening;
  whereIsRipple = 0; //start ripple at 0

}

I started this project with the intention to play with moire patterns, which is essentially patterns that come about when you overlap striped elements on top of one another (made by the gaps between the stripes). I think this was the most fun project so far because I was generated outputs I couldn’t have made without a lot more effort in other programs. It was a result that was more easily achievable via programming.

Originally, I planned the ellipsis in sketch, just to see the starting pattern, but everything else resulted from playing with the program.

You can click anywhere on the canvas to cause a continuous ripple across the ellipsis. I imagine that this can go with music one day to make a great audio visualizer! (perhaps my final project?)

special thanks to Marisa Lu, and Gautam Bose for the help.