Math Final – liquid business

planets3

For this final, I want to present progress I made with two separate projects involving fluid dynamics.

This is currently where I am at with the turntable simulation:
We have a circular flowfield, two particles systems that see each other, but a lot of things to solve still:

  • Sketch needs to run faster
  • respond to hand gestures
  • more fluid like
  • closer to the aesthetic of marble paper.

I am happy with the current state of the project but intend to improve on it in the next two weeks.
planetsplanets4planets3


Another thing I wanted to use the fluid dynamics for is an installation Ive started in a different class where the users draw each others image using hand gestures.
I wanted to make the movement more fluid like and then project the two images on top of each other in different tints. Here are some visual examples of the effect right now:

2colors_2

Screen Shot 2014-05-06 at 7.44.29 AM

Making things move with sound

I made a few processing sketches that use minim to generate graphics using sound.

1st sketch – diagonals

import ddf.minim.*;
Minim minim;
AudioInput in;

float xPos;
float yPos;
float xEnd;
float yEnd;
float ran;
float numl;
int num ;

float[] lines = new float[num];

float wide;

void setup() {
size(1200, 800, P3D);
num = int(numl);
float ran = random(1);
frameRate(60);
smooth();
minim = new Minim(this);
in = minim.getLineIn();
wide = random(4,10);
}

