Skip to content

Commit

Permalink
week 12
Browse files Browse the repository at this point in the history
  • Loading branch information
@munusshih
munusshih committed Apr 19, 2024
1 parent 4388226 commit f4f9bd7
Show file tree
Hide file tree
Showing 4 changed files with 262 additions and 7 deletions.
89 changes: 88 additions & 1 deletion css/clock.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
background-size: 200% 200%;
animation: gradient 15s ease infinite;
box-shadow: 10px 20px 30px rgba(0, 0, 0, 0.1);

}

.clock::before {
Expand Down Expand Up @@ -45,6 +44,46 @@
border-top: 1px solid var(--background);
}

.week-12-clock {
position: absolute;
width: 335px;
height: 335px;
background: black;
transition: all 0.5s;
background-size: 200% 200%;
animation: none;
box-shadow: 10px 20px 30px rgba(0, 0, 0, 0.1);
border-radius: 100%;
}

.week-12-clock::before{
width: 100px;
height: 100px;
z-index: 100000;
background: rgba( 255, 255, 255, 0.1 );
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
backdrop-filter: blur( 6px );
-webkit-backdrop-filter: blur( 6px );
border-radius: 1px;
filter: none;
transform: translate(-200%, -100%) rotate(0deg);
border: 1px solid rgba( 255, 255, 255, 0.18 );
}

.week-12-clock::after{
width: 180px;
height: 180px;
z-index: 100000;
background: rgba( 255, 255, 255, 0.1 );
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
backdrop-filter: blur( 6px );
-webkit-backdrop-filter: blur( 6px );
border-radius: 1px;
filter: none;
transform: translate(10%, 0) rotate(0deg);
border: 1px solid rgba( 255, 255, 255, 0.18 );
}

