Browse Source

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

master
TFLCL 2 years ago
parent
commit
abc6095610
  1. 24
      css/main.css
  2. 1
      img/stars_1920x1080.svg
  3. 1
      img/stars_2560x1440.svg
  4. 15
      index.html
  5. 17
      js/main.js
  6. 41
      js/sketch.js
  7. 22
      js/vendor/p5.svg.cjs.min.js
  8. 2509
      js/vendor/p5.svg.js

24
css/main.css

@ -9,7 +9,6 @@
html {
background-color: var(--bg-color);
color: var(--text-color);
font-size: 1em;
line-height: 1.4;
@ -62,11 +61,23 @@ html {
}
#bg {
z-index: -1;
z-index: -2;
overflow: hidden;
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 {
/* display: none; */
display: flex;
@ -285,6 +296,15 @@ input[type=range]#crossfader::-ms-thumb {
/*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
========================================================================== */

1
img/stars_1920x1080.svg

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 78 KiB

1
img/stars_2560x1440.svg

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 118 KiB

15
index.html

@ -24,7 +24,9 @@
<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="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">
</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>
<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/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/sketch.js"></script>
</body>

17
js/main.js

@ -201,3 +201,20 @@ function componentToHex(c) {
}
// 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

@ -1,3 +1,5 @@
// Another possible inspiration: https://www.khanacademy.org/computer-programming/twinkle-twinkle/6280832014565376
let sketch = function(p) {
let bgCol = hexToRgb('#222233');
let starCol = [hexToRgb('#ffcdff'), hexToRgb('#804442'), hexToRgb('#ffff7d')]
@ -16,22 +18,25 @@ let sketch = function(p) {
let time = 0;
let sketchLoop = 0;
p.setup = function(){
p.frameRate(24);
currentWidth = p.windowWidth;
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();
mover = new Mover();
// p.noLoop();
}
p.draw = function(){
p.background(bgCol);
// p.background(bgCol);
p.clear();
p.image(bg, 0, 0);
@ -52,6 +57,8 @@ let sketch = function(p) {
time += 1;
p.save(); // To export the result to SVG
} //End of draw()
class Stars {
@ -118,15 +125,10 @@ let sketch = function(p) {
this.acc.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.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);
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() {
// 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.stroke(this.color);
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() {
//Redraw only if new size if bigger than previously
let newWidth = p.windowWidth;
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;
currentHeight = newHeight;
@ -197,8 +195,9 @@ let sketch = function(p) {
function bgInit() {
nbStars = calcNumberOfStars();
bg = p.createGraphics(p.width, p.height);
bg.background(bgCol);
setGradient(0, 0, p.width, p.height, bgCol, starCol[1]);
// bg.background(bgCol);
// setGradient(0, 0, p.width, p.height, bgCol, starCol[1]);
// bg.background(0, 0, 0, 0);
stars = new Stars(nbStars);
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

File diff suppressed because one or more lines are too long

2509
js/vendor/p5.svg.js vendored

File diff suppressed because it is too large Load Diff
Loading…
Cancel
Save