tfl/YTDJ
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added a footer; Added ability to export P5JS result to SVG; Replaced P5JS background by static SVG

Browse Source
This commit is contained in:
TFLCL
2022-07-06 14:09:43 +02:00
parent 6079619a8f
commit abc6095610
8 changed files with 2604 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
css/main.css
View File

@@ -9,7 +9,6 @@
html { html {
background-color: var(--bg-color);
color: var(--text-color); color: var(--text-color);
font-size: 1em; font-size: 1em;
line-height: 1.4; line-height: 1.4;
@@ -62,11 +61,23 @@ html {
} }
#bg { #bg {
z-index: -1; z-index: -2;
overflow: hidden; overflow: hidden;
position: fixed; position: fixed;
min-width: 100%;
min-height: 100%;
background: rgb(34,34,51);
background: linear-gradient(180deg, rgba(34,34,51,1) 0%, rgba(34,34,51,1) 70%, rgba(171, 92, 102,1) 120%);
} }
#bg img {
z-index: -1;
position: fixed;
/* max-width: 100%;
max-height: 100%; */
}
#desk { #desk {
/* display: none; */ /* display: none; */
display: flex; display: flex;
@@ -285,6 +296,15 @@ input[type=range]#crossfader::-ms-thumb {
/*Needed to keep the Edge thumb centred*/ /*Needed to keep the Edge thumb centred*/
} }
.footer a, .footer a:visited {
color: var(--text-color);
text-decoration: none;
}
.footer span {
cursor: pointer;
}
/* ========================================================================== /* ==========================================================================
Helper classes Helper classes
========================================================================== */ ========================================================================== */

1
img/stars_1920x1080.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 78 KiB

1
img/stars_2560x1440.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 118 KiB

15
index.html
View File

@@ -24,7 +24,9 @@
<body> <body>
<div id="bg"></div> <div id="bg">
<img src="img/stars_1920x1080.svg" alt="A night sky with plenty of stars">
</div>
<div id="desk"> <div id="desk">
<div id="players"> <div id="players">
@@ -68,16 +70,21 @@
<input type="url" name="url-player-B" id="url_B" placeholder="https://www.youtube.com/watch?v=...." pattern="https://.*" size="40"> <input type="url" name="url-player-B" id="url_B" placeholder="https://www.youtube.com/watch?v=...." pattern="https://.*" size="40">
</div> </div>
</div> --> </div> -->
<h1>YTDJ!</h1> <h1>Mix like a pro youtube DJ!</h1>
<div class="footer">
<p><span id='shooting-stars-enable'></span>by <a href="https://tflcl.xyz">tflcl.xyz</a> </p>
</div>
</div> </div>
<script async defer data-website-id="8db8311f-63a6-47d5-a77f-7d9b80db22b1" src="https://stats.tflcl.xyz/sucre.js"></script> <script async defer data-website-id="8db8311f-63a6-47d5-a77f-7d9b80db22b1" src="https://stats.tflcl.xyz/sucre.js"></script>
<script src="js/vendor/modernizr-3.11.2.min.js"></script> <script src="js/vendor/modernizr-3.11.2.min.js"></script>
<script src="./js/vendor/p5.js"></script> <!-- <script src="./js/vendor/p5.js"></script>
<script src="./js/vendor/p5.svg.js"></script>
<script src="js/sketch.js"></script> -->
<script src="js/main.js"></script> <script src="js/main.js"></script>
<script src="js/sketch.js"></script>
</body> </body>

17
js/main.js
View File

@@ -201,3 +201,20 @@ function componentToHex(c) {
} }
// Thumbnails: https://i1.ytimg.com/vi/{trackID}/mqdefault.jpg // Thumbnails: https://i1.ytimg.com/vi/{trackID}/mqdefault.jpg
if (typeof variable !== 'undefined') {
let separatorSpan = document.createElement('span');
separatorSpan.innerHTML = ' - ';
document.getElementById('shooting-stars-enable').after(separatorSpan);
document.getElementById('shooting-stars-enable').innerHTML = 'Disable shooting stars⭐️';
}
document.getElementById('shooting-stars-enable').addEventListener('click', () => {
if (processingIsOn) {
processingSketch.frameRate(0);
document.getElementById('shooting-stars-enable').innerHTML = 'Enable shooting stars⭐️';
processingIsOn = false;
} else {
processingSketch.frameRate(24);
document.getElementById('shooting-stars-enable').innerHTML = 'Disable shooting stars⭐️';
processingIsOn = true;
}
});

41
js/sketch.js
View File

