/*
anticipation
HOLY FUCK! almost 1000 people follow me on twitter. to celebrate i am giving away up to 999 editions of this interactive token. i have decided to celebrate early bc fuck waiting. please take two - one for you and one to give to your irl or anon internet fren with no nfts.
by thingticketNFT
@thingticket
created with hydra (https://hydra.ojack.xyz/) and p5.js (https://p5js.org/)
the following code is a template for p5 + hydra interactive (zipped html embedded) objkts on the hicetnunc platform and is the contents of the index.js file for this objkt. the code is not able to be run on the hydra website but i am including it here. the folder structure for this objkt is:
holyFuck.zip
-font/
--BebasNeue-Regular.eot
--BebasNeue-Regular.svg
--BebasNeue-Regular.ttf
--BebasNeue-Regular.woff
--BebasNeue-Regular.woff2
-index.html
-index.js
-hydra-synth.js
-p5.js
-style.css
-holyFuck.gif
hydra-synth.js and p5.js are open-source software available at the websites listed above. use developer tools (F12) to learn more about how this web page works.
the contents of index.html and notes on style.css are shown below this code.
a preview image is required for html embedded interactive objkts.
*/
speed=1
let hydra, hydraCanvas;
hydraCanvas = document.createElement("canvas");
hydraCanvas.width = window.innerWidth
hydraCanvas.height = window.innerHeight
hydraCanvas.id = "hydraCanvas";
hydraCanvas.style.position = "absolute";
hydraCanvas.style.zIndex = 2;
hydraCanvas.style.top = 0;
hydraCanvas.style.left = 0;
hydraCanvas.getContext("webgl", { preserveDrawingBuffer: false });
hydra = new Hydra({
canvas: hydraCanvas,
detectAudio: false,
enableStreamCapture: false,
});
document.querySelector(".placeholder").appendChild(hydraCanvas)
var elt;
const sa = ( p ) => {
let x = 400;
let y = 400;
p.setup = () => {
let canvas = p.createCanvas(hydraCanvas.width, hydraCanvas.height);
elt = canvas.elt;
s0.init({src: elt})
canvas.hide();
p.textFont('Bebas Neue');
textArray = ["HOLY FUCK!"]
p.textSize(letterSize)
p.draw = () => {
p.clear()
p.strokeWeight(5);
p.stroke(250,250,250);
index = Math.floor(time*6%textArray.length)
p.fill(0,0,0)
p.text( textArray[index], 0.5*hydraCanvas.width-letterSize*1.7, 0.55*hydraCanvas.height)
}
};
};
new p5(sa);
let letterSize
if (hydraCanvas.width <= hydraCanvas.height) {
letterSize = .2*hydraCanvas.width;
} else if (hydraCanvas.width > hydraCanvas.height) {
letterSize = .2*hydraCanvas.height;
} else {
letterSize = "not a valid option"
}
src(o0)
.layer(src(s0)
.rotate( ()=> -0.1 +0.2*(mouse.x/hydraCanvas.width))
)
.scale(()=>.98+ 0.04*(mouse.y/hydraCanvas.height))
.modulateScale(src(s0)
.rotate( ()=> -0.1 +0.2*(mouse.x/hydraCanvas.width))
)
.rotate( ()=> -0.008 +mouse.x/30000,()=>-0.0015 +mouse.x/150000-0.001*Math.tan(Math.sin(Math.sin(time*.1))) )
.modulateScale(osc(() => 30*Math.tan(Math.sin(Math.sin(0.01*time))),.05), .02)
.out(o0)
/* contents of index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>anticipation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height" />
<meta property="og:image" content="holyFuck.gif" />
<link rel="stylesheet" href="style.css">
<script src="hydra-synth.js"></script>
</head>
<body>
<div class="placeholder"></div>
<script src="p5.js"></script>
<script src="index.js" defer></script>
</body>
</html>
*/
/* notes on style.css
// the following css seems critical but displays improperly in the sandbox fullscreen
html, body {
margin: 0px;
overflow: hidden;
}
canvas {
width: 100%;
height: 100%;
}
//fonts are included. 'bebas neue' is used here. the easiest way to get the most out of cross browser functionality is to convert your chosen free font to all other formats needed for cross browser support. this includes importing the font as base 64. i have omitted the majority of the base 64 here for readability. i used the website https://transfonter.org/ with all output formats selected and base64 encode set to on. file path set to font/. the css (including base 64) is then included in a css file. copy and paste the font css below.
@font-face {
font-family: 'Bebas Neue';
src: url('font/BebasNeue-Regular.eot');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Bebas Neue';
src: url('data:font/woff2;charset=utf-8;base64,d09GMgABAAAAAFcoABIAA...
...z3NgAAAA==') format('woff2'),
url('data:font/woff;charset=utf-8;base64,d09GRgABAAAAAHVAABIAAAA...
...AAA2YWo8g==') format('woff'),
url('font/BebasNeue-Regular.ttf') format('truetype'),
url('font/BebasNeue-Regular.svg#BebasNeue-Regular') format('svg');
font-weight: normal;
font-style: normal;
font-display: swap;
}
*/
