Skip to content

Commit f196f5f

Browse files
ianmunrobotianmunrobot
committed
refactored canvas to js scope
added Paper elements to global scope
1 parent 123b9db commit f196f5f

File tree

6 files changed

+348
-14
lines changed

6 files changed

+348
-14
lines changed

‎app/background.js‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
2+
// The amount of circles we want to make:
3+
var count = 100;
4+
5+
// Space Circle Path:
6+
var circlePath = new Path.Circle({
7+
center: [0, 0],
8+
radius: 10,
9+
fillColor: 'white',
10+
strokeColor: 'white',
11+
});
12+
13+
var symbol = new Symbol(circlePath);
14+
15+
// Place the instances of the symbol:
16+
for (var i = 0; i < count; i++) {
17+
// The center position is a random point in the view:
18+
var center = Point.random() * view.size;
19+
var placedSymbol = symbol.place(center);
20+
// symbol.fillColor.hue += (Math.random() * 8)
21+
placedSymbol.scale(i / count);
22+
placedSymbol.direction = 2 * Math.PI * Math.random()
23+
}
24+
25+
// The onFrame function is called up to 60 times a second:
26+
function onFrame(event) {
27+
// Run through the active layer's children list and change
28+
// the position of the placed symbols:
29+
for (var i = 0; i < count; i++) {
30+
var item = project.activeLayer.children[i];
31+
32+
// Move the item 1/20th of its width. This way
33+
// larger circles move faster than smaller circles:
34+
var speed = item.bounds.width / 30;
35+
item.position.x += Math.cos(item.direction) * speed;
36+
item.position.y += Math.sin(item.direction) * speed;
37+
38+
// If the item has the view, move it back
39+
if (item.bounds.left > view.size.width) {
40+
item.position.x = item.bounds.width;
41+
}
42+
if (item.bounds.right < 0) {
43+
item.position.x = view.size.width
44+
}
45+
if (item.bounds.bottom < 0) {
46+
item.position.y = view.size.height
47+
}
48+
if (item.bounds.top > view.size.height) {
49+
item.position.y = 0
50+
}
51+
}
52+
}
53+
54+
55+
tool.minDistance = 1;
56+
tool.maxDistance = 45;
57+
58+
var paths = {}
59+
60+
function onMouseDown(event) {
61+
var outEvent = {
62+
id: socket.id,
63+
x: event.point.x,
64+
y: event.point.y,
65+
// point: event.point,
66+
}
67+
socket.emit('mouseDown', outEvent);
68+
}
69+
70+
socket.on('mouseDown', function(event) {
71+
// console.log(event);
72+
var path = new Path();
73+
path.fillColor = {
74+
hue: Math.random() * 360,
75+
saturation: 1,
76+
brightness: 1
77+
};
78+
path.add(new Point(event.x, event.y));
79+
if (!paths[event.id]) {
80+
paths[event.id] = {
81+
past: []
82+
}
83+
}
84+
paths[event.id].currentPath = path;
85+
})
86+
87+
function onMouseDrag(event) {
88+
var outEvent = {
89+
id: socket.id,
90+
x: event.point.x,
91+
y: event.point.y,
92+
delta: event.delta,
93+
middlePoint: event.middlePoint,
94+
}
95+
socket.emit('mouseDrag', outEvent)
96+
}
97+
98+
socket.on('mouseDrag', function(event) {
99+
var middlePoint = new Point(event.middlePoint[1], event.middlePoint[2])
100+
var step = new Point(event.delta[1], event.delta[2]) / 2;
101+
step.angle += 90;
102+
103+
var top = middlePoint + step;
104+
var bottom = middlePoint - step;
105+
106+
var currentPath = paths[event.id].currentPath;
107+
108+
currentPath.add(top);
109+
currentPath.insert(0, bottom);
110+
currentPath.smooth();
111+
112+
})
113+
114+
function onMouseUp(event) {
115+
var outEvent = {
116+
id: socket.id,
117+
x: event.point.x,
118+
y: event.point.y,
119+
}
120+
121+
socket.emit('mouseUp', outEvent)
122+
}
123+
124+
socket.on('mouseUp', function(event) {
125+
var current = paths[event.id].currentPath;
126+
current.add(new Point(event.x, event.y));
127+
current.closed = true;
128+
current.smooth();
129+
paths[event.id].past.push(current)
130+
timedRemove(current, event.id)
131+
delete paths[event.id].currentPath
132+
})
133+
134+
135+
var timedRemove = function(pathToRemove, id) {
136+
var alpha = 1.0
137+
var fadeOut = window.setInterval(function() {
138+
if (alpha === 0) {
139+
window.clearInterval(fadeOut)
140+
pathToRemove.remove()
141+
paths[id].past.unshift()
142+
} else {
143+
pathToRemove.fillColor.alpha -= 0.05
144+
}
145+
}, 50)
146+
}
147+

