Skip to content

Commit

Permalink
thatfishhouse project
Browse files Browse the repository at this point in the history
  • Loading branch information
@bucketfish
bucketfish committed Nov 16, 2024
1 parent 1fa1b0e commit c6673ca
Show file tree
Hide file tree
Showing 4 changed files with 398 additions and 0 deletions.
Binary file added projects/thatfishhouse/assets/cursor_fish.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
93 changes: 93 additions & 0 deletions projects/thatfishhouse/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>fish</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">


</head>
<body>
<svg class="back">
<filter id="noiseFilter" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
<!-- <feTurbulence id="turbulence" type="fractalNoise" baseFrequency="0.03" numOctaves="1"/> -->
<feTurbulence type="fractalNoise" baseFrequency="0.04" numOctaves="4" seed="15" stitchTiles="stitch" result="turbulence"></feTurbulence>
<feDisplacementMap in="SourceGraphic" scale="25"></feDisplacementMap>
</filter>

<filter id="noiseFilterLess" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
<!-- <feTurbulence id="turbulence" type="fractalNoise" baseFrequency="0.03" numOctaves="1"/> -->
<feTurbulence type="fractalNoise" baseFrequency="0.02" numOctaves="4" seed="15" stitchTiles="stitch" result="turbulence"></feTurbulence>
<feDisplacementMap in="SourceGraphic" scale="25"></feDisplacementMap>
</filter>

<filter id="noiseFilterTiny" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
<!-- <feTurbulence id="turbulence" type="fractalNoise" baseFrequency="0.03" numOctaves="1"/> -->
<feTurbulence type="fractalNoise" baseFrequency="0.002" numOctaves="4" seed="15" stitchTiles="stitch" result="turbulence"></feTurbulence>
<feDisplacementMap in="SourceGraphic" scale="15"></feDisplacementMap>
</filter>
</svg>


<div class="background">
<div class="special_fishes">
<p class="special_fish" style="left: 0vw;bottom: 0;rotate: 12deg;">fish</p>
<p class="special_fish" style="left: 14vw;bottom: 3vw;rotate: 38deg;">fish</p>
<p class="special_fish" style="left: 32vw;bottom: -2vw;rotate: 342deg;">fish</p>
<p class="special_fish" style="left: 82vw;bottom: -3vw;rotate: 8deg;">fish</p>
<p class="special_fish" style="left: 68vw;bottom:1vw;rotate: 330deg;">fish</p>
<p class="special_fish" style="left: 82vw;bottom: 6vw;rotate: 21deg;">fish</p>
<p class="special_fish" style="left: 50vw;bottom: -1vw;rotate: 1deg;">fish</p>
<p class="special_fish" style="left: 25vw;bottom: 6vw;rotate: 12deg;">fish</p>
<p class="special_fish" style="left: 4vw;rotate: -20deg;bottom: 11vw;">fish</p>
<p class="special_fish" style="left: 59vw;bottom: 6vw;rotate: 345deg;">fish</p>
<p class="special_fish" style="left: 47vw;bottom: 10vw;rotate: 303deg;">fish</p>
<p class="special_fish" style="left: 37vw;bottom: 13vw;rotate: -30deg;">fish</p>
<p class="special_fish" style="left: 58vw;bottom: 16vw;rotate: 39deg;">fish</p>
<p class="special_fish" style="left: 48vw;bottom: 27vw;rotate: -2deg;">fish</p>
</div>
</div>

<!-- <img class="back" id="cursor_fish" src="assets/cursor_fish.png" alt=""></img> -->


