[INTRO2ICM] WK7 DOM

Constructor Function and DOM.
First I noticed some friends making ellipeses with lines. So, I wanted to make my own version of ellipses and lines. I used stroke first, and later updated to curve. I wanted sliders to be 90degree, I modified them with rotate. I had hard time figuring out sharing variables with constructor function  and setup. So I made universal variables connected to the slider value. Also, later I found function update which reads the values of the ellipses in the array.

Here is the sketch: DOYOKI.COM >>

And Code:

var ellipseMore = [];

var coslider;
var stslider;
var spslider;

var co;
var st;
var sp;

function setup() {

coslider = createSlider(1, 255, 2);
stslider = createSlider(3, 30);
spslider = createSlider(1, 3000);

coslider.position(windowWidth / 2 – 40, windowHeight / 2);
stslider.position(windowWidth / 2 – 60, windowHeight / 2);
spslider.position(windowWidth / 2 – 80, windowHeight / 2);

coslider.rotate(90);
stslider.rotate(90);
spslider.rotate(90);

for (var i = 0; i < 20; i++) {
ellipseMore.push(new ellipses());
}

}

function draw() {
createCanvas(windowWidth, windowHeight);
background(co, 255-co, 255);
co = coslider.value();
st = stslider.value();
sp = spslider.value();

for (var i = 0; i < ellipseMore.length; i++) {
ellipseMore[i].display();
ellipseMore[i].move();
ellipseMore[i].update();

}

}

function ellipses() {
this.x = random(0, windowWidth);
this.y = random(0, windowHeight);
this.w = 5;
this.h = -0.5;

this.a = random(0, windowWidth);
this.b = random(0, windowHeight)
this.c = 5;
this.d = 0.5;

this.p = random(0, windowWidth);
this.q = random(0, windowHeight)
this.r = -5;
this.s = 0.5;
this.factor = 1;

this.update = function() {
this.factor = stslider.value();
}
this.display = function() {
noFill();
stroke(255, co, 100,150);
strokeWeight(st);

curve(sp, -sp, this.x, this.y, this.a, this.b, -sp, sp);
curve(-sp, -sp, this.a, this.b, this.p, this.q, -sp, sp);
curve(-sp, sp, this.p, this.q, this.x, this.y, -sp, sp);
fill(0, co, 255);
strokeWeight(0);
ellipse(this.x, this.y, 70, 70);
ellipse(this.a, this.b, 70, 70);
ellipse(this.p, this.q, 70, 70);

}

this.move = function() {
this.x = this.x + this.w * this.factor*0.2;
this.y = this.y + this.h;
this.a = this.a + this.c* this.factor*0.2;
this.b = this.b + this.d;
this.p = this.p + this.r* this.factor*0.2;
this.q = this.q + this.s;

if (this.x > windowWidth || this.x < 0) {
this.w = this.w * -1;
}
if (this.y > windowHeight || this.y < 0) {
this.h = this.h * -1;
}
if (this.a < 0 || this.a > windowWidth) {
this.c = this.c * -1;
}
if (this.b < 0 || this.b > windowHeight) {
this.d = this.d * -1;
}
if (this.p > windowWidth || this.p < 0) {
this.r = this.r * -1;
}
if (this.q < 0 || this.q > windowHeight) {
this.s = this.s * -1;
}

}
}

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s