init

assets/css/style.css

@@ -0,0 +1,46 @@
+h1 {
+    font-size: 45px;
+}
+
+#band-img-1 {
+    height: auto;
+}
+
+.iframe-container {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
+}
+
+.responsive-iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.navi-link {
+    color: #ff0000;
+    padding-left: 10px;
+    padding-right: 10px;
+}
+
+.navi-link:hover {
+    opacity: 70%;
+    color: #ff0000;
+}
+
+.contact-container {
+    color: 20d582;
+    background-color: #8220d5;
+    height: 75vh;
+}
+
+.footer-image {
+    width: 100%;
+    height: auto;
+}

assets/js/sketch.js

@@ -0,0 +1,230 @@
+let myFont;
+function preload() {
+  myFont = loadFont('assets/fonts/nabla.ttf');
+}
+
+function setup() {
+  if (windowWidth <= 480) {
+    var canvas = createCanvas(windowWidth, 200);
+  } else {
+    var canvas = createCanvas(windowWidth, 300);
+  }
+  canvas.parent('shrinkin-sketch')
+}
+
+function windowResized() {
+  if (windowWidth <= 480) {
+    var canvas = resizeCanvas(windowWidth, 200);
+  } else {
+    var canvas = resizeCanvas(windowWidth, 300);
+  }
+}
+
+class Ball {
+  constructor(x, y, r) {
+    this.position = new p5.Vector(x, y);
+    this.velocity = p5.Vector.random2D();
+    this.velocity.mult(3);
+    this.r = r;
+    this.m = r * 0.1;
+
+
+  }
+
+  update() {
+    this.position.add(this.velocity);
+  }
+
+  checkBoundaryCollision() {
+    if (this.position.x > width - this.r) {
+      this.position.x = width - this.r;
+      this.velocity.x *= -1;
+    } else if (this.position.x < this.r) {
+      this.position.x = this.r;
+      this.velocity.x *= -1;
+    } else if (this.position.y > height - this.r) {
+      this.position.y = height - this.r;
+      this.velocity.y *= -1;
+    } else if (this.position.y < this.r) {
+      this.position.y = this.r;
+      this.velocity.y *= -1;
+    }
+  }
+
+  checkCollision(other) {
+    // Get distances between the balls components
+    let distanceVect = p5.Vector.sub(other.position, this.position);
+
+    // Calculate magnitude of the vector separating the balls
+    let distanceVectMag = distanceVect.mag();
+
+    // Minimum distance before they are touching
+    let minDistance = this.r + other.r;
+
+    if (distanceVectMag < minDistance) {
+      let distanceCorrection = (minDistance - distanceVectMag) / 2.0;
+      let d = distanceVect.copy();
+      let correctionVector = d.normalize().mult(distanceCorrection);
+      other.position.add(correctionVector);
+      this.position.sub(correctionVector);
+
+      // get angle of distanceVect
+      let theta = distanceVect.heading();
+      // precalculate trig values
+      let sine = sin(theta);
+      let cosine = cos(theta);
+
+      /* bTemp will hold rotated ball this.positions. You 
+       just need to worry about bTemp[1] this.position*/
+      let bTemp = [new p5.Vector(), new p5.Vector()];
+
+      /* this ball's this.position is relative to the other
+       so you can use the vector between them (bVect) as the 
+       reference point in the rotation expressions.
+       bTemp[0].this.position.x and bTemp[0].this.position.y will initialize
+       automatically to 0.0, which is what you want
+       since b[1] will rotate around b[0] */
+      bTemp[1].x = cosine * distanceVect.x + sine * distanceVect.y;
+      bTemp[1].y = cosine * distanceVect.y - sine * distanceVect.x;
+
+      // rotate Temporary velocities
+      let vTemp = [new p5.Vector(), new p5.Vector()];
+
+      vTemp[0].x = cosine * this.velocity.x + sine * this.velocity.y;
+      vTemp[0].y = cosine * this.velocity.y - sine * this.velocity.x;
+      vTemp[1].x = cosine * other.velocity.x + sine * other.velocity.y;
+      vTemp[1].y = cosine * other.velocity.y - sine * other.velocity.x;
+
+      /* Now that velocities are rotated, you can use 1D
+       conservation of momentum equations to calculate 
+       the final this.velocity along the x-axis. */
+      let vFinal = [new p5.Vector(), new p5.Vector()];
+
+      // final rotated this.velocity for b[0]
+      vFinal[0].x =
+        ((this.m - other.m) * vTemp[0].x + 2 * other.m * vTemp[1].x) /
+        (this.m + other.m);
+      vFinal[0].y = vTemp[0].y;
+
+      // final rotated this.velocity for b[0]
+      vFinal[1].x =
+        ((other.m - this.m) * vTemp[1].x + 2 * this.m * vTemp[0].x) /
+        (this.m + other.m);
+      vFinal[1].y = vTemp[1].y;
+
+      // hack to avoid clumping
+      bTemp[0].x += vFinal[0].x;
+      bTemp[1].x += vFinal[1].x;
+
+      /* Rotate ball this.positions and velocities back
+       Reverse signs in trig expressions to rotate 
+       in the opposite direction */
+      // rotate balls
+      let bFinal = [new p5.Vector(), new p5.Vector()];
+
+      bFinal[0].x = cosine * bTemp[0].x - sine * bTemp[0].y;
+      bFinal[0].y = cosine * bTemp[0].y + sine * bTemp[0].x;
+      bFinal[1].x = cosine * bTemp[1].x - sine * bTemp[1].y;
+      bFinal[1].y = cosine * bTemp[1].y + sine * bTemp[1].x;
+
+      // update balls to screen this.position
+      other.position.x = this.position.x + bFinal[1].x;
+      other.position.y = this.position.y + bFinal[1].y;
+
+      this.position.add(bFinal[0]);
+
+      // update velocities
+      this.velocity.x = cosine * vFinal[0].x - sine * vFinal[0].y;
+      this.velocity.y = cosine * vFinal[0].y + sine * vFinal[0].x;
+      other.velocity.x = cosine * vFinal[1].x - sine * vFinal[1].y;
+      other.velocity.y = cosine * vFinal[1].y + sine * vFinal[1].x;
+    }
+  }
+
+  display(friend1, friend2) {
+    this.update()
+    noStroke();
+    fill('#ff0000');
+    ellipse(this.position.x, this.position.y, this.r * 2, this.r * 2);
+    this.checkBoundaryCollision()
+    this.checkCollision(friend1)
+    this.checkCollision(friend2)
+
+  }
+}
+
+class Logo {
+  constructor() {
+    this.yOffset = 0
+    this.up = false
+    this.textSize = 36
+    this.bounceDepth = 10
+    this.speed = 0.2
+  }
+
+  display() {
+    fill('#20d582');
+    textFont(myFont);
+
+    if (windowWidth/6 > 120) {
+       textSize(120);
+    } else {
+      textSize(windowWidth/6)
+    }
+
+    if (windowWidth <= 480) {
+        text('shrinkin', width/2 - 120, 20 + 60 + this.yOffset);
+        text('-minkin', width/2 - 120, 100 + 60 + this.yOffset);
+    } else {
+        text('shrinkin', width/2 - 120, 50 + 90 + this.yOffset);
+        text('-minkin', width/2 - 120, 150 + 90 + this.yOffset);
+    }
+
+    this.bounce()
+  }
+
+  bounce() {
+    if (!this.up) {
+      if (this.yOffset <= this.bounceDepth) {
+        this.yOffset = this.yOffset + this.speed 
+      } 
+      if (this.yOffset > this.bounceDepth) {
+        this.up = true
+      }
+    } else {
+      if (this.yOffset > 0) {
+          this.yOffset = this.yOffset - this.speed 
+        } 
+      if (this.yOffset < 0) {
+        this.up = false
+      }
+    }
+  }
+}
+
+
+let ball1 = new Ball(100, 400, 20)
+let ball2 = new Ball(700, 400, 80)
+let ball3 = new Ball(0, 200, 60)
+let logo = new Logo()
+
+
+function draw() {
+  background('#209bd0');
+  
+
+  ball1.display(ball2, ball3)
+  ball2.display(ball1, ball3)
+  ball3.display(ball1, ball2)
+
+  if (windowWidth <= 480) {
+    ball2.r = 40;
+    ball3.r = 30;
+  } else {
+    ball2.r = 80;
+    ball3.r = 60;
+  }
+
+  logo.display()
+
+}