‎app/index.js‎

Lines changed: 183 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
const Tone = require('tone')
2-
const EventEmitter = require('./event-emitter')
2+
// const EventEmitter = require('./event-emitter')
33

4-
const drums = require('./basic-beat')
4+
const canvas = document.getElementById('paperCanvas');
5+
paper.setup(canvas);
6+
paper.install(window);
7+
8+
// const drums = require('./basic-beat')
59

610
var socket = io(window.location.origin)
711
let room = window.location.pathname.slice(1);
@@ -73,3 +77,180 @@ socket.on('mouseDrag', (event) => {
7377
socket.on('mouseUp', (event) => {
7478
release(event.id)
7579
})
80+
81+
82+
// The amount of circles we want to make:
83+
var count = 100;
84+
85+
86+
// Space Circle Path:
87+
var circlePath = new Path.Circle({
88+
center: [0, 0],
89+
radius: 10,
90+
fillColor: 'white',
91+
strokeColor: 'white',
92+
});
93+
94+
var symbol = new Symbol(circlePath);
95+
96+
// Place the instances of the symbol:
97+
for (var i = 0; i < count; i++) {
98+
// The center position is a random point in the view:
99+
var center = new Point((Math.random() * view.size.width), Math.random() * view.size.height);
100+
var placedSymbol = symbol.place(center);
101+
// symbol.fillColor.hue += (Math.random() * 8)
102+
placedSymbol.scale(i / count);
103+
placedSymbol.direction = 2 * Math.PI * Math.random()
104+
}
105+
106+
// The onFrame function is called up to 60 times a second:
107+
view.onFrame = (event) => {
108+
// Run through the active layer's children list and change
109+
// the position of the placed symbols:
110+
for (var i = 0; i < count; i++) {
111+
var item = project.activeLayer.children[i];
112+
113+
// Move the item 1/20th of its width. This way
114+
// larger circles move faster than smaller circles:
115+
var speed = item.bounds.width / 30;
116+
item.position.x += Math.cos(item.direction) * speed;
117+
item.position.y += Math.sin(item.direction) * speed;
118+
119+
// If the item has the view, move it back
120+
if (item.bounds.left > view.size.width) {
121+
item.position.x = item.bounds.width;
122+
}
123+
if (item.bounds.right < 0) {
124+
item.position.x = view.size.width
125+
}
126+
if (item.bounds.bottom < 0) {
127+
item.position.y = view.size.height
128+
}
129+
if (item.bounds.top > view.size.height) {
130+
item.position.y = 0
131+
}
132+
}
133+
}
134+
135+
var tool = new Tool()
136+
tool.minDistance = 1;
137+
tool.maxDistance = 45;
138+
139+
var paths = {}
140+
141+
tool.onMouseDown = (event) => {
142+
var outEvent = {
143+
id: socket.id,
144+
x: event.point.x,
145+
y: event.point.y,
146+
}
147+
socket.emit('mouseDown', outEvent);
148+
}
149+
150+
// create drawing paths
151+
socket.on('mouseDown', function(event) {
152+
// console.log(event);
153+
var shadow = new Path();
154+
var path = new Path();
155+
path.fillColor = {
156+
hue: Math.random() * 360,
157+
saturation: 1,
158+
brightness: 1,
159+
};
160+
shadow.fillColor = {
161+
hue: path.fillColor.hue,
162+
saturation: 0.5,
163+
brightness: 0.8,
164+
};
165+
path.add(new Point(event.x, event.y));
166+
shadow.add(new Point(event.x, event.y));
167+
if (!paths[event.id]) {
168+
paths[event.id] = {
169+
past: []
170+
}
171+
}
172+
paths[event.id].currentPath = {
173+
path: path,
174+
shadow: shadow
175+
};
176+
})
177+
178+
tool.onMouseDrag = (event) => {
179+
var outEvent = {
180+
id: socket.id,
181+
x: event.point.x,
182+
y: event.point.y,
183+
delta: event.delta,
184+
middlePoint: event.middlePoint,
185+
}
186+
socket.emit('mouseDrag', outEvent)
187+
}
188+
189+
socket.on('mouseDrag', function(event) {
190+
var middlePoint = new Point(event.middlePoint[1], event.middlePoint[2])
191+
var step = new Point(event.delta[1] / 2, event.delta[2] / 2)
192+
step.angle += 90;
193+
194+
// add new paths
195+
var top = new Point(middlePoint.x + step.x, middlePoint.y + step.y)
196+
var bottom = new Point(middlePoint.x - step.x, middlePoint.y - step.y)
197+
198+
// shadow paths
199+
var shadowTop = new Point(middlePoint.x + (step.x * 1.5), middlePoint.y + (step.y * 2))
200+
var shadowBottom = new Point(middlePoint.x - (step.x * 1.5), middlePoint.y - (step.y * 2))
201+
202+
var currentPath = paths[event.id].currentPath;
203+
currentPath.path.add(top);
204+
currentPath.path.insert(0, bottom);
205+
currentPath.path.smooth();
206+
207+
currentPath.shadow.add(shadowTop);
208+
currentPath.shadow.insert(0, shadowBottom);
209+
currentPath.shadow.smooth();
210+
211+
})
212+
213+
tool.onMouseUp =(event) => {
214+
var outEvent = {
215+
id: socket.id,
216+
x: event.point.x,
217+
y: event.point.y,
218+
}
219+
220+
socket.emit('mouseUp', outEvent)
221+
}
222+
223+
socket.on('mouseUp', function(event) {
224+
var current = paths[event.id].currentPath.path;
225+
var shadow = paths[event.id].currentPath.shadow;
226+
current.add(new Point(event.x, event.y));
227+
shadow.add(new Point(event.x, event.y));
228+
229+
current.closed = true;
230+
shadow.closed = true;
231+
232+
current.smooth();
233+
shadow.smooth();
234+
235+
paths[event.id].past.push(current)
236+
paths[event.id].past.push(shadow)
237+
238+
timedRemove(current, event.id)
239+
timedRemove(shadow, event.id)
240+
delete paths[event.id].currentPath
241+
})
242+
243+
244+
var timedRemove = function(pathToRemove, id) {
245+
var alpha = 1.0
246+
var fadeOut = window.setInterval(function() {
247+
if (alpha === 0) {
248+
window.clearInterval(fadeOut)
249+
pathToRemove.remove()
250+
paths[id].past.unshift()
251+
} else {
252+
pathToRemove.fillColor.alpha -= 0.05
253+
}
254+
}, 50)
255+
}
256+

‎index.html‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,13 @@
99
<link rel="stylesheet" type="text/css" href="css/style.css">
1010
<script type="text/javascript" src="socket/socket.io.js"></script>
1111
<script type="text/javascript" src="paper/paper-full.js"></script>
12-
<script type="text/paperscript" src="js/ui.js" canvas="paperCanvas"></script>
12+
<script type="text/javascript" src="startaudiocontext/StartAudioContext.js"></script>
13+
<!--<script type="text/paperscript" src="js/ui.js" canvas="paperCanvas"></script>-->
1314
</head>
1415
<body>
15-
<canvas id="paperCanvas" resize="true"></canvas>
16+
<div id="test">
17+
<canvas id="paperCanvas" resize="true"></canvas>
18+
</div>
1619
<script type="text/javascript" src="js/bundle.js" charset="utf-8"></script>
1720
</body>
1821
</html>

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
"scripts": {
77
"test": "echo \"Error: no test specified\" && exit 1",
88
"build-watch": "webpack -w",
9+
"build": "webpack",
910
"start": "nodemon server/index.js"
1011
},
1112
"author": "ian munro",

0 commit comments

Comments
 (0)