Processing Drawing Machine

Mackenzie Carlson

 

For this assignment, I wanted to create something pretty and simple. The only step you need to know is to click the screen- the rest will draw itself!

The Code:

var lines = [];

var colors = [];

function setup() {
createCanvas(windowWidth, windowHeight);

colors.push(color(205,183,186,255));
colors.push(color(233,170,187,255));
colors.push(color(200,76,86,255));
colors.push(color(208,27,8,255));
colors.push(color(190,102,88,255));
colors.push(color(220,74,77,255));
colors.push(color(185,54,36,255));
colors.push(color(231,105,93,255));
colors.push(color(152,114,165,255));
colors.push(color(150,150,124,255));
colors.push(color(102,152,213,255));
colors.push(color(133,154,233,255));
colors.push(color(124,68,107,255));
}

function draw() {
for(var i=0; i<lines.length; i++){
lines[i].draw();
}

for(var i=lines.length-1; i>=0; i–){
if(lines[i].lifeSpan<=0) lines.splice(i, 1);
}
}

function mouseClicked() {
lines.push(new Line());
}

function Line() {
this.x = 0;
this.y = 0;
this.prevX = 0;
this.prevY = 0;
this.centerX = 0;
this.centerY = 0;
this.radius = 0;
this.angle = random(TWO_PI);
this.vel = random(1) > 0.5 ? 0.1 : -0.1;
this.color = color(0);

this.changeSpan = 0;
this.lifeSpan = random(200, 300);

this.innerLines = [];

this.change = function(){
this.changeSpan = random(20, 40);
this.innerLines = [];

var prevRadius = this.radius;
this.radius = random(30, 90);
if(this.centerX==0){
this.centerX = mouseX;
this.centerY = mouseY;
}else{
this.centerX += Math.cos(this.angle) * (prevRadius + this.radius);
this.centerY += Math.sin(this.angle) * (prevRadius + this.radius);
this.angle = Math.atan2(this.centerY – this.y, this.centerX – this.x) + PI;
this.vel *= -1;
this.color = colors[floor(random(colors.length))];
}
}

this.draw = function() {
this.lifeSpan–;
this.changeSpan–;
if(this.changeSpan<=0) this.change();

this.angle += this.vel;
this.prevX = this.x;
this.prevY = this.y;
var cos = Math.cos(this.angle);
var sin = Math.sin(this.angle);
this.x = cos * this.radius + this.centerX;
this.y = sin * this.radius + this.centerY;

if(this.prevX != 0){
stroke(this.color);
strokeWeight(3);
line(this.prevX, this.prevY, this.x, this.y);
}else{
this.color = colors[floor(random(colors.length))];
}

if(random(1)<0.1 && this.lifeSpan>10) {
this.innerLines.push(new InnerLine());
this.innerLines[this.innerLines.length-1].setup(this.lifeSpan, this.radius);
};

push();
translate(this.centerX, this.centerY);
for(var i=this.innerLines.length-1; i>=0; i–){
this.innerLines[i].draw(cos, sin);
if(this.innerLines[i].lifeSpan<=0) this.innerLines.splice(i, 1);
}
pop();
};
}

function InnerLine() {
this.stroke = 0;
this.lifeSpan = 0;
this.radius = 0;
this.color = 0;
this.prevX = 0;
this.prevY = 0;
this.prevDrawnSquare = {};
this.prevTopLeftX = 0;
this.prevTopLeftY = 0;
this.prevTopRightX = 0;
this.prevTopRightY = 0;

this.setup = function(lifeSpan, radius, color){
this.lifeSpan = random(lifeSpan/2)+9;
this.radius = random(5, radius * 0.8);
this.stroke = random(2, radius/6);
this.color = colors[floor(random(colors.length))];
}

this.draw = function(cos, sin){
this.lifeSpan–;

var x = cos * this.radius;
var y = sin * this.radius;
if(this.prevX != 0){
stroke(this.color);
fill(this.color);
var angle = Math.atan2(y-this.prevY, x-this.prevX)+PI/2;
var cos2 = Math.cos(angle);
var sin2 = Math.sin(angle);
var topLeftX = x-this.stroke*cos2;
var topLeftY = y-this.stroke*sin2;
var topRightX = x+this.stroke*cos2;
var topRightY = y+this.stroke*sin2;

if(this.prevTopRightX!=0){
beginShape();
vertex(topLeftX, topLeftY);
vertex(topRightX, topRightY);
vertex(this.prevTopRightX, this.prevTopRightY);
vertex(this.prevTopLeftX, this.prevTopLeftY);
endShape(CLOSE);
}

this.prevTopRightX = topRightX;
this.prevTopRightY = topRightY;
this.prevTopLeftX = topLeftX;
this.prevTopLeftY = topLeftY;
}
this.prevX = x;
this.prevY = y;
}
}