<div class="content">
<div class="hor">
<h1 class="title distort">that<br/>fish<br/>house</h1>
<h1 class="fish-title distort" id="fish-icon" style="font-size: 18em; margin: 0; rotate: 20deg; pointer-events: none;">🐟</h2>
</div>
<p><em>thatfishhouse</em> is an experiment in design by <a href="https://bucketfish.me">bucketfish</a>. please enjoy this little goofy place.</p>
<p>this design is inspired by something i saw at the airport</p>
<div class="hor">
<div class="">
<h2>fresh fish daily</h2>
<img src="assets/cursor_fish.png" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<div class="">
<h2>really cute fish too.</h2>
<ol>
<li>they have big eyes</li>
<li>they are not creepy</li>
<li>they like to sleep!</li>
</ol>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<hr/>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>

</div>

<!-- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> -->
<!-- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> -->
</div>

<!-- <script src="script.js"></script> -->

</body>


</html>
110 changes: 110 additions & 0 deletions projects/thatfishhouse/script.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
var fish = document.getElementById("cursor_fish")

var fishleft = 50;
var fishtop = 50;
var fishrot = 0;

var fishmovemax = 20; // (10^2 + 10^2)
var fishrotmax = 0.1;

var currentX = 0;
var currentY = 0;

function rotate_fish() {

let newrot = Math.atan( (currentX-fishleft) / -(currentY - fishtop));
if (currentY >= fishtop) {
newrot = Math.PI + newrot
}

// newrot = normalise_rotation(newrot)

var newnewrot = Math.min(Math.abs(newrot), fishrotmax);
if (newrot >= fishrot) {}
else {newnewrot = -newnewrot}

fishrot += newnewrot

fishrot = normalise_rotation(fishrot)

// if (fishrot < 0) {fishrot = 2 * Math.PI - fishrot}
// if (fishrot > 2 * Math.PI) {fishrot -= Math.PI}
fish.style.rotate = fishrot + "rad";

setTimeout("rotate_fish()", 40);
}

function normalise_rotation(rot) {
if (rot < 0) {return 2 * Math.PI - rot}
else if (rot > 2 * Math.PI) {return rot - 2 * Math.PI}
else { return rot }
}

rotate_fish()

window.addEventListener("mousemove", (e) => {
// console.log(fish.style.left)

currentX = e.clientX;
currentY = e.clientY;

// calculate rotation of fish

// console.log(newrot);
// let rotate_size = 0;
//
// if (Math.abs(fishrot - newrot) < fishrotmax) {
// rotate_size = newrot - fishrot;
// }
//
// else {
// rotate_size = fishrotmax;
// }
//
// if (newrot > 0) {
// fish.style.rotate = fishrot + rotate_size + "rad";
// fishrot += rotate_size;
// }
// else {
// // console.log("?")
// fish.style.rotate = fishrot - rotate_size + "rad";
// fishrot -= rotate_size;
// }

// fishrot = fish.style.rotate;

// console.log(fish.style.rotate)

// let move_size = Math.min((currentX-fishleft) * (currentX-fishleft) + (currentY - fishtop) * (currentY - fishtop), fishmovemax)

// fishleft += Math.cos(fishrot) * fishmovemax;
// fishtop += Math.sin(fishrot) * fishmovemax;
// fish.style.left = fishleft + "px";
// fish.style.top = fishtop + "px";


// fish.style.left = currentX + "px";
// fish.style.top = currentY + "px";
//
// bodyRect = document.body.getBoundingClientRect(),
// rect = canvas.getBoundingClientRect(),
// offset = rect.top - bodyRect.top;
//
//
// if(prevX == null || prevY == null || !draw){
// prevX = e.clientX + window.pageXOffset - rect.left
// prevY = e.clientY + window.pageYOffset - offset
// return
// }
//
// let currentX = e.clientX + window.pageXOffset - rect.left
// let currentY = e.clientY + window.pageYOffset- offset
//
// ctx.beginPath()
// ctx.moveTo(prevX, prevY)
// ctx.lineTo(currentX, currentY)
// ctx.stroke()
//
// prevX = currentX
// prevY = currentY
})
Loading

0 comments on commit c6673ca

Please sign in to comment.