lava lamp effect..

[random10122]

I am looking at achieving an effect similar to that on neave's homepage, the 'lava lamp' effect around the edge of the site that the user can play with..

Any ideas on how this can be achieved without animation?

Cheers!

[realMakc]

you mean http://www.neave.com/neave_blob.swf? it uses curveTo-s.

[random10122]

yea,

although strangely after i posted this i have noticed this thread:

http://board.flashkit.com/board/showthread.php?t=741166

on displacement maps, i am wondering if that would be a faster way to do a similar thing. Really need to get up to date on all these f8 functions :-(

[realMakc]

since page ~3 they do it with lineTo-s there

[mr_malee]

made this a while ago, uses AS1 classes

function Line(x, y){
	
	this.x = x;
	this.y = y;
	
	this.px = x;
	this.py = y;
	
	this.vx = this.vy = 0;
	
	lines.push(this);
}

Line.prototype.control = function(){
	
	var mx = circle._xmouse;
	var my = circle._ymouse;
	
	var dx = mx - this.x;
	var dy = my - this.y;
	
	var sx = dx > 0 ? -1 : 1;
	var sy = dy > 0 ? -1 : 1;

	var fx = 0;
	var fy = 0;
	
	var d = dx * dx + dy * dy;
	
	if(d < dist){
		var force = (-1*a*d)+power;
		fx = (dx*dx) / d*sx*force;
		fy = (dy*dy) / d*sy*force;
	}
	
	this.vx = (this.vx * friction) + ((this.px - this.x) * spring) + fx;
	this.vy = (this.vy * friction) + ((this.py - this.y) * spring) + fy;
	
	this.x += this.vx
	this.y += this.vy
}

Line.prototype.draw = function(l){
	
	var mx = (this.x + l.x) / 2
	var my = (this.y + l.y) / 2	
	
	circle.curveTo(this.x, this.y, mx, my)	
}

var circle = createEmptyMovieClip("circle", 0);
var lines = [];

var power = 10
var spring = .1;
var friction = .9;
var distance = 60;

var dist = distance*distance;
var a = power / dist;

var num = 10;
var radius = 100;

for(var i=0; i<num; i++){
	
	var n = (i/num) * (Math.PI*2)
	var x = radius * Math.cos(n)
	var y = radius * Math.sin(n)
	
	var l = new Line(x, y)
}

circle._x = Stage.width / 2;
circle._y = Stage.height / 2;	

onEnterFrame = function(){

	var length = lines.length;
	var i = length;
	
	while(--i >= 0)	lines[i].control();
	
	//start draw
	var sx = (lines[0].x + lines[length-1].x) / 2
	var sy = (lines[0].y + lines[length-1].y) / 2

	circle.clear()
	circle.beginFill(0xFF0000, 100)
	circle.moveTo(sx, sy)
	
	var i = length
	
	while(--i >= 0) lines[i].draw(lines[i-1] || lines[length-1]);
	
	circle.endFill()
}

the physics is exactly the same as that used in the displacementMap filter example. Can't take credit for that, its from liquidJourney

[SaphuA]

AS1 classes? The thing you're doing is just pure garbage hacking Good stuff though.

[random10122]

Cheers gang

[EvilKris]

Whoah, gets me green with envy when I see a site design that inspirational...

[RJ-Flash]

It's nothing spectacular in programming,
but this effect uses filters and simple math to
create the appearance of Realistic Glowing Lava Lamp Blobs..






And don't forget to check out:
Realistic Glowing Candle and Flame



Check it all out at: rjflash.com

www.rjflash.com

If you ask kindly, I can give you FREE fla files or fla help



Thanks for lookin'!

[renderhjs]

I will be so kind and inform you that this thread is back from 2007 so almost 2 years old. So if all you want is pimping why not create a new thread instead? because the original posters propably dont care anymore by now.

besides that it looks that you rather want to pimp your domain (some might consider that as spam)

no need to get angry - Tony

[random10122]

maybe i do still care.. eh, eh?!

ahh, who am i kidding - i don't even remember what this was for!