@@ -1,3 +1,5 @@
// Another possible inspiration: https://www.khanacademy.org/computer-programming/twinkle-twinkle/6280832014565376
let sketch = function(p) { let sketch = function(p) {
let bgCol = hexToRgb('#222233'); let bgCol = hexToRgb('#222233');
let starCol = [hexToRgb('#ffcdff'), hexToRgb('#804442'), hexToRgb('#ffff7d')] let starCol = [hexToRgb('#ffcdff'), hexToRgb('#804442'), hexToRgb('#ffff7d')]
@@ -16,22 +18,25 @@ let sketch = function(p) {
let time = 0; let time = 0;
let sketchLoop = 0;
p.setup = function(){ p.setup = function(){
p.frameRate(24); p.frameRate(24);
currentWidth = p.windowWidth; currentWidth = p.windowWidth;
currentHeight = p.windowHeight; currentHeight = p.windowHeight;
p.createCanvas(currentWidth, currentHeight); // p.createCanvas(currentWidth, currentHeight);
p.createCanvas(1920, 1080, p.SVG) // To export the result to SVG
p.noLoop(); // To export the result to SVG
bgInit(); bgInit();
mover = new Mover(); mover = new Mover();
// p.noLoop();
} }
p.draw = function(){ p.draw = function(){
p.background(bgCol); // p.background(bgCol);
p.clear();
p.image(bg, 0, 0); p.image(bg, 0, 0);
@@ -52,6 +57,8 @@ let sketch = function(p) {
time += 1; time += 1;
p.save(); // To export the result to SVG
} //End of draw() } //End of draw()
class Stars { class Stars {
@@ -118,15 +125,10 @@ let sketch = function(p) {
this.acc.set(0, 0); this.acc.set(0, 0);
this.vel.set(0, 0); this.vel.set(0, 0);
this.pos.x = p.random(p.round(0.05 * p.width), p.round(0.95 * p.width)); this.pos.x = p.random(p.round(0.05 * p.width), p.round(0.95 * p.width));
this.pos.y = p.random(0, p.round(p.height*0.3)); this.pos.y = p.random(0, p.round(p.height*0.45));
let gravity = p.createVector(0, 0.02); let gravity = p.createVector(0, 0.02);
this.applyForce(gravity); this.applyForce(gravity);
// this.pos = p.createVector(200, 200);
// this.acc.x = p.random(7, 15) * (1 + p.random(0, 1) * -2);
// this.acc.y = p.random(0, 3) - 6;
} }
@@ -167,11 +169,6 @@ let sketch = function(p) {
} }
show() { show() {
// p.stroke(255);
// p.strokeWeight(2);
// p.fill(255, 100);
// p.ellipse(this.pos.x, this.pos.y, this.r * 2);
p.strokeWeight(this.size); p.strokeWeight(this.size);
// p.stroke(this.color); // p.stroke(this.color);
p.stroke(255, p.constrain(305-this.lifespan, 0, 255), 0, 255-0.7*this.lifespan); p.stroke(255, p.constrain(305-this.lifespan, 0, 255), 0, 255-0.7*this.lifespan);
@@ -181,10 +178,11 @@ let sketch = function(p) {
} }
p.windowResized = function() { p.windowResized = function() {
//Redraw only if new size if bigger than previously
let newWidth = p.windowWidth; let newWidth = p.windowWidth;
let newHeight = p.windowHeight; let newHeight = p.windowHeight;
if (newWidth > currentWidth || newHeight > currentHeight) { //Redraw only if new size if bigger than previously
// if (newWidth > currentWidth || newHeight > currentHeight) {
if (true) {
currentWidth = newWidth; currentWidth = newWidth;
currentHeight = newHeight; currentHeight = newHeight;
@@ -197,8 +195,9 @@ let sketch = function(p) {
function bgInit() { function bgInit() {
nbStars = calcNumberOfStars(); nbStars = calcNumberOfStars();
bg = p.createGraphics(p.width, p.height); bg = p.createGraphics(p.width, p.height);
bg.background(bgCol); // bg.background(bgCol);
setGradient(0, 0, p.width, p.height, bgCol, starCol[1]); // setGradient(0, 0, p.width, p.height, bgCol, starCol[1]);
// bg.background(0, 0, 0, 0);
stars = new Stars(nbStars); stars = new Stars(nbStars);
stars.make(); stars.make();
@@ -240,4 +239,6 @@ let sketch = function(p) {
} }
}; };
new p5(sketch, 'bg'); let processingSketch = new p5(sketch, 'bg');
let processingIsOn = true;

22
js/vendor/p5.svg.cjs.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

2509
js/vendor/p5.svg.js vendored Normal file
View File

File diff suppressed because it is too large Load Diff