Skip to content

Commit

Permalink
Made background to homepage sphirograph
Browse files Browse the repository at this point in the history
  • Loading branch information
CallumGilly committed Nov 10, 2022
1 parent bdaba7a commit e9e3423
Show file tree
Hide file tree
Showing 5 changed files with 87 additions and 10 deletions.
6 changes: 6 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,12 @@

</head>
<body>
<!-- Background -->
<div>
<iframe src="./spirograph.html" width="100%" height="100%" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>


<div id="nav-placeholder" style="display: none;">

</div>
Expand Down
11 changes: 10 additions & 1 deletion main.css
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ body {
}

.consoleStyle {
color: darkgreen;
color: #006400;
font-family: monospace;
text-align: center;
}
Expand All @@ -20,4 +20,13 @@ body {
transform: translate(-50%, -50%);
padding: 10px;
padding: 10px;
}

iframe {
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
18 changes: 9 additions & 9 deletions navbar.css
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@
display: flex;
flex-flow: column wrap;
justify-content: space-between;
height: 2.5rem;
width: 2.5rem;
height: 2rem;
width: 2rem;
cursor: pointer;
}

.hamburger-menu .bar {
height: 5px;
height: 3px;
background: darkgreen;
border-radius: 5px;
margin: 3px 0px;
Expand All @@ -17,29 +17,29 @@
}

.hamburger-menu .top {
width: 2.5rem;
width: 2rem;
}

.hamburger-menu .middle {
width: 1.5rem;
width: 1rem;
}

.hamburger-menu .bottom {
width: 1.75rem;
width: 1.25rem;
}

.hamburger-menu:hover .top {
transform: translateX(1.7rem) rotate(45deg);
border-radius: 0px;
width: 1.42rem;
width: 1.17rem;
}

.hamburger-menu:hover .middle {
width: 2.5rem;
width: 2rem;
}

.hamburger-menu:hover .bottom {
transform: translateX(1.7rem) rotate(-45deg);
border-radius: 0px;
width: 1.42rem;
width: 1.17rem;
}
11 changes: 11 additions & 0 deletions spirograph.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<!DOCTYPE html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.min.js" integrity="sha512-WJXVjqeINVpi5XXJ2jn0BSCfp0y80IKrYh731gLRnkAS9TKc5KNt/OfLtu+fCueqdWniouJ1ubM+VI/hbo7POQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="spirograph.js"></script>
<style> body {padding: 0; margin: 0;} </style>
</head>

<body>

</body>
</html>
51 changes: 51 additions & 0 deletions spirograph.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
let r=10;
let rDir=1;
let rEnabled=1;
let rMax;
let R=2;
let RDir=10;
let REnabled=0;
let RMax;
let O=30;
let ODir = 2.5;
let OMax;
let frame = 0;
let frameMod = 20;
function setup() {
createCanvas(windowWidth,windowHeight);
rMax = windowWidth/4;
OMax = windowWidth/4;
R=rMax+1;
background(0);
stroke(0,100,0);
frameRate(30);
}

function draw() {
background(0);
for (let t = 0; t < (100 / frameMod) * (frame % frameMod); t+= 0.025) {
line(x(t),y(t),x(t+0.025),y(t+0.025));
}
if (frame % frameMod == 0) {
r +=rDir;
if (O == r) {
r += rDir;
}
if (r >= rMax || r <= 9) {
rDir *= -1;
O += ODir;
if (O >= r || O <= 0) {
ODir *= -1;
}
}
}
frame++;
}

function x(t) {
return windowWidth/2 + (R-r)*Math.cos(t) + O*Math.cos(((R-r)/r)*t);
}

function y( t) {
return windowHeight/2 + (R-r)*Math.sin(t) + O*Math.sin(((R-r)/r)*t);
}

0 comments on commit e9e3423

Please sign in to comment.