canvas(id="myCanvas" resize)
View Compiled
html, body {
margin:0;
overflow: hidden;
padding:0;
width:100%;
height:100%;
}
#myCanvas[resize] {
height:100%;
width:100%;
background-color:#efefef;
}
View Compiled
paper.install(window);
window.onload = function() {
// Get a reference to the canvas object
// Create an empty project and a view for the canvas:
var canvas = document.getElementById('myCanvas');
paper.setup(canvas);
//END PROJECT SET UP;
var width, height, center;
var points = 5;
var smooth = true;
var mousePos = view.center / 2;
var pathHeight = mousePos.y;
var path = new Path.Circle({
center: view.center,
radius: 50,
strokeColor: 'black'
});
path.strokeWidth = 3;
path.stroke = 3;
var copy = path.clone();
copy.scale(1.5);
var text = new PointText({
point: view.center,
fillColor: 'black',
fontFamily: 'Courier New',
fontWeight: 'bold',
fontSize: 10,
justification: 'center'
});
var mousePos;
text.content = 'Francis Laguna- Driscoll';
view.onMouseMove = function(event) {
var eventX = event.point.x;
var eventY = event.point.y;
var centerX = view.center.x;
var centerY = view.center.y;
mousePos = event.point;
copy.position.x = event.point.x + (eventX - centerX) * 0.06;
copy.position.y = event.point.y + (eventY - centerY)* 0.1;
path.position = event.point;
}
text.onMouseEnter = function(event) {
text.fillcolor = "white"
}
text.onMouseLeave = function(event) {
// path.scale(1/4);
// copy.scale(1/4);
}
view.onFrame = function(event) {
// copy.scale(1.01);
// path.scale(1.01);
if (copy.area > 990000) {
// copy.remove();
// copy = path.clone();
// path.remove();
// path = new Path.Circle({center: view.center,radius: 120,strokeColor: 'black'});
}
// console.log(copy.area);
}
view.onResize= function(event) {
// Whenever the window is resized, recenter the path:
text.position = view.center;
}
// Draw the view now:
paper.view.draw();
}
This Pen doesn't use any external CSS resources.