void draw() {

background(0);
numl =- (10/in.left.get(1000)+in.right.get(1000));
xPos = 0;
yPos = random(0, 800);
xEnd = 1200;
yEnd = random(0, 800);
for (float i = 0; i < numl; i++) {
line(xPos, yPos, random(50), xEnd, yEnd,random(100,-100));

}

strokeWeight(wide);
float ran = random(10.);
if(ran <= 2) stroke(#40FFA6);
else if(ran > 0 && ran < 3) stroke(#00AFD6);
else if(ran > 4 && ran < 6) stroke(#D28BE0);
else if(ran > 6 && ran < 8) stroke(#FF8800);
else if(ran > 8 && ran < 10) stroke(#FFEE51);
}
}

 

2nd sketch – sphere

import ddf.minim.*;
Minim minim;
AudioInput in;
int radius = 250;
float [] xPos = new float [360];
float [] yPos = new float [360];

void setup() {
size(800, 800);
smooth();
minim = new Minim(this);
in = minim.getLineIn();

for (int i = 0; i < 360; i++) {
int deg = i * 1;
float angle = radians(deg);
xPos[i] = cos(angle) * radius;
yPos[i] = sin(angle) * radius;
}
}
void draw() {
background(0);
translate(width/2, height/2);
stroke(random(10, 255));

for (int i = 0; i < in.bufferSize() – 1; i++) {
float lm = lerp(310, 350+ 50*in.left.get(i), random(0, 0.5));
float rm = lerp(310, 350+ 50*in.right.get(i), random(0, 0.5));

strokeWeight(abs(4*in.left.get(i)));
stroke(random(255), random(255), random(255));
int random1= (int)random(359);
int random2= (int)random(359); line(xPos[random1], yPos[random1], 1000* in.left.get(i), 200* in.right.get(i));
}
}

Data

When we started learning R in class, I felt really inspired about working with data.
I found this part of Facebook called Facebook Data Science, where they analyze user activity.
This specific research about age gaps in romantic relationships I found very interesting and wanted to visualize in a more compelling way.

I wrote to them, hoping to get their source data, but got no reply.
So instead, I decided to create my own dataset and sent out a questionnaire to my fellow ITPers.

This is the dataset I wish to work with in class.

Voronoi Tesselation

Euclidean_Voronoi_Diagram

Here is my algorithm presentation for the notorious Voronoi.

 

voronoi_pre2 voronoi_pre3

voronoi_pre6

voronoi_pre7

 

voronoi_pre4voronoi_pre8Code Example 1

float[] x = {

}; //holds the x values of the mouse clicks
float[] y = {
}; //holds the y values of the mouse clicks
float[] d = {
}; //looks like this is just a counter for how many points there are???

int[] c = {
}; //holds the random color generated for each of the mouse clicks

void setup() {
size(200, 200);
background(0);
}

void draw() {

for (int xx=0; xx<width && (x.length > 0); xx=xx+1) { //marches through every pixel in the x direction
for (int yy=0; yy<height; yy=yy+1) { //marches through every pixel in the y direction
int idx = 0; //sets the initial index to 0
float dd; //initializes dd
dd = dist(x[0], y[0], xx, yy); //computes dd as the distance between the point (x[0], y[0]) and (xx,yy)
for ( int i=1; i<d.length; i++ ) { //for the number of points clicked
float d0 = dist(x[i], y[i], xx, yy); //computes d0 as the distance between the point (x[i],y[i]) and (xx, yy)
if ( dd > d0 ) {
//if the distance between the first point clicked (x[0], y[0]) and the pixel we’re considering (xx, yy)
//is GREATER THAN
//the distance between the point we’re considering now (x[i], y[i]) and the pixel we’re considering (xx, yy)
dd = d0; //set dd to d0
idx = i; //set the idx to this index
}
}
set(xx, yy, c[idx]);
//change the color of the pixel at (xx,yy) to the color at index idx
}
}
noStroke();
fill(200);
for ( int i=0; i<x.length; i++ ) {
ellipse(x[i], y[i], 10, 10);
}
}

void mousePressed() {
x = append(x, mouseX); //add the mouseX value of the location to x
y = append(y, mouseY); //add the mouseY value of the location to y
d = append(d, 0); //add a 0 to d
c = append(c, color(random(255), random(255), random(255))); //add a randomly generated color to c
}


Code Example 2

// R.A. Robertson 2012.03 – .04 “Voronoi 1” ~ www.rariora.org ~
// Derivation of http://www.openprocessing.org/sketch/11400

boolean toggleLoop = true;
boolean toggleAlpha, toggleFrame, toggleSites = true;
float siteX, siteY, r, distance;
Site [] siteList = {}; // Array of Site objects.
int [] colorList = {}; // Array of random colors.
int trans; // Optional alpha value for colors.
int index; // Used in for loop, but corresponds to site & color array indices.
float sample; // Storage for distance comparisons. Retains lowest value.
int maxSites = 12; // Constrain Sites array.
float linear, scaler; // Adjust distance test, either linear or scaler.
int addSites; // Increase number of Sites.

void setup() {
// frame.setTitle(“Voronoi 1”);
float base = 500, aspect = 2;
size(int(base), int(base/aspect));
loadPixels();
background(0);
noStroke();
smooth();
r = 5;
linear = 0;
scaler = 1;
addSites = 0;
}

void draw() {

if (toggleFrame) {
noLoop(); toggleLoop = false;
}

trans = (toggleAlpha) ? 7 : 255; // Transparency interface.

if (siteList.length < maxSites + addSites) { // Array constraint.
siteX = random(width);
siteY = random(height);
siteList = (Site[]) append(siteList, new Site(siteX, siteY, r));
colorList = append(colorList, color(random(145), random(145), random(105), trans));
}

for (int x = 0; x < width; x++) { // Scan rows.
for (int y = 0; y < height; y++) { // Scan columns.
index = 0; // (Re)set index.
for (int i = 0; i < siteList.length; i++) { // Scan sites.
distance = dist(x, y, siteList[i].x, siteList[i].y); // Get pixel-to-site distance.
if (distance < sample || i == 0) { // Compare current to stored value,
sample = (distance + linear) * scaler; // if lower, replace stored value,
index = i; // store index of nearest distance.
}
}
// set(x, y, colorList[index]); // Set color w/index site/color arrays.
pixels[x + (y * width)] = colorList[index]; // Same as above, but faster.
}
}

updatePixels();

for(int i = 0; i < siteList.length; i++) { // Draw sites.
fill(0, trans * 2);
if (toggleSites) {
ellipse(siteList[i].x, siteList[i].y, r, r);
}
colorList[i] = color(red(colorList[i]), green(colorList[i]), blue(colorList[i]), trans);
siteList[i].x += siteList[i].xv; // Optional animation.
siteList[i].y += siteList[i].yv;
siteList[i].xv = (siteList[i].x >= width) ? -siteList[i].xv : siteList[i].xv;
siteList[i].xv = (siteList[i].x < 0) ? -siteList[i].xv : siteList[i].xv;
siteList[i].yv = (siteList[i].y > height) ? -siteList[i].yv : siteList[i].yv;
siteList[i].yv = (siteList[i].y < 0) ? -siteList[i].yv : siteList[i].yv;
}

}

class Site {
float x, y, xv, yv, r;
Site(float x, float y, float r) {

this.x = x;
this.y = y;
this.r = r;
this.xv = random(-2, 2);
this.yv = random(-2, 2);

}
}
void mousePressed() {
if (mouseButton == LEFT) {
if (toggleLoop) {
noLoop();
toggleLoop = false;
}
else {
loop();
toggleLoop = true;
}
}
if (mouseButton == RIGHT) {
siteList = new Site[0];
colorList = new color[0];
setup();
}
}

void keyPressed() {
if (key == ‘s’ || key == ‘S’) {
if (toggleSites) {
toggleSites = false;
}
else {
toggleSites = true;
}
}
if (key == ‘a’ || key == ‘A’) {
if (toggleAlpha) {
toggleAlpha = false;
}
else {
toggleAlpha = true;
}
}
if (key == ‘=’ || key == ‘+’) {
linear++;
}
if (key == ‘-‘ || key == ‘_’) {
linear– ;
}
if (key == ‘.’ || key == ‘>’) {
scaler += .02;
}
if (key == ‘,’ || key == ‘<‘) {
scaler -= .02;
scaler = (scaler < 0) ? 0 : scaler; // Constrain lowest value to 0.
}
if (key == ‘]’ || key == ‘}’) {
addSites++;
}
if (key == ‘[‘ || key == ‘{‘) {
if (siteList.length > 1) {
addSites–;
siteList = (Site[]) shorten(siteList);
}

}

if (key == ‘f’ || key == ‘F’) {
if (toggleFrame) {
toggleFrame = false;
}
else {
toggleFrame = true;
}
}
}

 

 

 

 

 

 

 

 

Sin Cosine

Code 1

float a;

void setup() {
size(600, 600, P3D);
a=0;
background(0);
frameRate(10);
}
void draw() {

circleX();
circleY();
circleZ();
}

void circleX(){
a = a+(random(0.0003,0.0008));
pushMatrix();
noFill();
stroke(0,0,255);
translate(width/2, height/2, 0);
rotateX(cos(a));
ellipseMode(CENTER);
ellipse(0, 0, 350, 350);
popMatrix();
}

void circleY(){
a = a+(random(0.003,0.008));
pushMatrix();
noFill();
stroke(0,0,0);
translate(width/2, height/2, 0);
rotateY(sin(a));
rotateX(cos(a));
ellipseMode(CENTER);
ellipse(0, 0, 300, 300);
popMatrix();
}

void circleZ(){
a = a+(random(0.003,0.008));
pushMatrix();
noFill();
translate(width/2, height/2, 0);
rotateX(cos(a));
rotateY(tan(a));
stroke(0,0,0);
ellipseMode(CENTER);
ellipse(0, 0, 200, 200);

popMatrix();

}

 

code 2
<iframe width=”628″ height=”680″ scrolling=”no” frameborder=”0″ src=”http://www.openprocessing.org/sketch/139853/embed/?width=600&height=600&border=true”></iframe>

float a;
void setup() {
  size(600, 600, P3D);
  a=0;
    background(0);
}
void draw() {
circleX();
circleY();
circleZ();
//circleA();
}
void circleX(){
  a = a+(random(0.003,0.008));
  pushMatrix();
  noFill();
  stroke(255,0,0,9);
  translate(width/2, height/2, 0);
  rotateX(cos(a)*2);
  ellipseMode(CENTER);
  ellipse(0, 0, 400, 400);
  popMatrix();
}
void circleY(){
  a = a+(random(0.0003,0.0008));
  pushMatrix();
  noFill();
  stroke(0,0,255,9);;
  translate(width/2, height/2, 0);
  rotateY(sin(a));
  rotateX(cos(a));
  ellipseMode(CENTER);
  ellipse(0, 0, 300, 300);
  popMatrix();
}
void circleZ(){
  a = a+(random(0.003,0.008));
  pushMatrix();
  noFill();
  translate(width/2, height/2, 0);
  rotateX(cos(a));
    rotateY(tan(a));
   stroke(255,255,255,6);
  ellipseMode(CENTER);
  ellipse(0, 0, 220, 220);
 
  popMatrix();
}
void circleA(){
  a = a+(random(0.003,0.008));
  pushMatrix();
  noFill();
  translate(width/2, height/2, 0);
  rotateX(sin(a)/2);
   stroke(255,255,255,4);
  ellipseMode(CENTER);
  ellipse(0, 0, 450, 450);
 
  popMatrix();
}


π – things I know and things I want to

Random things about PI

What PI sounds like

Million numbers of PI 

The movie Pi by Daren Aronofsky

PI day is coming up!

Things I want to know about π

I think I would like to find new ways to use Pi, by digging deeper into the concept and perhaps experimenting with visual and textual materials.

Also, it would be interesting to know about places in which Pi is used and I would never guess. What is Pi used to calculate, where can it be put to use other than trigonometry?

1 hour walk of math

400px-DragonCurve_animation

So I went on a math stroll in the endless territory of the internet, and these are the things I ran into:

  1. This is maybe an example of a “small gesture”.
    This is the reason I know how to multiply 9 better than any number (besides 1,0 and 10).
  2. Fibonacci numbers
    I am also taking the nature of code class and I am interested in mathematical harmony in nature. I guess Fibonacci has become a design/coding cliche but I would still love to understand and practice it, perhaps with a new perspective.
  3. Magic square
    I somehow ran into the engraving “Melencolia” by Albrecht Durer, which included a detail of a magic square. A magic square is an arrangement of numbers in a square grid, where the numbers in each row, and in each column, and the numbers in the forward and backward main diagonals, all add up to the same number.Albrecht_Dürer_-_Melencolia_I_(detail)
  4. The Dragon Curve
    400px-DragonCurve_animation
  5. Seems that google has an interesting thing happen when you google “Conway’s Game of Life”, check it out. 
  6. I recalled Op-Art for some reason and found this page.
  7. Also recalled the artist Roman Opalka (should this be more in the “art walk”?). Opalka devoted most of his years and work to large scale pieces in which he serves as a counter, writing down sequences of numbers, with no comas.
    All details have the same title, “1965 / 1 – ∞”; the project had no definable end, and the artist pledged his life to its ongoing execution: ‘All my work is a single thing, the description from number one to infinity. A single thing, a single life’, ‘the problem is that we are, and are about not to be’. (pinned some of his works).


Favorite Algorithms
After looking at the list and around the web, The algorithms I would be interested in exploring and learning more about are:


I am interested in seeing what are the algorithms that Jen described as “beyond the usual suspects” since some of the concepts I mentioned have been over used (even though everything can be seen in a new and fresh perspective).

also, This is my Pinterest page where my visual/conceptual will be posted