123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189 |
- var path = new Path({
- fillColor: 'black'
- });
- var url = 'trame.svg';
- var raster = new Raster(url);
- var amount = 3
- for (var i = 0; i < amount; i++) {
- raster.position = new Point(300,600) * Point.random(view.size);
- // var point = new Point(600, 650) * Point.random(view.size);
- path.add(raster.position);
- var segment = path.segments[i];
- }
- path.closed = true;
- path.fullySelected = true;
- path.clipMask = true;
- function onFrame(event) {
- // Loop through the segments of the path:
- // A cylic value between -1 and 1
- for (var i = 0; i <= amount; i++) {
- var sinus = Math.sin(event.time * 1 + i);
- // Change the y position of the segment point:
- segment.point.y = sinus * 100 + 100;
- segment.point.x = sinus * 50 + 150;
- path.smooth();
- }
- }
- // function Ball(r, p, v) {
- //
- // this.radius = r;
- // this.point = p;
- // this.vector = v;
- // this.maxVec = 0.1;
- // this.numSegment = Math.floor(r / 1 + 1);
- // this.boundOffset = [];
- // this.boundOffsetBuff = [];
- // this.sidePoints = [];
- // this.path = new Path({
- // fillColor: {
- // hue: Math.random() * 360,
- // saturation: 1,
- // brightness: 1
- // },
- // blendMode: 'lighter'
- // });
- //
- // for (var i = 0; i < this.numSegment; i ++) {
- // this.boundOffset.push(this.radius);
- // this.boundOffsetBuff.push(this.radius);
- // this.path.add(new Point());
- // this.sidePoints.push(new Point({
- // angle: 360 / this.numSegment * i,
- // length: 1
- // }));
- // }
- // }
- //
- // Ball.prototype = {
- // iterate: function() {
- // this.checkBorders();
- // if (this.vector.length > this.maxVec)
- // this.vector.length = this.maxVec;
- // this.point += this.vector;
- // this.updateShape();
- // },
- //
- // checkBorders: function() {
- // var size = view.size;
- // if (this.point.x < -this.radius)
- // this.point.x = size.width + this.radius;
- // if (this.point.x > size.width + this.radius)
- // this.point.x = -this.radius;
- // if (this.point.y < -this.radius)
- // this.point.y = size.height + this.radius;
- // if (this.point.y > size.height + this.radius)
- // this.point.y = -this.radius;
- // },
- //
- // updateShape: function() {
- // var segments = this.path.segments;
- // for (var i = 0; i < this.numSegment; i ++)
- // segments[i].point = this.getSidePoint(i);
- //
- // this.path.smooth();
- // for (var i = 0; i < this.numSegment; i ++) {
- // if (this.boundOffset[i] < this.radius / 4)
- // this.boundOffset[i] = this.radius / 4;
- // var next = (i + 1) % this.numSegment;
- // var prev = (i > 0) ? i - 1 : this.numSegment - 1;
- // var offset = this.boundOffset[i];
- // offset += (this.radius - offset) / 15;
- // offset += ((this.boundOffset[next] + this.boundOffset[prev]) / 2 - offset) / 3;
- // this.boundOffsetBuff[i] = this.boundOffset[i] = offset;
- // }
- // },
- //
- // react: function(b) {
- // var dist = this.point.getDistance(b.point);
- // if (dist < this.radius + b.radius && dist != 0) {
- // var overlap = this.radius + b.radius - dist;
- // var direc = (this.point - b.point).normalize(overlap * 0.015);
- // this.vector += direc;
- // b.vector -= direc;
- //
- // this.calcBounds(b);
- // b.calcBounds(this);
- // this.updateBounds();
- // b.updateBounds();
- // }
- // },
- //
- // getBoundOffset: function(b) {
- // var diff = this.point - b;
- // var angle = (diff.angle + 180) % 360;
- // return this.boundOffset[Math.floor(angle / 360 * this.boundOffset.length)];
- // },
- //
- // calcBounds: function(b) {
- // for (var i = 0; i < this.numSegment; i ++) {
- // var tp = this.getSidePoint(i);
- // var bLen = b.getBoundOffset(tp);
- // var td = tp.getDistance(b.point);
- // if (td < bLen) {
- // this.boundOffsetBuff[i] -= (bLen - td) / 2;
- // }
- // }
- // },
- //
- // getSidePoint: function(index) {
- // return this.point + this.sidePoints[index] * this.boundOffset[index];
- // },
- //
- // updateBounds: function() {
- // for (var i = 0; i < this.numSegment; i ++)
- // this.boundOffset[i] = this.boundOffsetBuff[i];
- // }
- // };
- //
- // //--------------------- main ---------------------
- //
- // var balls = [];
- // var numBalls = 7;
- // for (var i = 0; i < numBalls; i++) {
- // var position = Point.random() * view.size;
- // var vector = new Point({
- // angle: 360 * Math.random(),
- // length: Math.random() * 10
- // });
- // var radius = Math.random() * 100 + 100;
- // balls.push(new Ball(radius, position, vector));
- //
- // }
- // function onFrame() {
- // for (var i = 0; i < balls.length - 1; i++) {
- // for (var j = i + 1; j < balls.length; j++) {
- // balls[i].react(balls[j]);
- // }
- // }
- // for (var i = 0, l = balls.length; i < l; i++) {
- // balls[i].iterate();
- // }
- // }
|