diff options
Diffstat (limited to 'main.js')
| -rw-r--r-- | main.js | 123 |
1 files changed, 116 insertions, 7 deletions
@@ -11,6 +11,8 @@ var ctx = canvas.getContext("2d"); var particleSystem + var canvasBackground; + var that = { init:function(system){ // @@ -43,6 +45,29 @@ // ctx.fillStyle = "black" ctx.fillRect(0,0, canvas.width, canvas.height) + ctx.imageSmoothingEnabled = true; + + var drawBackground = function(densityOfPoints, maxSize, minSize) { + if (canvasBackground) { + ctx.putImageData(canvasBackground, 0, 0); + } else { + minSize = minSize || 1; + maxSize = maxSize || 3; + densityOfPoints = densityOfPoints || 0.01; + var numberOfPoints = densityOfPoints * canvas.width * canvas.height; + for (var i = 0; i < numberOfPoints; i++) { + var size = Math.random() * (maxSize - minSize) + minSize; + var opacity = Math.random() * 0.2 + 0.4; + ctx.fillStyle = 'rgba(220, 220, 255, ' + opacity + ')'; + ctx.beginPath(); + ctx.arc(Math.random() * canvas.width, Math.random() * canvas.height, size / 2, 0, 2 * Math.PI); + ctx.fill(); + } + canvasBackground = ctx.getImageData(0, 0, canvas.width, canvas.height); + } + } + + drawBackground(0.02); // JESTEM BOGIEM PRZEKSZTAŁCEŃ 2D :O var drawArrow = function(pt1, pt2, length, style) { @@ -158,34 +183,67 @@ } }) - var drawImage = function(image, coords) { + var drawImage = function(image, coords, color) { if (!image.height) { image.height = image.width ? image.width * image.naturalHeight / image.naturalWidth : image.naturalHeight; } if (!image.width) { image.width = image.height ? image.height * image.naturalWidth / image.naturalHeight : image.naturalWidth; } + ctx.save(); + var color = color || 'black'; + ctx.fillStyle = color; + ctx.lineWidth = 5; + ctx.beginPath(); + ctx.arc(coords.x, coords.y, image.width / 2, 0, Math.PI * 2); + ctx.clip(); ctx.drawImage(image, coords.x - image.width / 2, coords.y - image.height / 2, image.width, image.height); + ctx.fill(); + ctx.restore(); + ctx.lineWidth = 3; + ctx.strokeStyle = 'rgba(255,255,255,0.7)'; + ctx.beginPath(); + ctx.arc(coords.x, coords.y, image.width / 2, 0, Math.PI * 2); + ctx.stroke(); }; + var repositionBalloon = function(div, node) { + var topOffset = node.data.p.y - node.data.height / 2; + if (topOffset + div.outerHeight() > $(window).height()) { + topOffset = $(window).height() - div.outerHeight(); + } + var leftOffset = node.data.p.x + node.data.width / 2 + 2; + if (leftOffset + div.outerWidth() > $(window).width()) { + leftOffset -= div.outerWidth() + node.data.width + 4; + } + div.css('top', topOffset); + div.css('left', leftOffset); + div.show(); + } - particleSystem.eachNode(function(node, pt){ + var currentZIndex = 0; + var balloonNode = undefined; + var drawNode = function(node, pt){ // node: {mass:#, p:{x,y}, name:"", data:{}} // pt: {x:#, y:#} node position in screen coords + node.data.zindex = currentZIndex++; + if (node.data.image) { if (node.data.imageObject) { - drawImage(node.data.imageObject, pt); + node.data.imageObject.width = node.data.width; + node.data.imageObject.height = node.data.height; + drawImage(node.data.imageObject, pt, node.data.color); } else { var img = new Image(node.data.width, node.data.height); img.onload = function() { node.data.imageObject = img; - drawImage(node.data.imageObject, pt); + drawImage(node.data.imageObject, pt, node.data.color); }; img.src = '_img/' + node.data.image; } @@ -200,16 +258,67 @@ ctx.stroke(); ctx.fill(); } - }) + + if (node.data.balloon) { + node.data.p = pt; + repositionBalloon(node.data.balloon, node); + if (node.data.oldWidth) { + node.data.width = node.data.oldWidth; + } + if (node.data.oldHeight) { + node.data.height = node.data.oldHeight; + } + balloonNode = node; + } + }; + + particleSystem.eachNode(drawNode); + if (balloonNode) { + var selectedDimension = Math.max((balloonNode.data.image) ? 150 : 50, balloonNode.data.width); + balloonNode.data.oldWidth = balloonNode.data.width; + balloonNode.data.width = selectedDimension; + balloonNode.data.oldHeight = balloonNode.data.height; + balloonNode.data.height = selectedDimension; + drawNode(balloonNode, balloonNode.data.p); + } }, initMouseHandling:function(){ + var balloon; // start listening $(canvas).click(function(e) { + if (balloon) { + balloon.data('node').data.balloon = undefined; + balloon.remove(); + balloon = undefined; + } var pos = $(canvas).offset(); _mouseP = arbor.Point(e.pageX-pos.left, e.pageY-pos.top) - dragged = particleSystem.nearest(_mouseP); - console.log(dragged.node); + var candidateNode = undefined; + particleSystem.eachNode(function(node) { + var distance = _mouseP.subtract(particleSystem.toScreen(node.p)); + if (Math.sqrt(distance.x*distance.x + distance.y*distance.y) <= node.data.width / 2 + 3) { + if (!candidateNode || candidateNode.data.zindex < node.data.zindex) { + candidateNode = node; + } + } + }); + if (candidateNode) { + balloon = $('<div>'); + balloon.css({ + 'position': 'absolute', + 'background': 'rgba(0,0,0,0.8)', 'color': 'red', + 'max-width': '250px', + 'padding': '5px', + 'border': 'solid 2px white', + 'border-radius': '5px' + }); + balloon.append(JSON.stringify(candidateNode).replace(/,/g, ',<br />')); + balloon.hide(); + $('body').append(balloon); + balloon.data('node', candidateNode); + candidateNode.data.balloon = balloon; + } }); }, |