Skip to content

Commit 9e24765

Browse files
BoisterousCoderBoisterousCoder
committed
Checkbox to Button
1 parent ca04403 commit 9e24765

File tree

2 files changed

+209
-194
lines changed

2 files changed

+209
-194
lines changed

‎JS/Start.js‎

Lines changed: 156 additions & 142 deletions
Original file line numberDiff line numberDiff line change
@@ -41,168 +41,182 @@ var roundedTempLeft;
4141
var roundedTempRight;
4242

4343
$(function(){
44-
var canvas = document.getElementById('mainCanvas');
45-
var c = canvas.getContext('2d');
46-
ctx = c;
47-
printInputs();
48-
init(c);
49-
refreshSize();
44+
var canvas = document.getElementById('mainCanvas');
45+
var c = canvas.getContext('2d');
46+
ctx = c;
47+
printInputs();
48+
init(c);
49+
refreshSize();
5050
});
5151

5252
function resetLoop(){
53-
//allowCrossOver = false;
54-
if(allowCrossOver){
55-
$('[type=checkbox]').click();
56-
}
57-
stopwatchTime = 0;
58-
$('#time').html(0);
59-
clearInterval(gameLoop);
60-
init(ctx);
53+
//allowCrossOver = false;
54+
if(allowCrossOver){
55+
$('[type=checkbox]').click();
56+
}
57+
stopwatchTime = 0;
58+
$('#time').html(0);
59+
clearInterval(gameLoop);
60+
init(ctx);
6161
}
6262

6363
function init(c) {
64-
var particlesLeft = [];
65-
var particlesRight = [];
66-
67-
//premake particle obj
68-
for (let i = 0; i < numberOfParticlesLeft; i++) {
69-
let initForce = new Point(0, 0);
70-
initForce.r = initTempLeft;
71-
initForce.deg = i * (360 / numberOfParticlesLeft);
72-
let initPoint = getPointOnCircle(((2 * numberOfParticlesLeft - 1) * particleRadius - 1) / (2 * Math.PI), i * (1 / numberOfParticlesLeft))
73-
initPoint.x += 50;
74-
initPoint.y += 50;
75-
76-
makeParticle(initPoint, particleRadius, particleMass, initForce, particlesLeft);
77-
}
78-
79-
for (let i = 0; i < numberOfParticlesRight; i++) {
80-
let initForce = new Point(0, 0);
81-
initForce.r = initTempRight;
82-
initForce.deg = i * (360 / numberOfParticlesRight);
83-
let initPoint = getPointOnCircle(((2 * numberOfParticlesRight - 1) * particleRadius - 1) / (2 * Math.PI), i * (1 / numberOfParticlesRight))
84-
initPoint.x += 151;
85-
initPoint.y += 50;
86-
87-
makeParticle(initPoint, particleRadius, particleMass, initForce, particlesRight);
88-
}
89-
90-
//initArrowKeys();
91-
92-
//start loop
93-
gameLoop = setInterval(makeMainLoop(particlesLeft, particlesRight, 100), 1000 / fps);
64+
var particlesLeft = [];
65+
var particlesRight = [];
66+
67+
//premake particle obj
68+
for (let i = 0; i < numberOfParticlesLeft; i++) {
69+
let initForce = new Point(0, 0);
70+
initForce.r = initTempLeft;
71+
initForce.deg = i * (360 / numberOfParticlesLeft);
72+
let initPoint = getPointOnCircle(((2 * numberOfParticlesLeft - 1) * particleRadius - 1) / (2 * Math.PI), i * (1 / numberOfParticlesLeft))
73+
initPoint.x += 50;
74+
initPoint.y += 50;
75+
76+
makeParticle(initPoint, particleRadius, particleMass, initForce, particlesLeft);
77+
}
78+
79+
for (let i = 0; i < numberOfParticlesRight; i++) {
80+
let initForce = new Point(0, 0);
81+
initForce.r = initTempRight;
82+
initForce.deg = i * (360 / numberOfParticlesRight);
83+
let initPoint = getPointOnCircle(((2 * numberOfParticlesRight - 1) * particleRadius - 1) / (2 * Math.PI), i * (1 / numberOfParticlesRight))
84+
initPoint.x += 151;
85+
initPoint.y += 50;
86+
87+
makeParticle(initPoint, particleRadius, particleMass, initForce, particlesRight);
88+
}
89+
90+
//initArrowKeys();
91+
92+
//start loop
93+
gameLoop = setInterval(makeMainLoop(particlesLeft, particlesRight, 100), 1000 / fps);
9494
}
9595
window.onresize = refreshSize;
9696