assets/js/sketch_export.js

@@ -0,0 +1,227 @@
+let myFont;
+function preload() {
+  myFont = loadFont('assets/fonts/nabla.ttf');
+}
+
+function setup() {
+    var canvas = createCanvas(1200, 400);
+  canvas.parent('shrinkin-sketch')
+	createLoop({duration:120, gif:true})
+}
+
+function windowResized() {
+  if (windowWidth <= 480) {
+    var canvas = resizeCanvas(windowWidth, 200);
+  } else {
+    var canvas = resizeCanvas(windowWidth, 300);
+  }
+}
+
+class Ball {
+  constructor(x, y, r) {
+    this.position = new p5.Vector(x, y);
+    this.velocity = p5.Vector.random2D();
+    this.velocity.mult(3);
+    this.r = r;
+    this.m = r * 0.1;
+
+
+  }
+
+  update() {
+    this.position.add(this.velocity);
+  }
+
+  checkBoundaryCollision() {
+    if (this.position.x > width - this.r) {
+      this.position.x = width - this.r;
+      this.velocity.x *= -1;
+    } else if (this.position.x < this.r) {
+      this.position.x = this.r;
+      this.velocity.x *= -1;
+    } else if (this.position.y > height - this.r) {
+      this.position.y = height - this.r;
+      this.velocity.y *= -1;
+    } else if (this.position.y < this.r) {
+      this.position.y = this.r;
+      this.velocity.y *= -1;
+    }
+  }
+
+  checkCollision(other) {
+    // Get distances between the balls components
+    let distanceVect = p5.Vector.sub(other.position, this.position);
+
+    // Calculate magnitude of the vector separating the balls
+    let distanceVectMag = distanceVect.mag();
+
+    // Minimum distance before they are touching
+    let minDistance = this.r + other.r;
+
+    if (distanceVectMag < minDistance) {
+      let distanceCorrection = (minDistance - distanceVectMag) / 2.0;
+      let d = distanceVect.copy();
+      let correctionVector = d.normalize().mult(distanceCorrection);
+      other.position.add(correctionVector);
+      this.position.sub(correctionVector);
+
+      // get angle of distanceVect
+      let theta = distanceVect.heading();
+      // precalculate trig values
+      let sine = sin(theta);
+      let cosine = cos(theta);
+
+      /* bTemp will hold rotated ball this.positions. You 
+       just need to worry about bTemp[1] this.position*/
+      let bTemp = [new p5.Vector(), new p5.Vector()];
+
+      /* this ball's this.position is relative to the other
+       so you can use the vector between them (bVect) as the 
+       reference point in the rotation expressions.
+       bTemp[0].this.position.x and bTemp[0].this.position.y will initialize
+       automatically to 0.0, which is what you want
+       since b[1] will rotate around b[0] */
+      bTemp[1].x = cosine * distanceVect.x + sine * distanceVect.y;
+      bTemp[1].y = cosine * distanceVect.y - sine * distanceVect.x;
+
+      // rotate Temporary velocities
+      let vTemp = [new p5.Vector(), new p5.Vector()];
+
+      vTemp[0].x = cosine * this.velocity.x + sine * this.velocity.y;
+      vTemp[0].y = cosine * this.velocity.y - sine * this.velocity.x;
+      vTemp[1].x = cosine * other.velocity.x + sine * other.velocity.y;
+      vTemp[1].y = cosine * other.velocity.y - sine * other.velocity.x;
+
+      /* Now that velocities are rotated, you can use 1D
+       conservation of momentum equations to calculate 
+       the final this.velocity along the x-axis. */
+      let vFinal = [new p5.Vector(), new p5.Vector()];
+
+      // final rotated this.velocity for b[0]
+      vFinal[0].x =
+        ((this.m - other.m) * vTemp[0].x + 2 * other.m * vTemp[1].x) /
+        (this.m + other.m);
+      vFinal[0].y = vTemp[0].y;
+
+      // final rotated this.velocity for b[0]
+      vFinal[1].x =
+        ((other.m - this.m) * vTemp[1].x + 2 * this.m * vTemp[0].x) /
+        (this.m + other.m);
+      vFinal[1].y = vTemp[1].y;
+
+      // hack to avoid clumping
+      bTemp[0].x += vFinal[0].x;
+      bTemp[1].x += vFinal[1].x;
+
+      /* Rotate ball this.positions and velocities back
+       Reverse signs in trig expressions to rotate 
+       in the opposite direction */
+      // rotate balls
+      let bFinal = [new p5.Vector(), new p5.Vector()];
+
+      bFinal[0].x = cosine * bTemp[0].x - sine * bTemp[0].y;
+      bFinal[0].y = cosine * bTemp[0].y + sine * bTemp[0].x;
+      bFinal[1].x = cosine * bTemp[1].x - sine * bTemp[1].y;
+      bFinal[1].y = cosine * bTemp[1].y + sine * bTemp[1].x;
+
+      // update balls to screen this.position
+      other.position.x = this.position.x + bFinal[1].x;
+      other.position.y = this.position.y + bFinal[1].y;
+
+      this.position.add(bFinal[0]);
+
+      // update velocities
+      this.velocity.x = cosine * vFinal[0].x - sine * vFinal[0].y;
+      this.velocity.y = cosine * vFinal[0].y + sine * vFinal[0].x;
+      other.velocity.x = cosine * vFinal[1].x - sine * vFinal[1].y;
+      other.velocity.y = cosine * vFinal[1].y + sine * vFinal[1].x;
+    }
+  }
+
+  display(friend1, friend2) {
+    this.update()
+    noStroke();
+    fill('#ff0000');
+    ellipse(this.position.x, this.position.y, this.r * 2, this.r * 2);
+    this.checkBoundaryCollision()
+    this.checkCollision(friend1)
+    this.checkCollision(friend2)
+
+  }
+}
+
+class Logo {
+  constructor() {
+    this.yOffset = 0
+    this.up = false
+    this.textSize = 36
+    this.bounceDepth = 10
+    this.speed = 0.2
+  }
+
+  display() {
+    fill('#20d582');
+    textFont(myFont);
+
+    if (windowWidth/6 > 120) {
+       textSize(120);
+    } else {
+      textSize(windowWidth/6)
+    }
+
+    if (windowWidth <= 480) {
+        text('shrinkin', width/2 - 120, 20 + 60 + this.yOffset);
+        text('-minkin', width/2 - 120, 100 + 60 + this.yOffset);
+    } else {
+        text('shrinkin', width/2 - 120, 50 + 90 + this.yOffset);
+        text('-minkin', width/2 - 120, 150 + 90 + this.yOffset);
+    }
+
+    this.bounce()
+  }
+
+  bounce() {
+    if (!this.up) {
+      if (this.yOffset <= this.bounceDepth) {
+        this.yOffset = this.yOffset + this.speed 
+      } 
+      if (this.yOffset > this.bounceDepth) {
+        this.up = true
+      }
+    } else {
+      if (this.yOffset > 0) {
+          this.yOffset = this.yOffset - this.speed 
+        } 
+      if (this.yOffset < 0) {
+        this.up = false
+      }
+    }
+  }
+}
+
+
+let ball1 = new Ball(100, 400, 20)
+let ball2 = new Ball(700, 400, 80)
+let ball3 = new Ball(0, 200, 60)
+let logo = new Logo()
+
+
+function draw() {
+  background('#209bd0');
+  
+
+  ball1.display(ball2, ball3)
+  ball2.display(ball1, ball3)
+  ball3.display(ball1, ball2)
+
+  if (windowWidth <= 480) {
+    ball2.r = 40;
+    ball3.r = 30;
+  } else {
+    ball2.r = 80;
+    ball3.r = 60;
+  }
+
+  logo.display()
+
+}

