Category: Uncategorized

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.

Gravity

//
// Supawat Vitoorapakorn
// Svitoora@andrew.cmu.edu
// Section E
//
// Gravity is a point mass dynamic drawing inspired
// from physics, nature, and falling off a skateboard.
// f = G (m1*m2)/d^2
// f = G sum(m)/(d from avg)^2


// World Model Setup /////////////////////////////////////
var w = 480;
var h = 640;
var t = 1; // time variable
var g = .0025; // gravity
var count = 0; // global count of objects

var ball;
var balls = []; // Array of objects
var ball_size = w * .010 // Default object size

var max_count = 30;
var auto_every = 35;
var max_line = 1000; // Prevents crash


// Control ///////////////////////////////////////////////

// Creates new object in system given (x,y)
function ball_create(x, y) {
	this.x = x;
	this.y = y;
	this.vx = 0;
	this.vy = 0;
	this.r = ball_size;
	this.m = 1;
	this.alpha = 255
}

// Add new object and delete oldest object
function mouseDragged() {
	if (t % 10) {
		balls.push(new ball_create(mouseX, mouseY));
	}
	if (balls.length >= max_count) {
		balls.splice(0, 1)
	}
}

// Add new object and delete oldest object
function mousePressed() {
	balls.push(new ball_create(mouseX, mouseY));
	if (balls.length >= max_count) {
		balls.splice(0, 1)
	}
}


// World /////////////////////////////////////////////////

// Maintain global count of balls
function count_balls(balls) {
	count = balls.length;
}

// Maintain global mass of system
function sum_mass(balls) {
	sum_m = 0;
	for (i in balls) {
		sum_m += balls[i].m;
	}
	return sum_m;
}

// Determines the system's average position X
function average_posX(balls) {
	if (balls.length == 0) {
		return w / 2;
	};
	var sum_x = 0;
	for (i in balls) {
		sum_x += balls[i].x;
	}
	avg = sum_x / balls.length
	return avg;
}

// Determines the system's average position Y
function average_posY(balls) {
	if (balls.length == 0) {
		return h / 2;
	};
	var sum_y = 0;
	for (i in balls) {
		sum_y += balls[i].y;
	}
	avg = sum_y / balls.length;
	return avg
}

// Apply gravity for all objects in the system
function gravity(balls) {
	var avg_x = average_posX(balls);
	var avg_y = average_posY(balls);
	var speed = .1 //0-1 Multuplier for controlling velocity of attratction
	for (i in balls) {
		d = dist(balls[i].x, balls[i].y, avg_x, avg_y);
        ds = map(d,0,w/2,1,0);  // used to simulate d^2
		
        // Gravity X
        if (balls[i].x > avg_x) {
			balls[i].x *= 1 - (g * (count * speed));
		} else { balls[i].x *= 1 + (g * (count * speed+ds));}

        // Gravity Y
		if (balls[i].y > avg_y) {
			balls[i].y *= 1 - (g * (count * speed))
		} else { balls[i].y *= 1 + (g * (count * speed+ds));}
	}
}

// Add object to system in the middle; // Used at setup()
function add_ball(balls) {
	balls.push(new ball_create(w / 2, h / 2));
}

// Prevents software from crashing
// from too many objects beyond max_count
function death(balls, t) {
	if (balls.length >= max_count) {
		balls.splice(0, 1);
		for (i in balls) {
			balls[i].r *= .99;
		}
	}
}

// Connects all the object in the system via a line
function draw_line(balls) {
	lines = 0
	alpha = 255 * .2

	if (lines < max_line) {
		for (i in balls) {
			var x_1 = balls[i].x;
			var y_1 = balls[i].y;
			for (i in balls) {
				var x_2 = balls[i].x;
				var y_2 = balls[i].y;
				stroke(255, 255, 255, alpha);
				line(x_1, y_1, x_2, y_2);
				lines += 1;
			}
		}
	}
}

// SETUP
function setup() {
	createCanvas(w, h);
	g = .0025;
	background(50);
	balls.length = 0; // Kill all objects in system
	add_ball(balls);
}

// Refreshes the systems with new objects
// Removes old objects and add new objects
function auto_refresh(balls, t) {
	// Starts refreshing system at 5 objects
	// every auto_every interval.
	if (t % auto_every == 0 & balls.length > 5) {
		balls.splice(0, 1);
	}
	X = constrain(mouseX, 1, w);
	Y = constrain(mouseY, 1, h)
	if (t % auto_every == 0) {
		balls.push(new ball_create(X, Y));
	}

	// Resets the system to 8 objects once every 500 ms
	// This prevents overload; Array starts at [0]
	if (t % 500 == 0 & balls.length > 8) {
		balls.length = 7;
	}
}

// Draw ////////////////////////////////////////////////////

// Draw all objects in systems mapped by distance from avg
function draw_balls(balls) {
	for (ball in balls) {
		noStroke();
		var avg_x = average_posX(balls);
		var avg_y = average_posY(balls);
		var d = dist(balls[ball].x, balls[ball].y, avg_x, avg_y);

		// Size and Alpha of Ball is a function of distance
		var alpha = map(d, balls[ball].r, w / 2, 255, 0);
		var size = map(d, 0, w / 2, .5, -1.5) //max to min

		fill(255, 255, 255, alpha);
		ellipse(balls[ball].x, balls[ball].y,
			balls[ball].r * (2 + size),
			balls[ball].r * (2 + size));
	}
}


// Execute /////////////////////////////////////////////////
function draw() {
	background(50);
	noStroke();
	// Update World
	t = t + 1;
	count_balls(balls);
	auto_refresh(balls, t);
	if (balls.length > 1) {
		gravity(balls);
	}
	death(balls, t);

	// Draw World
	draw_line(balls);
	draw_balls(balls);
}

Physics

 Gravity is a point mass dynamic drawing inspired from physics, nature, and falling off a skateboard. I wanted to create a systematic representation of mass attracts mass. To do this I was inspired by the physics formula:

The problem with this forumla is that it is meant for physicist dealing with a two body system. In my case, I wanted a forumla that worked with multiple bodies in a system algorithmically. After sketching for a while with equations on the white board, I realized that that the problem I was trying to solve was much simplier than I expected.

Essentially the problem boils down to averages. If all the object in the system had a mass of 1, then the center of mass of the system would be at the average coordinate position of every point mass. By definition this is the centroid of the system.

After defininig the centroid, I simply make every object in the system moves towards it. To replicate d^2’s effect on speed, I use a position *= and /= function, in addition to a mapping function of speed based off distance away from the centroid.

Model-View-Controller  (MVC)

This programs uses the MVC framework taught in 15-112. Objects are models are added to an array, modfified by the controller, and then representated through view functions. Because of the complexity of this code, I used to object-oriented programming to organize my variables. I didn’t quite understand object-based methods in javascript yet, so I worked around them.

Demo and Project Requirments:

To sastify the project requirement, there are no random or non-deterministic element. Every function is deterministic, therefore given the exact same mouse input the Gravity will create the exact same drawing. The variables that are being altered in how the image is being created are: size, position, opacity, angle, etc.

SaveSave

SaveSave

SaveSave