Red_Swirl – ICM Animation

See the real thing here: itp.jscottdutcher.com/red_swirl

The documentation for this project isn’t as good as the last one at all. I got so into making the thing that I forgot to stop and document my steps. Oops!

This started out as an in class example, but I really liked it. I wanted to try and make it so the circle got bigger and smaller, and changed color as you drew with it. Getting the circle to get bigger and bigger or redder and redder wasn’t hard, but I couldn’t figure out how to get it to come back down again.

I expressed my frustration to a friend, who pointed out that my project had no sense of time (ie ‘getting bigger time’ or ‘getting smaller time’) and I could add that with simple Boolean logic. I banged my head against trying to make that work for a while and eventually got it.

One of the difficult things I couldn’t get, and still kind of don’t, is that if I had my functions inside the draw function they wouldn’t work. But if I moved them outside, it would. What’s up with that? No idea and I don’t have a record of how my code was setup before I got it working. Oh well.

Looking at what I ended up with, it occurs to me that I probably don’t need more_red() and bigger(). I can probably do the same thing with one function, more() perhaps, and simply pass in fill_red or brushWidth. I fiddled with that a bit, but couldn’t get it to work before class.

var brushWidth = 500;
var fill_red = 0;
var isGettingRedder = true;
var isGettingBigger = true;

function setup() {
createCanvas(2000, 1000);
background (0, 255, 255);
}

function more_red() {
fill_red = fill_red+1;
print(fill_red);
}

function less_red(){
fill_red = fill_red-1;
print(fill_red);
}

function bigger(){
brushWidth = brushWidth+1;
print("bigger");
}

function smaller(){
brushWidth = brushWidth-1;
print("smaller")
}

function mousePressed(){
background (0, 255, 255);
}

function draw() {
fill(fill_red, 0, 0);
ellipse(mouseX, mouseY, brushWidth, brushWidth);

if (fill_red == 255){
isGettingRedder = false;
}

if (fill_red === 0){
isGettingRedder = true;
}

if (brushWidth == 500){
isGettingBigger = false;
}

if (brushWidth === 0){
isGettingBigger = true;
}

if (isGettingRedder === true){
more_red();
}

if (isGettingRedder === false){
less_red();
}

if (isGettingBigger === true){
bigger();
}

if (isGettingBigger === false){
smaller();
}

}