index.html

@@ -0,0 +1,155 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Shrinkin-Minkin</title>
+
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+	<script src="assets/js/p5.min.js"></script>
+    <script src="assets/js/sketch.js"></script>
+
+    <link rel="stylesheet" href="/assets/css/bootstrap.min.css">
+    <script src="assets/js/bootstrap.min.js"></script>
+
+    <link rel="stylesheet" href="/assets/css/style.css">
+</head>
+
+<body style="padding: 0px; margin: 0px;">
+    <div id="shrinkin-sketch" style="width:100%;"></div>
+
+    <div>
+        <center>
+            <a class="navi-link"  href="#listen">LISTEN</a> |
+            <a class="navi-link"  href="#watch">WATCH</a> |
+            <a class="navi-link"  href="#book">BOOK US</a> |
+            <a class="navi-link" target="_blank"  href="https://linktr.ee/shrinkinminkin">SOCIAL</a>
+        </center>
+
+    </div>
+
+    <div class="container-fluid pt-2 mt-3">
+
+        <div class="row pb-4">
+            <div class="col-lg-6">
+                <img id="band-img-1" class="img-fluid" src="assets/img/band_1.jpg" alt="" style=" width:100%; height: auto; max-width: 840px;">
+            </div>
+
+            <div class="col-lg-6">
+                <h1>About Us:</h1>
+                <p>
+                    <b>SHRINKIN-MINKIN</b> thrives on the fringes of genre, violating the confines of classification.
+                    Founded in 2022 by singer/guitarists Dominic DiTaranto and Michael Heinfling;
+                    SHRINKIN-MINKIN blends Rock, Funk, Jazz, Punk, infused with creative improvisation and FX landscape.
+                    The NJ based 5-piece is <i>tight</i>. Technical, Playful, and dripping with thirst-quenching satire.
+                </p>
+
+                <p>
+                    Their musical multiplicity allows SHRINKIN-MINKIN to fit into any lineup.
+                    Their songs range from the Funk, Rock, Hip Hop, Gospel fusion of "GLOP";
+                    to Post-Punk anthems like "Industry Rock" and the comical love-lament of "Butter Queen".
+                    Songs that are guaranteed to get asses convulsing in rhythmic fervor.
+                    More discerning listeners can relax and watch the band trade solos on "Down Polypore Wood".
+                    Add in Alternative ballads, Blues tracks, and even a Psychedelic-Waltz and you will begin to scratch
+                    the surface of what SHRINKIN-MINKIN has to offer.
+                    <br><br>
+                    <a href="#book">Book Us</a> now to support or headline!
+                </p>
+                <p>
+                    <b>Members:</b>
+                    <br>Dominic DiTaranto - Guitar/Vocals/Synth
+                    <br>Michael Heinfling - Guitar/Vocals
+                    <br>Charlie Misch - Keyboard/Synth
+                    <br>Ryan Billings - Bass
+                    <br>Recon Paul - Drums
+                </p>
+
+
+                <p>
+                    <b>Recommended if you like:</b>
+                    Frank Zappa,
+                    King Crimson,
+                    Talking Heads,
+                    David Bowie,
+                    Mahavishnu Orchestra,
+                    Phish,
+                    Miles Davis,
+                    The Stooges,
+                    Funkadelic,
+                    John Coltrane,
+                    The Stranglers,
+                    The Damned,
+                    Weather Report,
+                    The Cars
+                </p>
+            </div>
+        </div>
+
+        <h1 id="listen">Listen:</h1>
+        <!--Only Show this format on XL and above screens-->
+        <div class="d-block d-sm-block d-md-none d-lg-none d-xl-block d-xxl-block">
+            <div class="row pb-4 justify-content-center">
+                <div class="col-lg-3">
+                    <iframe style="border: 0; width: 320px; height: 320px;" src="https://bandcamp.com/EmbeddedPlayer/track=2245986990/size=large/bgcol=ffffff/linkcol=0687f5/minimal=true/transparent=true/" seamless><a href="https://shrinkin-minkin.bandcamp.com/track/down-polypore-wood">Down Polypore Wood by shrinkin-minkin</a></iframe>
+                </div>
+                <div class="col-lg-3">
+                    <iframe style="border: 0; width: 320px; height: 320px;" src="https://bandcamp.com/EmbeddedPlayer/track=4177872269/size=large/bgcol=ffffff/linkcol=0687f5/minimal=true/transparent=true/" seamless><a href="https://shrinkin-minkin.bandcamp.com/track/butter-queen-demo">Butter Queen (demo) by shrinkin-minkin</a></iframe>
+                </div>
+                <div class="col-lg-3">
+                    <iframe style="border: 0; width: 320px; height: 320px;" src="https://bandcamp.com/EmbeddedPlayer/track=3303045063/size=large/bgcol=ffffff/linkcol=0687f5/minimal=true/transparent=true/" seamless><a href="https://shrinkin-minkin.bandcamp.com/track/led-by-herons-demo">Led By Herons (Demo) by shrinkin-minkin</a></iframe>
+                </div>
+                <div class="col-lg-3">
+                    <iframe style="border: 0; width: 320px; height: 320px;" src="https://bandcamp.com/EmbeddedPlayer/track=2527109857/size=large/bgcol=ffffff/linkcol=0687f5/minimal=true/transparent=true/" seamless><a href="https://shrinkin-minkin.bandcamp.com/track/industry-rock">Industry Rock by shrinkin-minkin</a></iframe>
+                </div>
+            </div>
+        </div>
+
+        <div class="d-none d-sm-none d-md-block d-lg-block d-xl-none d-xxl-none">
+            <div class="row pb-4 justify-content-center">
+                <div class="col-md-6">
+                    <iframe style="border: 0; width: 320px; height: 320px;" src="https://bandcamp.com/EmbeddedPlayer/track=2245986990/size=large/bgcol=ffffff/linkcol=0687f5/minimal=true/transparent=true/" seamless><a href="https://shrinkin-minkin.bandcamp.com/track/down-polypore-wood">Down Polypore Wood by shrinkin-minkin</a></iframe>
+                </div>
+                <div class="col-md-6">
+                    <iframe style="border: 0; width: 320px; height: 320px;" src="https://bandcamp.com/EmbeddedPlayer/track=4177872269/size=large/bgcol=ffffff/linkcol=0687f5/minimal=true/transparent=true/" seamless><a href="https://shrinkin-minkin.bandcamp.com/track/butter-queen-demo">Butter Queen (demo) by shrinkin-minkin</a></iframe>
+                </div>
+            </div>
+
+            <div class="row pb-4 justify-content-center">
+                <div class="col-md-6">
+                    <iframe style="border: 0; width: 320px; height: 320px;" src="https://bandcamp.com/EmbeddedPlayer/track=3303045063/size=large/bgcol=ffffff/linkcol=0687f5/minimal=true/transparent=true/" seamless><a href="https://shrinkin-minkin.bandcamp.com/track/led-by-herons-demo">Led By Herons (Demo) by shrinkin-minkin</a></iframe>
+                </div>
+                <div class="col-md-6">
+                    <iframe style="border: 0; width: 320px; height: 320px;" src="https://bandcamp.com/EmbeddedPlayer/track=2527109857/size=large/bgcol=ffffff/linkcol=0687f5/minimal=true/transparent=true/" seamless><a href="https://shrinkin-minkin.bandcamp.com/track/industry-rock">Industry Rock by shrinkin-minkin</a></iframe>
+                </div>
+            </div>
+
+        </div>
+
+        <div class="mb-5 mt-5">
+            <center>
+                <img src="assets/img/band_banner.jpg" alt="" class="img-fluid" style="width: 100%; height: auto; max-width: 1229px;">
+            </center>
+        </div>
+
+
+        <h1 id="watch">Watch Us Live:</h1>
+        <div class="iframe-container pb-4">
+            <iframe class="responsive-iframe" src="https://www.youtube.com/embed/4Cx1_LMJRzM?si=fS9EuyczsNvsJuSb&amp;start=42" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+        </div>
+
+        <div class="mt-5 mb-5 p-5">
+            <h1 id="book">Book Us:</h1>
+            <h4>Book us for your next event. We are excited to headline or support!</h4>
+            <br>
+            <h4>Email: shrinkinminkin@gmail.com</h4>
+            <h4>Phone: 732-895-5253</h4>
+
+        </div>
+    </div>
+
+    <div>
+        <img class="footer-image" src="assets/img/bugman_sticker.png" alt="">
+    </div>
+
+  </body>
+</html>