Month: October 2017

sketch

//Sharon Lee
//Section E
//dayoungl@andrew.cmu.edu
//Assignment 07-C
var h = 280;
var v = 5;
var dirX = 1;
var wall1 = 60;
var wall2 = 340;
var xarray = [];
var yarray = [];
var rings = 10;
var counts = [];
var circles = [];

var xs = []
var ys = []
var is = []

function setup() {
  createCanvas(400,400);
  // angleMODE(DEGREES);
  frameRate(8);
}

function draw() {
  ripples();
  for(i = 0; i< counts.length;i++){
    counts[i]++;
  }
  if(counts[0]>rings){
    counts.splice(0,1);
    xarray.splice(0,1);
    yarray.splice(0,1);
  }
 
}

function ripples() {
  background(100);
  //rectangle
  push();
  rectMode(CENTER);
  stroke(122,203,241);
  strokeWeight(4);
  noFill();
  rect(width/2, height/2,h,h);
  //set the number of the ripples
  for (i = 0; i < xarray.length; i ++){
    
    //draw ripples
    stroke(122,203,241);
    noFill();
    // var m = map(mouseX, 0, width, 25, 75);
    //constrain the ripples inside the square
    var xc = constrain(xarray[i], wall1, wall2);
    var yc = constrain(yarray[i], wall1, wall2);
    xs.push(xc);
    ys.push(yc);
    is.push(counts[i]);
    //ellipse(xc,yc,50 * counts[i], 50 * counts[i]);
  }

  for (i = 0; i < xs.length; i++) {
    ellipse(xs[i],ys[i],50 * is[i], 50 * is[i]);
  }

  pop();
  fill(100);
  noStroke();
  rect(0,0,wall1,height);
  //create bounding box
  //right bouding box
  rect(wall2,0,wall1,height);
  //left bounding box
  rect(height,0,width,wall1);
   //top bounding box
  rect(0,0,width,wall1);
  //bottom bounding box
  rect(0,wall2,width,wall1);
}

function mousePressed() { 
  counts.push(0);
  xarray.push(mouseX);
  yarray.push(mouseY);
}

// function mouseDragged() {
//   ripples (mouseX, mouseY);
// }

I wanted to represent ripples. As mouse is clicked, the ripples appear on the screen and overlap on top of each other.

katieche-07

/*
katie chen
katieche@andrew.cmu.edu
project 07
section E
*/

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

function draw() {
    background(255, 210, 190);
    var mx = constrain(mouseX, 60, 450);

push();
beginShape();
    // points 
    var n1 = 400;
    // big circle radius
    var a1 = 100;
    // small circle radius
    var b1 = map(mx, 0, width, 0, 10);
    // distance from center of the interior circle to P (what draws the line)
    var h1 = map(mx, 0, width, 0, 300);

    noFill();
    stroke(255, 222, 221);
    strokeWeight (0.2);
    translate(width/2, height/2); //center the object
    for(var i = 0; i < n1; i++) {
        var t = map(i, 0, n1, 0, TWO_PI); 
        var x1 = (a1-b1)*cos(t) + h1*cos(t*(a1-b1)/b1)
        var y1 = (a1-b1)*sin(t) + h1*sin(t*(a1-b1)/b1)
        vertex(x1, y1);
endShape();
    }
pop();

push();
beginShape();
    // points
    var n = 400;
    // big circle radius
    var a = map(mouseY, 0, height, 0, 200);
    // small circle radius
    var b = 10;
    // distance from center of the interior circle to P (what draws the line)
    var h = map(mouseX, 0, width, 0, 200);
    noFill();
    stroke(255, 231, 226);
    strokeWeight (0.2);
    translate(width/2, height/2); //center the object
    for(var i = 0; i < n; i++) {
        var t = map(i, 0, n, 0, TWO_PI); 
        var x = (a-b)*cos(t) + h*cos(t*(a-b)/b)
        var y = (a-b)*sin(t) + h*sin(t*(a-b)/b)
        vertex(x, y);
endShape();
    }

pop();


}

I wanted to create 2 shapes, one that has less points and shows more of the shape being drawn, and one that’s super complicated. The pinker shape is more complicated so I constrained it before it jumbles into a solid donut shape.

The white line shape is what I like more since if you place your mouse near the center-left hand side of the canvas and move your mouse from the top to the bottom of the canvas, you can kind of see the spirograph being drawn. Moving your mouse from left to right makes the swirls bigger.