diff --git a/public/css/style.css b/public/css/style.css
index 14d06aa0ee07c3329c9fd5f5a8e8cc07dd007181..2cbb7d0b2e9661c10e849a391c146a7998d4bd99 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -27,6 +27,45 @@
flex: 4;
}
+.slidecontainer
+{
+ display: flex;
+ width: 100%; /* Width of the outside container */
+}
+.slider
+{
+ margin-top: 13px;
+ -webkit-appearance: none; /* Override default CSS styles */
+ appearance: none;
+ width: 80%; /* Full-width */
+ height: 25px; /* Specified height */
+ background: #d3d3d3; /* Grey background */
+ outline: none; /* Remove outline */
+ opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
+ -webkit-transition: .2s; /* 0.2 seconds transition on hover */
+ transition: opacity .2s;
+}
+.slider:hover
+{
+ opacity: 1; /* Fully shown on mouse-over */
+}
+.slider::-webkit-slider-thumb
+{
+ -webkit-appearance: none; /* Override default look */
+ appearance: none;
+ width: 25px; /* Set a specific slider handle width */
+ height: 25px; /* Slider handle height */
+ background: #4CAF50; /* Green background */
+ cursor: pointer; /* Cursor on hover */
+}
+.slider::-moz-range-thumb
+{
+ width: 25px; /* Set a specific slider handle width */
+ height: 25px; /* Slider handle height */
+ background: #4CAF50; /* Green background */
+ cursor: pointer; /* Cursor on hover */
+}
+
@font-face
{
@@ -183,8 +222,8 @@ strong
display: block;
text-align: center;
- min-width: 1200px;
- min-height: 800px;
+ min-width: 900px;
+ min-height: 600px;
background-color: black;
}
diff --git a/public/js/javascriptWindow.js b/public/js/javascriptWindow.js
index 4fd38d723685f703e478a93ea32d0e6151af64ab..47c1a94e4b40d7f0fe05d11146ca66b7cc045603 100644
--- a/public/js/javascriptWindow.js
+++ b/public/js/javascriptWindow.js
@@ -3,8 +3,10 @@
global attributes and variables
*/
var canvasContainer;
+var slider, output;
var gravity = 2;
+var bouncyness = 0.7;
var lifeTime = 500;
var endLife = 0.1;
var preEndLife = 0.3 + endLife;
@@ -17,6 +19,10 @@ function setup()
{
// p5js and other stuf
canvasContainer = document.getElementById('javascriptWindow');
+ slider = document.getElementById("bouncynessRange");
+ output = document.getElementById("bouncynessValue");
+ slider.oninput = function() { output.innerHTML = 0.01*this.value; }
+ output.innerHTML = 0.01*slider.value;
var myCanvas = createCanvas(canvasContainer.clientWidth, canvasContainer.clientHeight);
myCanvas.parent('javascriptWindow');
@@ -36,14 +42,13 @@ function windowResized()
{
resizeCanvas(canvasContainer.clientWidth, canvasContainer.clientHeight);
}
-function mousePressed()
+function mousePressed()
{
circleList.push({ x:mouseX, y:mouseY, r:random(10,50), vx:0, vy:0, life:lifeTime });
}
-
/*
- draw function called once per frame : 30 times by seconds
+ usefull
*/
var initialColor = {r:255.0, g:255.0, b:255.0, a:1.0};
var finalColor = {r:255.0, g:0.0, b:0.0, a:1.0};
@@ -58,77 +63,115 @@ function reflect(v, n)
if(p<0) p=0;
return {x : v.x - 2*p*n.x, y : v.y - 2*p*n.y};
}
-function draw()
+
+
+/*
+ updates
+*/
+function updatePositions()
{
- // Begin frame
- clear();
- background(200);
-
- //text("Hello friend !", width/2, height/2);
for (var i = 0; i < circleList.length; i++)
{
- // color
- var c = Object.assign({}, initialColor);
- if(circleList[i].life < endLife*lifeTime)
- {
- c = Object.assign({}, finalColor);
- c.a = 1.0*circleList[i].life / (endLife*lifeTime);
- }
- else if(circleList[i].life < preEndLife*lifeTime)
- {
- var t = (circleList[i].life - endLife*lifeTime)/((preEndLife-endLife)*lifeTime);
- c = lerp2(initialColor, finalColor, 1-t);
- }
- fill(c.r, c.g, c.b, c.a);
-
- // apply gravity
- if(circleList[i].y + circleList[i].vy + gravity < height - 0.5*circleList[i].r)
- {
- circleList[i].vy += gravity;
- circleList[i].y += circleList[i].vy;
- circleList[i].x += circleList[i].vx;
- }
- else
- {
- circleList[i].y = height - 0.5*circleList[i].r;
- circleList[i].vy = -0.7*circleList[i].vy;
- circleList[i].x += circleList[i].vx;
- }
-
- // draw particle
- ellipse(circleList[i].x, circleList[i].y, circleList[i].r, circleList[i].r);
-
- // collision
+ circleList[i].vy += gravity;
+ circleList[i].x += circleList[i].vx;
+ circleList[i].y += circleList[i].vy;
+ }
+}
+function updateCollision()
+{
+ for (var i = 0; i < circleList.length; i++)
for (var j = i+1; j < circleList.length; j++)
{
- var nx = 1.0*circleList[i].x - circleList[j].x;
- var ny = 1.0*circleList[i].y - circleList[j].y;
+ var nx = circleList[i].x - circleList[j].x;
+ var ny = circleList[i].y - circleList[j].y;
var d = 0.5*(circleList[i].r + circleList[j].r);
if(nx*nx + ny*ny < d*d && (circleList[i].vx*circleList[j].vx <= 0 || circleList[i].vy*circleList[j].vy <= 0)) // collision and directions are not the same
{
var nn = sqrt(nx*nx + ny*ny);
var v = reflect({x:circleList[i].vx, y:circleList[i].vy}, {x:-nx/nn, y:-ny/nn});
- circleList[i].vx = v.x;
- circleList[i].vy = v.y;
+ circleList[i].vx = bouncyness*v.x;
+ circleList[i].vy = bouncyness*v.y;
v = reflect({x:circleList[j].vx, y:circleList[j].vy}, {x:nx/nn, y:ny/nn});
- circleList[j].vx = v.x;
- circleList[j].vy = v.y;
+ circleList[j].vx = bouncyness*v.x;
+ circleList[j].vy = bouncyness*v.y;
//line(circleList[i].x, circleList[i].y, circleList[i].x + 5*circleList[i].vx, circleList[i].y + 5*circleList[i].vy);
//line(circleList[j].x, circleList[j].y, circleList[j].x + 5*circleList[j].vx, circleList[j].y + 5*circleList[j].vy);
//line(circleList[i].x, circleList[i].y, circleList[j].x, circleList[j].y);
}
}
+}
+function updateBoundaries()
+{
+ for (var i = 0; i < circleList.length; i++)
+ {
+ if(circleList[i].x + circleList[i].vx < 0.5*circleList[i].r)
+ {
+ circleList[i].x = 0.5*circleList[i].r;
+ circleList[i].vx = -bouncyness*circleList[i].vx;
+ }
+ else if(circleList[i].x + circleList[i].vx > width - 0.5*circleList[i].r)
+ {
+ circleList[i].x = width - 0.5*circleList[i].r;
+ circleList[i].vx = -bouncyness*circleList[i].vx;
+ }
-
-
- // reduce life
+ if(circleList[i].y + circleList[i].vy + gravity > height - 0.5*circleList[i].r)
+ {
+ circleList[i].y = height - 0.5*circleList[i].r;
+ circleList[i].vy = -bouncyness*circleList[i].vy;
+ }
+ }
+}
+function reduceLifeParticles()
+{
+ for (var i = 0; i < circleList.length; i++)
+ {
circleList[i].life--;
if(circleList[i].life <= 0)
{
circleList.shift();
}
}
+}
+
+
+/*
+ draw function called once per frame : 30 times by seconds
+*/
+function drawParticles()
+{
+ for (var i = 0; i < circleList.length; i++)
+ {
+ // color
+ var c = Object.assign({}, initialColor);
+ if(circleList[i].life < endLife*lifeTime)
+ {
+ c = Object.assign({}, finalColor);
+ c.a = circleList[i].life / (endLife*lifeTime);
+ }
+ else if(circleList[i].life < preEndLife*lifeTime)
+ {
+ var t = (circleList[i].life - endLife*lifeTime)/((preEndLife-endLife)*lifeTime);
+ c = lerp2(initialColor, finalColor, 1-t);
+ }
+ fill(c.r, c.g, c.b, c.a);
+ ellipse(circleList[i].x, circleList[i].y, circleList[i].r, circleList[i].r);
+ }
+}
+function draw()
+{
+ // Begin frame
+ clear();
+ background(200);
+
+ bouncyness = 0.01*slider.value;
+
+ updatePositions();
+ updateCollision();
+ updateBoundaries();
+ drawParticles();
+ reduceLifeParticles();
}
\ No newline at end of file
diff --git a/public/mainPage.html b/public/mainPage.html
index 3260068e35115de483a0bcf1346809a14060637c..fd66fcd13b34705ec0a64762796f80ea7c3bbefc 100644
--- a/public/mainPage.html
+++ b/public/mainPage.html
@@ -26,6 +26,11 @@
<h2>Page principale</h2>
<p>Votre espace de jeu : </p>
<div id="javascriptWindow"> </div>
+ <div class="slidecontainer">
+ <p>Bouncyness : </p>
+ <input type="range" min="0" max="100" value="50" class="slider" id="bouncynessRange">
+ <p><span id="bouncynessValue"></span></p>
+ </div>
</section>
</div>