diff --git a/projects/thatfishhouse/assets/cursor_fish.png b/projects/thatfishhouse/assets/cursor_fish.png new file mode 100644 index 0000000..cb5a88c Binary files /dev/null and b/projects/thatfishhouse/assets/cursor_fish.png differ diff --git a/projects/thatfishhouse/index.html b/projects/thatfishhouse/index.html new file mode 100644 index 0000000..28bcc6b --- /dev/null +++ b/projects/thatfishhouse/index.html @@ -0,0 +1,93 @@ + + + + + fish + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+

fish

+

fish

+

fish

+

fish

+

fish

+

fish

+

fish

+

fish

+

fish

+

fish

+

fish

+

fish

+

fish

+

fish

+
+
+ + + + +
+
+

that
fish
house

+

🐟

+
+

thatfishhouse is an experiment in design by bucketfish. please enjoy this little goofy place.

+

this design is inspired by something i saw at the airport

+
+
+

fresh fish daily

+ +

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.

+
+ +
+

really cute fish too.

+
    +
  1. they have big eyes
    2. +
  2. they are not creepy
    3. +
  3. they like to sleep!
    4. +
+

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.

+
+

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.

+ +
+ +
+ + + +
+ + + + + + + diff --git a/projects/thatfishhouse/script.js b/projects/thatfishhouse/script.js new file mode 100644 index 0000000..10bfad8 --- /dev/null +++ b/projects/thatfishhouse/script.js @@ -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 +}) diff --git a/projects/thatfishhouse/style.css b/projects/thatfishhouse/style.css new file mode 100644 index 0000000..fda2b2e --- /dev/null +++ b/projects/thatfishhouse/style.css @@ -0,0 +1,195 @@ +:root { + --darkest: #423E39; + --dark: #66625D; + --blue: #CFDFDE; + --brown: #CEB39A; + --white: #FBF6F2; + --green: #ADBDAF; + --purple: #C4BFDE; +} + +html { + color: #423E39; + font-family: Verdana; +} + +body { + margin: 0; + padding: 0; + font-size: 1.2em; + position: relative; +} + + +h1.title{ + font-size: 7em; + /* text-align: center; */ + text-decoration: underline; + /* text-decoration-style: dashed; */ + + text-decoration-color: var(--blue); + text-decoration-thickness: 16px; + margin: 0.4em 0; + padding: 0; + line-height: 0.8em; +} + +h2 { + background-color: var(--brown); + + +} + +h2::before { + content: "# " +} + +em { + font-style: italic; +} + +a { + color: inherit; + text-decoration: underline; + text-decoration-color: var(--purple); + text-decoration-thickness: 3px; +} + +a:hover { + /* text-decoration: none; */ + /* color: var(--white); */ + background-color: var(--purple); +} + +.content img { + width: 50%; + border: 5px solid var(--blue); + border-radius: 25px; + display: block; + margin: 0 auto; +} + +hr { + border: none; + height: 5px; + /* border-bottom: 5px solid var(--blue); */ + overflow: visible; + /* margin-top: -1.5em; */ + + background-color: var(--blue); + border-radius: 50px; + margin: 30px 0; + /* background-image: linear-gradient(to right, #00000000 0%, var(--blue) 5%, var(--blue) 95%, #00000000 100%); */ + +} + +hr::after { + content: "fish fish fish"; + display: block; + position: relative; + text-align: center; + /* bottom: -0.08em; */ + top: -0.6em; + /* margin-top: -1.5em; */ + font-weight: bold; + color: var(--blue); + filter: url("#noiseFilterTiny"); + font-size: 1.5em; + overflow: visible; +} + +hr::before { + /* content: "•" */ + /* + content: "fish fish fish"; + display: block; + position: relative; + text-align: center; + bottom: -0.65em; + margin-top: -0.65em; + font-weight: bold; + color: var(--blue); + filter: url("#noiseFilterTiny"); + font-size: 1.5em; + overflow: visible; */ +} + +li::marker { + color: var(--brown); + +} + +.hor { + display: flex; + justify-content: space-between; + gap: 16px; +} + +.content { + width: 100vw; + min-height: 100vh; + padding: 20px 20% 20vw; + box-sizing: border-box; + /* pointer-events: none; */ + z-index: 0; + position: relative; +} + +.content p { + /* pointer-events: auto; */ +} + +.background { + width: 100vw; + background-color: #FBF5F2; + overflow: hidden; + position: absolute; + height: max(100vh, 100%); + bottom: 0; +} + +svg, .special_fishes { + width: 100%; +} + +.special_fishes { + bottom: 0; + height: 100%; +} + +.back { + position: absolute; +} + +#cursor_fish { + height: 2.5em; + left: 50px; + top: 50px; +} + + +.special_fish { + /* font-family: Roboto; */ + font-weight: bold; + font-size: 10vw; + position: absolute; + margin: 0; + padding: 0; + color: var(--blue); + transition: color 2s; + +} + +.special_fish:hover{ + color: var(--purple); + transition: color 0.2s; + +} + +.special_fishes { + filter: url("#noiseFilter"); +} + +.distort { + filter: url("#noiseFilterLess"); +}