@keyframes gradient {
0% {
background-position: 0% 50%;
Expand Down Expand Up @@ -73,6 +112,35 @@
transition: all 0.5s;
}

.week-12-hour{
width: 0px;
height: 0px;
background: none;
border-radius: 0;
border-left: 23px solid transparent;
border-right: 23px solid transparent;
border-bottom: 46px solid yellow; /* Change color as needed */
top: calc(50% + 80px);
left: calc(50% - 23px);
transform-origin: 23px -80px;
}

.week-12-hour::after{
content: "";
position: absolute;
top: 0;
left: 0;
width: 0px;
height: 0px;
background: none;
border-radius: 0;
border-left: 23px solid transparent;
border-right: 23px solid transparent;
border-bottom: 46px solid yellow; /* Change color as needed */
transform: translate(-50%, 0%);
filter: blur(5px);
}

.minute-hand {
width: 4px;
height: 60px;
Expand All @@ -84,6 +152,16 @@
transition: all 0.5s;
}

.week-12-minute{
width: 40px;
height: 40px;
background: blue;
border-radius: 0%;
top: calc(50% + 60px);
left: calc(50% - 20px);
transform-origin: 20px -60px;
}

.second-hand {
width: 2px;
height: 80px;
Expand All @@ -95,6 +173,15 @@
transition: all 1s;
}

.week-12-second{
width: 40px;
height: 40px;
background: red;
top: calc(50% + 20px);
left: calc(50% - 20px);
transform-origin: 20px -20px;
}

.center {
width: 8px;
height: 8px;
Expand Down
13 changes: 13 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -276,6 +276,19 @@ <h4 class="effect">Week 11</h4>

<div id="week11"></div>
</details>
<details id="week12-details">
<summary>
<h4 class="effect">Week 12</h4>
<div class="clock week-12-clock">
<div class="hour-hand week-12-hour"></div>
<div class="minute-hand week-12-minute"></div>
<div class="second-hand week-12-second"></div>
<div class="center week-12-center"></div>
</div>
</summary>

<div id="week12"></div>
</details>
</div>
</article>
</section>
Expand Down
20 changes: 14 additions & 6 deletions js/params.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,17 +92,25 @@ function updateClock() {
const minutes = now.getMinutes();
const seconds = now.getSeconds();

const hourHand = document.querySelector('.hour-hand');
const minuteHand = document.querySelector('.minute-hand');
const secondHand = document.querySelector('.second-hand');
const hourHands = document.querySelectorAll('.hour-hand');
const minuteHands = document.querySelectorAll('.minute-hand');
const secondHands = document.querySelectorAll('.second-hand');

const hourDegrees = (hours % 12) * 30 + minutes / 2 + 180;
const minuteDegrees = minutes * 6 + seconds / 10 + 180;
const secondDegrees = seconds * 6 + 180;

hourHand.style.transform = `rotate(${hourDegrees}deg)`;
minuteHand.style.transform = `rotate(${minuteDegrees}deg)`;
secondHand.style.transform = `rotate(${secondDegrees}deg)`;
hourHands.forEach(hand => {
hand.style.transform = `rotate(${hourDegrees}deg)`;
});

minuteHands.forEach(hand => {
hand.style.transform = `rotate(${minuteDegrees}deg)`;
});

secondHands.forEach(hand => {
hand.style.transform = `rotate(${secondDegrees}deg)`;
});
}

setInterval(updateClock, 1000);
147 changes: 147 additions & 0 deletions weeks/12.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,147 @@
<article class="space--after-quadruple">
<div class="space--after-quadruple">
<h4>Description</h4>
<p>
This week we've kicking off our final project on experimental clock!
We will learn about the fascinating and diverse history of measuring
time, and time keeping. Then we will learn how to retrieve the
current Time in Javascript using the Date() object. Lastly we will
learn dive into what Creative Coding is, how an external library -
p5.js can help us make some pretty interesting coding sketches!</p>
</p>
</div>

<div class="space--after-quadruple">
<h4>Lecture</h4>
<p><a
href="https://www.figma.com/proto/cS8KJ8zQfIbpkOlMna3BsI/Week-12?page-id=0%3A1&type=design&node-id=14001-25&viewport=1324%2C1076%2C0.03&t=5KsztlcCDBQVasr2-1&scaling=contain&mode=design">Time</a>
</p>
<p><a
href="https://www.figma.com/proto/cS8KJ8zQfIbpkOlMna3BsI/Week-12?page-id=0%3A1&type=design&node-id=14001-520&viewport=1324%2C1076%2C0.03&t=5KsztlcCDBQVasr2-1&scaling=contain&mode=design">p5.js
and Creative Coding</a>
</p>
</div>

<div class="space--after-quadruple">
<h4>Demo</h4>
<p>
<a
href="https://www.figma.com/proto/cS8KJ8zQfIbpkOlMna3BsI/Week-12?page-id=0%3A1&type=design&node-id=14001-200&viewport=1324%2C1076%2C0.03&t=5KsztlcCDBQVasr2-1&scaling=contain&mode=design">Timing
Functions</a>
</p>
<p>
<a
href="https://www.figma.com/proto/cS8KJ8zQfIbpkOlMna3BsI/Week-12?page-id=0%3A1&type=design&node-id=14001-203&viewport=1324%2C1076%2C0.03&t=5KsztlcCDBQVasr2-1&scaling=contain&mode=design">Date
Methods</a>
</p>
<p>
<a
href="https://www.figma.com/proto/cS8KJ8zQfIbpkOlMna3BsI/Week-12?page-id=0%3A1&type=design&node-id=14001-1351&viewport=1324%2C1076%2C0.03&t=5KsztlcCDBQVasr2-1&scaling=contain&mode=design">Setup
& Draw</a>
</p>
</div>

<div class="space--after-quadruple">
<h4>Assignments</h4>
<ul>
<li class="space--after-double">
<h5><span>Project 3-1: Sketch & Concept</span></h5>
<p class="space--after-single">Sketch out 10-15 distinct
concepts using pen and paper. One sketch should be purely
typographic and one should be purely illustrative. Select
two concepts to move forward with.
</p>
<p class="space--after-single">If your clock has a specific use
case, consider any relevant time intervals. Bring the two
sketches you'd like to move forward with into a digital tool
of your choice (e.g. Illustrator, Figma). The goal is to use
the digital medium to help you visualize the opportunities
within each concept. If you feel like getting ahead, start
to translate your winning idea into code.</p>
</li>
<li class="space--after-double">
<h5><span>Project 3-2: Code & Prototype</span></h5>
<p class="space--after-single">Create a coded draft of your
website using either vanilla Javascript or p5.js. It's
completely up to you which one you'd like to use, though you
are encouraged to try out p5.js. The goal is to create a
working prototype of your clock. This is a great opportunity
to experiment with different ways to display time, and to
explore the possibilities of your concept.</p>
</p>
<p class="space--after-single">If you are running into technical
or code issues, you should consider simplifying the idea to
make it more attainable for yourself.</p>
</li>
</ul>
</div>


<div class="space--after-quadruple">
<h4>Resources</h4>

<ul>
<li>

<a href="https://www.youtube.com/watch?v=74I0M0RKNIE">The
History of Keeping Time</a>

</li>
<li>

<a href="https://www.youtube.com/watch?v=oSSIBM1nEsE">
A Brief History of Timekeeping | How Humans Began Telling
Time | EXPLORE MODE</a>

</li>
<li>

<a href="https://www.youtube.com/watch?v=mjSwRwAqQA4">
A Brief History Of (Keeping) Time</a>

</li>
<li>

<a href="https://www.youtube.com/watch?v=At5atF4mKiU">TimeLine -
A Brief Introduction To The History Of Timekeeping
Devices</a>

</li>
<li>
<a href="https://www.youtube.com/watch?v=OKms5a0nGO4">Who
decides how long a second is? - John Kitching</a></h3>
</li>
<li>
<a href="https://www.youtube.com/watch?v=vIh-3ZKuC3s">How This
Guy Makes the World's Most Inventive Clocks | Obsessed |
WIRED</a></h3>
</li>
<li>
<a href="https://www.youtube.com/watch?v=DwF5E9x5Muk">Award-Winning
Short Film - 'AFRICAN TIME' - By Chapl</a></h3>
</li>
<li>
<a href="https://www.youtube.com/watch?v=PXiyqWnixqo">Telling
Time - A History of Timekeeping</a></h3>
</li>
<li>
<a href="https://www.youtube.com/watch?v=OaYMK2n9Aow">A brief
History of the Calendar and Time Keeping</a></h3>
</li>
<li>
<a
href="https://developer.mozilla.org/en-US/docs/Web/API/setInterval">setInterval()
global function</a></h3>
</li>
<li>
<a
href="https://developer.mozilla.org/en-US/docs/Web/API/setTimeout">setTimeout
global function, MDN Web Docs</a></h3>
</li>
<li>
<a href="https://www.w3schools.com/js/js_dates.asp">JavaScript
Date Objects - W3 Schools</a></h3>
</li>
</ul>
</div>
</article>

0 comments on commit f4f9bd7

Please sign in to comment.