97+
function toggleBarrier(){
98+
let $button = $('#barrierButton');
99+
$button.toggleClass('on');
100+
allowCrossOver = $button.hasClass('on');
101+
setBarrierButtonText();
102+
}
103+
104+
function setBarrierButtonText(){
105+
if(allowCrossOver){
106+
$('#barrierButton').text("Add Barrier");
107+
}else{
108+
$('#barrierButton').text("Remove Barrier");
109+
}
110+
}
111+
97112
function makeParticle(initPoint, radius, mass, initForce, list) {
98-
var particle = new Point(initPoint.x, initPoint.y);
99-
particle.vel = new Point(0, 0);
100-
particle.mass = mass;
101-
particle.radius = radius;
102-
particle.applyForce = function (force) {
103-
accelleration = force.scale(1 / particle.mass);
104-
particle.vel.x += accelleration.x;
105-
particle.vel.y += accelleration.y;
106-
}
107-
particle.applyForce(initForce);
108-
list.push(particle);
113+
var particle = new Point(initPoint.x, initPoint.y);
114+
particle.vel = new Point(0, 0);
115+
particle.mass = mass;
116+
particle.radius = radius;
117+
particle.applyForce = function (force) {
118+
accelleration = force.scale(1 / particle.mass);
119+
particle.vel.x += accelleration.x;
120+
particle.vel.y += accelleration.y;
121+
}
122+
particle.applyForce(initForce);
123+
list.push(particle);
109124
}
110125

