# Wave pool depths issues

**URL:** <https://forum.kirupa.com/t/wave-pool-depths-issues/263633>\
**Category:** Uncategorized\
**Created:** [June 17, 2008, 8:13pm UTC](https://forum.kirupa.com/t/wave-pool-depths-issues/263633 "2008-06-17T20:13:48Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![rf1017](https://avatars.discourse-cdn.com/v4/letter/r/e0b2c6/32.png) [@rf1017](https://forum.kirupa.com/u/rf1017)\
**Post date:** [June 17, 2008, 8:13pm UTC](https://forum.kirupa.com/t/wave-pool-depths-issues/263633/1 "2008-06-17T20:13:48Z")

</div>

Hello everyone.

I’m having a few problems getting an idea to work. \*\*3 \*\*problems actually.

You can see it here: [http://www.cloudesign.com/clients/depthproblem/](http://www.cloudesign.com/clients/depthproblem/)

I’ve taken Senocular’s wave pool code and attempted to integrate it into a full browser design. **1** One of the problems is that the “pool” doesn’t stretch all the way across in the browser.

Here’s how the wave pool is generated:

```auto
this.createEmptyMovieClip("pool",1);
pool.count = 200;
pool.spacing = 5;
pool.seaLevel = -65;
pool.delay = 4;
pool.accel = 0.03;
pool.fric = 0.88;

pool._y = Stage.height

pool._alpha = 40;

pool.init = function(){
    this.pause = 0; // control pause interval
    this.theFrame = 0; // count frames to control pause
    this.curr_ymouse = this._ymouse; // current mouse position
    this.points = new Array();
    // populate points array
    var point = 0;
    while (point < this.count) {
        this.points[this.points.length] = {
            x: point * this.spacing,
            y: this.seaLevel,
            speed: 0,
            num: point,
            process: new Array(),
            nProcess: new Array()
        };
        ++point;
    }
}
pool.makeWave = function (num, mag) {
    this.points[num].speed += mag;
    this.points[num - 1].process[this.points[num - 1].process.length] = [mag, -1];
    this.points[num + 1].process[this.points[num + 1].process.length] = [mag, 1];
};

pool.mouseWaveNum = function () {
    return Math.round(Math.min(Math.max((this._xmouse) / this.spacing, 0), this.count));
};

pool.onMouseMove = function () {
    this.last_ymouse = this.curr_ymouse;
    this.curr_ymouse = this._ymouse;
    var thisNum = this.mouseWaveNum();
    var curr_y = this.points[thisNum].y;
    if (curr_ymouse < curr_y && curr_y < this.last_ymouse || curr_y < this.curr_ymouse && this.last_ymouse < curr_y) {
        this.makeWave(thisNum, Math.min(Math.max(-1, (this.curr_ymouse - this.last_ymouse) * 0.5), 1));
    }
};
pool.onEnterFrame = function() {
    var next, me, i, col;
    var point = 0;
    // process waving motion
    while (point<this.count) {
        me = this.points[point];
        me.speed += (this.seaLevel-me.y)*this.accel;
        me.speed *= this.fric;
        me.y += me.speed;
        if (!this.pause) {
            i = 0;
            while (i<me.process.length) {
                me.speed += me.process*[0];
                next = this.points[point+me.process*[1]];
                next.nProcess[next.nProcess.length] = me.process*.slice();
                ++i;
            }
        }
        ++point;
    }
    
    // draw lines (needs to be after waving, not during)
    var point = 0;
    this.clear();
    this.beginFill(0x134E66,100);
    while (point<this.count) {
        me = this.points[point];
        if (!this.pause) {
            me.process = me.nProcess;
            me.nProcess = [];
        }
        if (!point) col = 0x70E0;
        else{
            col = 127+Math.min(Math.max(20*(this.points[point-1].y-me.y), -127),128);
            col = ((col/2)<<8) | col; // green thats 1/2 the blue
        }
        this.lineStyle(0,col,100);
        this.lineTo(me.x, me.y);
        ++point;
    }
    this.lineStyle(0,0x38,100);
    this.lineTo(me.x,0);
    this.lineTo(0,0);
    // update pausing
    this.pause = this.theFrame++ % this.delay;
};

// get things in motion.
pool.init();

```

And here’s how I’m controlling it’s position on the stage:

```auto
Stage.align = "TL";
Stage.scaleMode = "noScale";
stop ();

// initial positions

pool._y = Stage.height
pool._width = Stage.width

player._y = Stage.height - 20
player._x = Stage.width - 485

bottombar._width = Stage.width
bottombar._y = Stage.height - 20

// end initial position setting

// resize listener
sizeListener = new Object();
sizeListener.onResize = function() {
    // resize positions

pool._y = Stage.height
pool._width = Stage.width
    
player._y = Stage.height - 20
player._x = Stage.width - 485
    
bottombar._width = Stage.width
bottombar._y = Stage.height - 20

 
};
Stage.addListener(sizeListener);

```

I can’t get it to initialize at the browser width.

**2** The other issue I’m having is I don’t know how to control at what depth the “pool” is placed, I need it to be underneath “bottom bar” and the container.

I’m bringing in the MP3 player through a container MC like this:

```auto
player.loadMovie("mp3player.swf");

```

**3** The last issue I’m having is that I’m wondering if there’s a smoother way to control objects on the stage? When changing the browser size around, I don’t get as smooth an effect as I’ve seen elsewhere

Anyone have an ideas? Here’s the source, please help me:

[http://www.cloudesign.com/clients/depthproblem/depth\_problem.zip](http://www.cloudesign.com/clients/depthproblem/depth_problem.zip)

---

<div class="post-metadata">

**Author:** ![rf1017](https://avatars.discourse-cdn.com/v4/letter/r/e0b2c6/32.png) [@rf1017](https://forum.kirupa.com/u/rf1017)\
**Post date:** [June 18, 2008, 3:27pm UTC](https://forum.kirupa.com/t/wave-pool-depths-issues/263633/2 "2008-06-18T15:27:02Z")

</div>

hmmm… am I not being clear or is this just a really boring thread?

---

<div class="post-metadata">

**Author:** ![randomagain](https://avatars.discourse-cdn.com/v4/letter/r/35a633/32.png) [@randomagain](https://forum.kirupa.com/u/randomagain)\
**Post date:** [June 18, 2008, 3:32pm UTC](https://forum.kirupa.com/t/wave-pool-depths-issues/263633/3 "2008-06-18T15:32:43Z")

</div>

the link doesn’t appear to show anything of what you are talking about

I can’t visualise what you are getting at 😛

---

<div class="post-metadata">

**Author:** ![rf1017](https://avatars.discourse-cdn.com/v4/letter/r/e0b2c6/32.png) [@rf1017](https://forum.kirupa.com/u/rf1017)\
**Post date:** [June 18, 2008, 5:58pm UTC](https://forum.kirupa.com/t/wave-pool-depths-issues/263633/4 "2008-06-18T17:58:21Z")

</div>

You might need to resize your browser to see some of the issues.

The wave pool is the blue strip at the bottom of the browser, touch it to see the waves.

The “pool” MC is created through the AS above, and it’s getting placed at the top of the stage, I want it underneath the brown bar and mp3player, but can’t seem ot control the depth of it.

The other issue I’m having is that the pool doesn’t stretch to the browser width on the first frame, only on resize, even though the code is identical.