Skip to content

Commit 06c33e8

Browse files
author
yoyomyo
committed
interaction with points
0 parents  commit 06c33e8

File tree

8 files changed

+1349
-0
lines changed

8 files changed

+1349
-0
lines changed

‎bootstrap/css/bootstrap-responsive.css

Lines changed: 1109 additions & 0 deletions
Large diffs are not rendered by default.

‎bootstrap/css/bootstrap.min.css

Lines changed: 7 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎curves.js

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
curve.types = {
2+
STRAIGHT_LINE : 0,
3+
BEZIER : 1,
4+
B_SPLINE : 2
5+
}
6+
7+
function curve(){
8+
9+
//a bunch of control points
10+
this.cPoints = [];
11+
this.lPoints = [];
12+
this.curveType = 0; //default to staight line
13+
this.isActive = false;
14+
}
15+
16+
17+
//to be implemented by subclasses
18+
curve.prototype.addPoints = function(pt){
19+
if(!this.isActive){
20+
this.cPoints.push(pt);
21+
}
22+
}
23+
24+
curve.prototype.draw = function(levelOfDetail){
25+
console.log(cPoints);
26+
if (!cPoints.empty()) {
27+
connectTheDots();
28+
drawNormals();
29+
}
30+
}
31+
32+
curve.prototype.moveActivePoints = function(){
33+
34+
}
35+
36+
curve.prototype.updateActivePoints = function(newPos){
37+
38+
}
39+
40+
//curve
41+
curve.prototype.connectTheDots = function(ctx){
42+
for(var i = 0; i<cPoints.length; i++){
43+
44+
}
45+
}
46+
47+
curve.prototype.drawLine = function(ctx, pt1, pt2){
48+
49+
}
50+
51+
curve.prototype.drawNormals = function(){
52+
53+
}

‎d3.v3.min.js

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
3+
4+
<title>Bezier</title>
5+
<head>
6+
<meta charset="utf-8">
7+
8+
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
9+
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-responsive.css">
10+
<link rel="stylesheet" type="text/css" href="style.css">
11+
12+
</head>
13+
<body>
14+
15+
<div class="container-fluid">
16+
<div class="row-fluid">
17+
<div class="span3">
18+
<div class="sidebar-nav">
19+
<ul class="nav nav-list">
20+
</ul>
21+
</div><!--/.well -->
22+
</div><!--/span-->
23+
<div class="span9" id="main">
24+
<div class="row">
25+
<h1>Bezier!</h1>
26+
<canvas id="canvas"></canvas>
27+
</div>
28+
</div>
29+
</div>
30+
</div>
31+
32+
<body>
33+
34+
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
35+
<script src="point.js"></script>
36+
<script src="curves.js"></script>
37+
<script src="script.js"></script>

‎point.js

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
//point class
2+
3+
POINT_RADIUS = 8;
4+
5+
function Point(x,y){
6+
this.x = x;
7+
this.y = y;
8+
this.active = false;
9+
10+
}
11+
12+
Point.prototype.draw = function(ctx){
13+
ctx.beginPath();
14+
ctx.arc(this.x,this.y,POINT_RADIUS,0,2*Math.PI);
15+
ctx.stroke();
16+
17+
if(this.active){
18+
ctx.fillStyle = 'black';
19+
ctx.fill();
20+
}
21+
}
22+
23+
Point.prototype.equal = function(pt){
24+
return Math.abs(this.x - pt.x) < POINT_RADIUS && Math.abs(this.y - pt.y) < POINT_RADIUS;
25+
}

‎script.js

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
var points = [];
2+
var selected = null;
3+
var dragged = false;
4+
5+
var canvas=document.getElementById("canvas");
6+
canvas.width = 640;
7+
canvas.height = 480;
8+
var ctx=canvas.getContext("2d");
9+
var rect = canvas.getBoundingClientRect();
10+
canvas.addEventListener('click', onMouseClick);
11+
canvas.addEventListener('mousedown', onMouseDown);
12+
canvas.addEventListener('mouseup', onMouseUp);
13+
canvas.addEventListener('mousemove', onMouseMove);
14+
15+
function getMousePos(e){
16+
var x = e.pageX - canvas.offsetLeft;
17+
var y = e.pageY - canvas.offsetTop;
18+
return new Point(x,y);
19+
}
20+
function onMouseClick(e){
21+
22+
var p = getMousePos(e);
23+
var addPoint = true;
24+
for(var i in points){
25+
if(points[i].equal(p)){
26+
points[i].active = true;
27+
addPoint = false;
28+
}else{
29+
points[i].active = false;
30+
}
31+
}
32+
if(addPoint){
33+
p.active = true;
34+
points.push(p)
35+
};
36+
redraw();
37+
38+
}
39+
40+
function onMouseDown(e){
41+
dragged = true;
42+
//console.log('mousedown')
43+
var pos = getMousePos(e);
44+
for(var i in points){
45+
if(points[i].equal(pos)){
46+
points[i].active = true;
47+
selected = points[i];
48+
}else{
49+
points[i].active = false;
50+
}
51+
}
52+
}
53+
54+
function onMouseMove(e){
55+
if (!dragged) {
56+
return;
57+
}
58+
p = getMousePos(e);
59+
selected.x = p.x;
60+
selected.y = p.y;
61+
redraw();
62+
}
63+
64+
function onMouseUp(e){
65+
dragged = false;
66+
}
67+
68+
function redraw(){
69+
ctx.clear("#FFF");
70+
for(var i in points){
71+
points[i].draw(ctx);
72+
}
73+
}
74+
75+
ctx.clear = function(fillColor) {
76+
ctx.fillStyle = fillColor;
77+
console.log(rect);
78+
ctx.fillRect(0,0,rect.width, rect.height);
79+
};

‎style.css

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
h1 {
2+
font-family: "Helvetica Neue", Helvetica, sans-serif;
3+
font-size: 64px;
4+
font-weight: 300;
5+
letter-spacing: -2px;
6+
}
7+
8+
.sidebar-nav {
9+
margin-left:100px;
10+
margin-top: 115px;
11+
}
12+
13+
.sidebar-nav label{
14+
font-weight: normal;
15+
}
16+
17+
.sidebar-nav .nav-header{
18+
font-weight: bold;
19+
}
20+
21+
@media (max-width: 980px) {
22+
/* Enable use of floated navbar text */
23+
.navbar-text.pull-right {
24+
float: none;
25+
padding-left: 5px;
26+
padding-right: 5px;
27+
}
28+
}
29+
30+
31+
/*canvas*/
32+
#canvas {
33+
border: solid #eee;
34+
}

0 commit comments

Comments
 (0)