111126
function printInputs() {
112-
settingContainers = $('.setting');
113-
settingContainers.each(function (i, settingContainer) {
114-
var settingContainer = $(settingContainer);
115-
var type = settingContainer.attr('type');
116-
var varName = settingContainer.attr('var');
117-
118-
var settingInput = $('<input/>');
119-
settingInput.attr('type', type);
120-
if (type == 'range') {
121-
var max = settingContainer.attr('max');
122-
var min = settingContainer.attr('min');
123-
settingInput.attr('max', max);
124-
settingInput.attr('min', min);
125-
}
126-
127-
settingInput.change(function () {
128-
var self = $(this);
129-
var cont = self.parent();
130-
var varName = cont.attr('var');
131-
var value;
132-
if (self.attr('type') == 'checkbox') {
133-
value = self.prop('checked');
134-
} else {
135-
value = self.val();
136-
}
137-
if (self.attr('type') == 'range') {
138-
value = Number(value);
139-
}
140-
window[varName] = value;
141-
});
142-
143-
let alias = settingContainer.attr('alias');
144-
settingContainer.append(alias + ': ');
145-
settingContainer.append(settingInput);
146-
var initValue = window[varName];
147-
if (settingInput.attr('type') == 'range') {
148-
settingContainer.append('<p>'+initValue+'</p>');
149-
}
150-
if (settingInput.attr('type') == 'checkbox') {
151-
settingInput.attr('checked', initValue);
152-
} else {
153-
settingInput.val(initValue);
154-
}
155-
if(settingInput.attr('type')=='range'){
156-
settingContainer.append($('<button class="adder">+</buttom>'));
157-
settingContainer.append($('<button class="subtractor">-</buttom>'));
158-
}
159-
});
160-
$('[type="range"]').change(function(e){
161-
let target = $(this);
162-
target.parent().children('p').html(target.val())
163-
});
164-
$('.adder').click(function(e){
165-
let target = $(this);
166-
let varName = target.parent().attr('var');
167-
let value = window[varName];
168-
value++;
169-
window[varName] = value;
170-
target.parent().children('input').val(value);
171-
target.parent().children('p').html(value);
172-
});
173-
$('.subtractor').click(function(e){
174-
let target = $(this);
175-
let varName = target.parent().attr('var');
176-
let value = window[varName];
177-
value--;
178-
window[varName] = value;
179-
target.parent().children('input').val(value);
180-
target.parent().children('p').html(value);
181-
});
182-
//Clock is http://flipclockjs.com/
183-
127+
setBarrierButtonText();
128+
settingContainers = $('.setting');
129+
settingContainers.each(function (i, settingContainer) {
130+
var settingContainer = $(settingContainer);
131+
var type = settingContainer.attr('type');
132+
var varName = settingContainer.attr('var');
133+
134+
var settingInput = $('<input/>');
135+
settingInput.attr('type', type);
136+
if (type == 'range') {
137+
var max = settingContainer.attr('max');
138+
var min = settingContainer.attr('min');
139+
settingInput.attr('max', max);
140+
settingInput.attr('min', min);
141+
}
142+
143+
settingInput.change(function () {
144+
var self = $(this);
145+
var cont = self.parent();
146+
var varName = cont.attr('var');
147+
var value;
148+
if (self.attr('type') == 'checkbox') {
149+
value = self.prop('checked');
150+
} else {
151+
value = self.val();
152+
}
153+
if (self.attr('type') == 'range') {
154+
value = Number(value);
155+
}
156+
window[varName] = value;
157+
});
158+
159+
let alias = settingContainer.attr('alias');
160+
settingContainer.append(alias + ': ');
161+
settingContainer.append(settingInput);
162+
var initValue = window[varName];
163+
if (settingInput.attr('type') == 'range') {
164+
settingContainer.append('<p>'+initValue+'</p>');
165+
}
166+
if (settingInput.attr('type') == 'checkbox') {
167+
settingInput.attr('checked', initValue);
168+
} else {
169+
settingInput.val(initValue);
170+
}
171+
if(settingInput.attr('type')=='range'){
172+
settingContainer.append($('<button class="adder">+</buttom>'));
173+
settingContainer.append($('<button class="subtractor">-</buttom>'));
174+
}
175+
});
176+
$('[type="range"]').change(function(e){
177+
let target = $(this);
178+
target.parent().children('p').html(target.val())
179+
});
180+
$('.adder').click(function(e){
181+
let target = $(this);
182+
let varName = target.parent().attr('var');
183+
let value = window[varName];
184+
value++;
185+
window[varName] = value;
186+
target.parent().children('input').val(value);
187+
target.parent().children('p').html(value);
188+
});
189+
$('.subtractor').click(function(e){
190+
let target = $(this);
191+
let varName = target.parent().attr('var');
192+
let value = window[varName];
193+
value--;
194+
window[varName] = value;
195+
target.parent().children('input').val(value);
196+
target.parent().children('p').html(value);
197+
});
184198
}
185199

186200
function setStopwatch(){
187-
if(!allowCrossOver){
188-
isStopwatchRunning = true;
189-
}else{
190-
isStopwatchRunning = false;
191-
}
201+
if(!allowCrossOver){
202+
isStopwatchRunning = true;
203+
}else{
204+
isStopwatchRunning = false;
205+
}
192206
}
193207

194208
function refreshSize() {
195-
ctx.canvas.width = window.innerWidth*canvasSize;
196-
ctx.canvas.height = window.innerWidth*canvasSize / canvasRatio;
197-
$('#canvasContainer').css('width', ctx.canvas.width);
198-
$('#canvasContainer label').css('width', ctx.canvas.width/2.1);
199-
$('#canvasContainer label').css('display', 'inline-block');
200-
$('#canvasContainer label').css('text-align', 'center');
209+
ctx.canvas.width = window.innerWidth*canvasSize;
210+
ctx.canvas.height = window.innerWidth*canvasSize / canvasRatio;
211+
$('#canvasContainer').css('width', ctx.canvas.width);
212+
$('#canvasContainer label').css('width', ctx.canvas.width/2.1);
213+
$('#canvasContainer label').css('display', 'inline-block');
214+
$('#canvasContainer label').css('text-align', 'center');
201215
}
202216

203217
function getPointOnCircle(radius, time) {
204-
var point = new Point(1, 1);
205-
point.r = radius;
206-
point.rad = 2 * Math.PI * time
207-
return point;
218+
var point = new Point(1, 1);
219+
point.r = radius;
220+
point.rad = 2 * Math.PI * time
221+
return point;
208222
}

0 commit comments

Comments
 (0)