PK 4 iN0X S sketch677093/mySketch.jsS// Title: Teleporting Dots // Author: FAL (website: https://www.fal-works.com/ ) // Date: 18. Oct. 2017 // Made with p5.js v0.5.14 // Generated by CoffeeScript 2.0.1 var Dot, attractToMouse, awayFromMouse, createRandomColor, createRandomDot, dotArray, draw, effectiveRadius, keyPressed, keyReleased, processDots, setup; dotArray = []; effectiveRadius = 10; // ---------- Dot ------------------------------------------------------ // Dot = (function() { class Dot { constructor() { this.position = createVector(0, 0); this.displaySize = 10; this.displayColor = color(255); this.targetPosition = createVector(0, 0); this.currentMoveFrameCount = 0; this.isMoving = false; this.relayPointRatio = 0; this.relayPointPosition = createVector(0, 0); this.startPointRatio = 0; this.startPointPosition = createVector(0, 0); this.endPointRatio = 0; this.endPointPosition = createVector(0, 0); } setTarget(x, y) { var displacementX, displacementY; if (this.isMoving) { this.position.set(this.endPointPosition.x, this.endPointPosition.y); } this.targetPosition.set(x, y); this.currentMoveFrameCount = 0; this.isMoving = true; displacementX = x - this.position.x; displacementY = y - this.position.y; if (Math.random() < 0.5) { this.relayPointRatio = abs(displacementX) / (abs(displacementX) + abs(displacementY)); this.relayPointPosition.set(this.position.x + displacementX, this.position.y); } else { this.relayPointRatio = abs(displacementY) / (abs(displacementX) + abs(displacementY)); this.relayPointPosition.set(this.position.x, this.position.y + displacementY); } } update() { var endPointX, endPointY, ratio, startPointX, startPointY; if (this.isMoving) { this.currentMoveFrameCount++; this.startPointRatio = this.getStartPointRatio(); this.endPointRatio = this.getEndPointRatio(); if (this.startPointRatio < this.relayPointRatio) { ratio = this.startPointRatio / this.relayPointRatio; startPointX = this.position.x + ratio * (this.relayPointPosition.x - this.position.x); startPointY = this.position.y + ratio * (this.relayPointPosition.y - this.position.y); } else { ratio = (this.startPointRatio - this.relayPointRatio) / (1 - this.relayPointRatio); startPointX = this.relayPointPosition.x + ratio * (this.targetPosition.x - this.relayPointPosition.x); startPointY = this.relayPointPosition.y + ratio * (this.targetPosition.y - this.relayPointPosition.y); } this.startPointPosition.set(startPointX, startPointY); if (this.endPointRatio < this.relayPointRatio) { ratio = this.endPointRatio / this.relayPointRatio; endPointX = this.position.x + ratio * (this.relayPointPosition.x - this.position.x); endPointY = this.position.y + ratio * (this.relayPointPosition.y - this.position.y); } else { ratio = (this.endPointRatio - this.relayPointRatio) / (1 - this.relayPointRatio); endPointX = this.relayPointPosition.x + ratio * (this.targetPosition.x - this.relayPointPosition.x); endPointY = this.relayPointPosition.y + ratio * (this.targetPosition.y - this.relayPointPosition.y); } this.endPointPosition.set(endPointX, endPointY); if (this.currentMoveFrameCount >= this.moveDurationFrameCount) { this.position.set(this.targetPosition.x, this.targetPosition.y); this.isMoving = false; } } } display() { if (this.isMoving) { strokeWeight(this.displaySize); stroke(this.displayColor); noFill(); beginShape(); vertex(this.startPointPosition.x, this.startPointPosition.y); if (this.startPointRatio < this.relayPointRatio && this.relayPointRatio < this.endPointRatio) { vertex(this.relayPointPosition.x, this.relayPointPosition.y); } vertex(this.endPointPosition.x, this.endPointPosition.y); endShape(); } else { noStroke(); fill(this.displayColor); ellipse(this.position.x, this.position.y, this.displaySize, this.displaySize); } } getMoveProgressRatio() { return min(1, this.currentMoveFrameCount / this.moveDurationFrameCount); } getStartPointRatio() { return -(Math.pow(this.getMoveProgressRatio() - 1, 2)) + 1; } getEndPointRatio() { return -(Math.pow(this.getMoveProgressRatio() - 1, 4)) + 1; } getDistance(x, y) { return dist(x, y, this.position.x, this.position.y); } }; Dot.prototype.moveDurationFrameCount = 17; return Dot; })(); createRandomDot = function() { var newDot; newDot = new Dot(); newDot.position = createVector(random(width), random(height)); newDot.displaySize = 4 * width / 640; newDot.displayColor = createRandomColor(50, 100); return newDot; }; createRandomColor = function(saturationValue, brightnessValue) { var newColor; colorMode(HSB); newColor = color(random(360), saturationValue, brightnessValue); colorMode(RGB); return newColor; }; // ---------- Methods for controlling dots ------------------------------------------ // processDots = function(func, effectiveRadius, probability) { var eachDot, i, len; for (i = 0, len = dotArray.length; i < len; i++) { eachDot = dotArray[i]; if (eachDot.isMoving) { continue; } if (!(Math.random() < probability)) { continue; } func(eachDot, effectiveRadius); } }; awayFromMouse = function(dot, effectiveRadius) { if (!(dot.getDistance(mouseX, mouseY) < effectiveRadius)) { return; } dot.setTarget(random(width), random(height)); }; attractToMouse = function(dot, effectiveRadius) { var angle, distance, x, y; distance = Math.random() * effectiveRadius; angle = Math.random() * TWO_PI; x = mouseX + distance * cos(angle); if (x < 0) { x = -x; } else if (x > width) { x = width - (x - width); } y = mouseY + distance * sin(angle); if (y < 0) { y = -y; } else if (y > height) { y = height - (y - height); } dot.setTarget(x, y); }; // ---------- Setup & Draw ------------------------------------------ // setup = function() { var canvasSideLength, i; canvasSideLength = max(min(windowWidth, windowHeight) * 0.95, min(displayWidth, displayHeight) * 0.5); createCanvas(canvasSideLength, canvasSideLength); for (i = 0; i < 150; i++) { dotArray.push(createRandomDot()); } effectiveRadius = 0.25 * width; }; draw = function() { var eachDot, i, len; blendMode(BLEND); background(0, 0, 40); blendMode(ADD); for (i = 0, len = dotArray.length; i < len; i++) { eachDot = dotArray[i]; eachDot.update(); eachDot.display(); } if (mouseIsPressed) { processDots(awayFromMouse, effectiveRadius, 1); processDots(attractToMouse, effectiveRadius, 0.001); } else { processDots(attractToMouse, effectiveRadius, 0.1); } }; keyPressed = function() { if (key === 'P') { noLoop(); } }; keyReleased = function() { if (key === 'P') { loop(); } };PK 4 iNʮ | sketch677093/CoffeeScript.js|/* dotArray = [] effectiveRadius = 0 # ---------- Dot ------------------------------------------------------ // class Dot constructor: -> @position = createVector 0, 0 @displaySize = 10 @displayColor = color 255 @targetPosition = createVector 0, 0 @currentMoveFrameCount = 0 @isMoving = false @relayPointRatio = 0 @relayPointPosition = createVector 0, 0 @startPointRatio = 0 @startPointPosition = createVector 0, 0 @endPointRatio = 0 @endPointPosition = createVector 0, 0 moveDurationFrameCount: 17 setTarget: (x, y) -> if this.isMoving then @position.set @endPointPosition.x, @endPointPosition.y @targetPosition.set x, y; @currentMoveFrameCount = 0 @isMoving = true displacementX = x - @position.x displacementY = y - @position.y if Math.random() < 0.5 @relayPointRatio = abs(displacementX) / (abs(displacementX) + abs(displacementY)) @relayPointPosition.set @position.x + displacementX, @position.y else @relayPointRatio = abs(displacementY) / (abs(displacementX) + abs(displacementY)) @relayPointPosition.set @position.x, @position.y + displacementY return update: -> if this.isMoving @currentMoveFrameCount++ @startPointRatio = @getStartPointRatio() @endPointRatio = @getEndPointRatio() if @startPointRatio < @relayPointRatio ratio = @startPointRatio / @relayPointRatio startPointX = @position.x + ratio * (@relayPointPosition.x - @position.x) startPointY = @position.y + ratio * (@relayPointPosition.y - @position.y) else ratio = (@startPointRatio - @relayPointRatio) / (1 - @relayPointRatio) startPointX = @relayPointPosition.x + ratio * (@targetPosition.x - @relayPointPosition.x) startPointY = @relayPointPosition.y + ratio * (@targetPosition.y - @relayPointPosition.y) @startPointPosition.set startPointX, startPointY if @endPointRatio < @relayPointRatio ratio = @endPointRatio / @relayPointRatio endPointX = @position.x + ratio * (@relayPointPosition.x - @position.x) endPointY = @position.y + ratio * (@relayPointPosition.y - @position.y) else ratio = (@endPointRatio - @relayPointRatio) / (1 - @relayPointRatio) endPointX = @relayPointPosition.x + ratio * (@targetPosition.x - @relayPointPosition.x) endPointY = @relayPointPosition.y + ratio * (@targetPosition.y - @relayPointPosition.y) @endPointPosition.set endPointX, endPointY if @currentMoveFrameCount >= @moveDurationFrameCount @position.set @targetPosition.x, @targetPosition.y this.isMoving = false return display: -> if this.isMoving strokeWeight @displaySize stroke @displayColor noFill() beginShape() vertex @startPointPosition.x, @startPointPosition.y vertex @relayPointPosition.x, @relayPointPosition.y if @startPointRatio < @relayPointRatio and @relayPointRatio < @endPointRatio vertex @endPointPosition.x, @endPointPosition.y endShape() else noStroke() fill @displayColor ellipse @position.x, @position.y, @displaySize, @displaySize return getMoveProgressRatio: -> min 1, @currentMoveFrameCount / @moveDurationFrameCount getStartPointRatio: -> -(@getMoveProgressRatio() - 1) ** 2 + 1 getEndPointRatio: -> -(@getMoveProgressRatio() - 1) ** 4 + 1 getDistance: (x, y) -> dist(x, y, @position.x, @position.y) createRandomDot = -> newDot = new Dot() newDot.position = createVector random(width), random(height) newDot.displaySize = 4 * width / 640 newDot.displayColor = createRandomColor 50, 100 return newDot createRandomColor = (saturationValue, brightnessValue) -> colorMode HSB newColor = color random(360), saturationValue, brightnessValue colorMode RGB return newColor # ---------- Methods for controlling dots ------------------------------------------ // processDots = (func, effectiveRadius, probability) -> for eachDot in dotArray continue if eachDot.isMoving continue unless Math.random() < probability func(eachDot, effectiveRadius) return awayFromMouse = (dot, effectiveRadius) -> return unless dot.getDistance(mouseX, mouseY) < effectiveRadius dot.setTarget random(width), random(height) return attractToMouse = (dot, effectiveRadius) -> distance = Math.random() * effectiveRadius angle = Math.random() * TWO_PI x = mouseX + distance * cos angle if x < 0 then x = -x else if x > width then x = width - (x - width) y = mouseY + distance * sin angle if y < 0 then y = -y else if y > height then y = height - (y - height) dot.setTarget x, y return # ---------- Setup & Draw ------------------------------------------ // setup = -> canvasSideLength = max(min(windowWidth, windowHeight) * 0.95, min(displayWidth, displayHeight) * 0.5) createCanvas canvasSideLength, canvasSideLength dotArray.push createRandomDot() for [0...150] effectiveRadius = 0.25 * width return draw = -> blendMode BLEND background 0, 0, 40 blendMode ADD for eachDot in dotArray eachDot.update() eachDot.display() if mouseIsPressed processDots(awayFromMouse, effectiveRadius, 1) processDots(attractToMouse, effectiveRadius, 0.001) else processDots(attractToMouse, effectiveRadius, 0.1) return keyPressed = -> if key == 'P' then noLoop() return keyReleased = -> if key == 'P' then `loop()` return */PK 4 iNu sketch677093/index.html
PK 4 iN0X S sketch677093/mySketch.jsPK 4 iNʮ | sketch677093/CoffeeScript.jsPK 4 iNu I2 sketch677093/index.htmlPK 3