Att göra en solnedgång i php, html, css och jquery, hur?

2009-08-25 02:14

Permalänk

JesperA

Medlem ★

Plats: Halmstad
Registrerad: Apr 2003

●

Att göra en solnedgång i php, html, css och jquery, hur?

Jao tja!

Är sjukskriven och rastlös så jag har en massa tid över till onödiga projekt och nu har jag bestämt
mig för att göra en solnedgång på en hemsida, eller inte enbart en solnedgång utan hela solens rörelse!

Test 1)
Körde först lite PHP som har 24st (för solen ska gå i en båge, inte horisontellt är för enkelt) if och else satser som hämtar timman på dygnet och kör lite CSS baserat på resultatet.
Ovanpå det använde jag animate funktionen i jQuery med från-till positionering i CSS!

Skitnöjd var jag och satt och beundrade verket och solen som vandrare över skärmen, ända tills jag gjorde
en refresh, börjar ju självklart om då om inte man navigerar på sidan exakt en gång i timmen, drygt surfande!

Test 2)
Skiter i solen och kör olika nyanser på bakgrunden som stämmer överens med himlens färger under dagen,

Funkar bra men är inte lika effektfullt utan sol, dessutom måste större delen av färgerna i CSS:en ändras för att se bra ut, svart bakgrund och svart text fungerar inte så bra, blir jobbigt att uppdatera!

Test 3)
Här är jag nu, börjar att kombinera båda ovanstående testerna men för att råda bot på test 1 problemet så har
nog ni redan listat ut vilken väg jag är påväg mot, jag vill ha en vandrande, inte hackande sol vid den timmen
ändringen sker.

Har man 24 CSS:er som i test 1 och utan animeringen i jQuery så hoppar solen 60px (med min bärbara dators fulla upplösning) vilken jag inte godkänner, hoppet är typ lika bred som solen

Den mjukaste rörelsen som användaren inte direkt ser är 1px/minut samma distans som ovan fast mer
steg emellan, men ni som är bra på matte har redan kommit på att detta kräver, 1440 else/if satser och
1440 CSS:er.

Hur i helskotta ska man orka göra 1440 helt olika CSS:er, kanske 24 olika bakgrunder, sen hur lång tid tar det att gå igenom 1400 if/else satser för att komma till dom sista minutrarna på dygnet?

Någon smart snubbe/brud som kommer på någon vettig lösning?

Visa signatur

Hur kan syltkakor överleva i det vilda utan ögon?

Rapportera Redigera

Citera flera Citera

2009-08-25 08:22

Permalänk

Teknocide

Medlem ★

Registrerad: Sep 2007

●

Citat:

Hur i helskotta ska man orka göra 1440 helt olika CSS:er, kanske 24 olika bakgrunder, sen hur lång tid tar det att gå igenom 1400 if/else satser för att komma till dom sista minutrarna på dygnet?

Kort och gott: det gör du inte. Jag tycker t.o.m. det är overkill att använda 24 if-satser som du gör nu.

På ett dygn har du 24 timmar == 1440 minuter == 86400 sekunder. Ponera att vi vill ha en riktigt mjuk rörelse över skärmen, mjuka färgövergångar osv. En uppdatering var femte sekund låter rimligt (tycker jag.) Vi delar därför 86400 med 5 == 17280. Detta blir en timestamp som PHP-servern skickar till oss varje gång sidan uppdateras.

Ok, 17280 "unika stadier av hemsida".

Om vi delar en full cirkel (360 grader) med 17280 får vi en förskjutning på lite drygt 0,0208 grader per "tick". Detta är alltså hur mycket solen förflyttas varje gång vi uppdaterar dess position. Gissningsvis vill du att solen ska försvinna under horizonten för att dyka upp på andra sidan skärmen 12 timmar senare så när vår timestamp går över ett visst värde gömmer vi solen med CSS (på samma sätt håller vi solen dold tills vår timestamp har nått ett tröskelvärde). Hela denna process sker client side.

För att solen ska röra sig i en båge använder du en enkel matematisk formula som beskriver en cirkulär slinga, samt position: fixed för att den inte ska kunna scrolla iväg. Bakgrundsfärgen löser du på samma sätt: välj en färg för midnatt, en färg för gryning, en färg för middag och en färg för skymning. Låt timestampen avgöra var emellan dessa värden sidan befinner sig och interpolera fram en exakt nyans.

Visa signatur

Kom-pa-TI-bilitet

Rapportera Redigera

Citera flera Citera

2009-08-25 16:16

Permalänk

matti4s

Medlem

Plats: @home
Registrerad: Maj 2005

●

du kan ju ändra cssen med innerhtml

Visa signatur

I'm Winston Wolfe. I solve problems.

Rapportera Redigera

Citera flera Citera

2009-08-25 16:31

Permalänk

KentRoyal

Medlem

Plats: Jönköping
Registrerad: Mar 2002

●

(Det kan hända att jag glider ut på lite djupt vatten nedan)

Om du vill ha en flytande solnedgång känns det ganska onödigt att blanda in PHP över huvud taget.
Det bästa vore väl att med hjälp av javascript göra någon slags kurva (andragradspolynom?) där startpunkten bestäms av den nuvarande tiden och allt beräknas i realtid. På så sätt borde du ju kunna flytta "sol-objektet" till den plats där den ska vara hela tiden.

Man kan väl även tänka att bakgrundsfärgen byts inom en visst hex-kod intervall så den går genom det färgmönster du vill ha.

Visa signatur

"Knowledge amplification. What he learns, we all learn. What he knows, we all benefit from."

Rapportera Redigera

Citera flera Citera

2009-08-25 16:42

Permalänk

Teknocide

Medlem ★

Registrerad: Sep 2007

●

jag tänkte att PHP skulle användas för att hämta en timestamp från servern, så att solen alltså representerar server time.. fast det kanske inte var så viktigt.

Visa signatur

Kom-pa-TI-bilitet

Rapportera Redigera

Citera flera Citera

2009-08-25 22:58

Permalänk

JesperA

Medlem ★

Plats: Halmstad
Registrerad: Apr 2003

●

Tack så mycket för svaren

Har suttit och pillat lite, försöker minimera koden så mycket det går och här är jag nu:

<?php

$time = date('G');
$minutes = ($time * 60 );
$arc = ($time * 6);

 ?>

<style>
#sol { width: 40px; height: 40px; background: green; position: absolute; bottom: <?php echo $arc ?>px; left: <?php echo $minutes ?>px; }
</style>

<div id="sol"></div>

Funkar snisigt; men som ni ser går skiten från botten vänstra hörnet och snett uppåt till höger, går ju lägga in if($time >= '05' and $time < '08') { echo $arc } blal lblllllalalsfdksakfdsjh

MEEEEEEEEEEN pathen blir ju pyramidformad istället för i en båge :S, måste ju lägga in en exponensiell ekvation och det har jag inte någon matematisk kunskap till :S

Visa signatur

Hur kan syltkakor överleva i det vilda utan ögon?

Rapportera Redigera

Citera flera Citera

2009-08-25 23:19

Permalänk

fluxor

Medlem

Plats: Malmö
Registrerad: Aug 2007

●

vad jag får det till när jag sitter o leker med min grafräknare är en ekvation i stil med
$max_heit*Sin(1,8*$time) nu är den så pass dålig att den börjar i vänstra hörnet och slutar i högra dvs.. ingen natt... men säg vilka tider du vill ha så kan jag nog leka fram en bättre åt dig. Exvationen har en ruta som är 100x100.. dvs du kan positionera solen med % och du den vill ha $time i % så du får räkna ut hur många procent av dagen som gått:D

Visa signatur

O o
/¯¯/_o___o___o___o____o__
\__\¯¯o¯¯¯o¯¯¯¯¯¯o¯¯¯¯¯¯o I'M FIREIN MY LAZER!

Rapportera Redigera

Citera flera Citera

2009-08-25 23:58

Permalänk

JesperA

Medlem ★

Plats: Halmstad
Registrerad: Apr 2003

●

Schysst fluxor
Jag tänkte lägga upp det såhär:

Origon ligger centrerad horisontellt och i botten av hemsidan, alltså övre halvan för dagtid och undre halvan ligger ju neranför (ej synligt) hemsidan, annars får jag ju börja på ett minusvärde (lodrät) så solen inte "ploppar" upp hela sin storlek när skiftningen från nedgång till uppgång sker!

Eftersom då Zenit (12 på dagen, hypotetiskt) är rakt ovanför origos orginalplacering så behövs ju ett minusvärde (horisontellt) av placeringen mellan tidpunken 06.00-12.00 för att sen efter zenit ha ett normalvärde (utan -)

Eller komplicerar detta ekvationen för mycket? Tänkte använda pixelvärden från origo på en total diameter av 1440px, alltså radie på -720px till 720px horisontellt.

Dagen är alltså indelad i 4 zoner om 6 timmar (beräknad för senhöst typ), solen syns från 06.00 (nedre vänstra hörnet) till 18.00 (nedre högra hörnet), resten av tiden beräknas som natt, går ju fixa med time_difference om man vill justera sommarhalvåret!

Ursäkta om mina förklaringar är luddig men jao skäll på mig lite så ordnar vi det

Edit: Är jag trög eller finns det inget sätt att räkna ut vilken minut på dygnet det är med hjälp av PHP?

Senast redigerat 2009-08-26 00:46

Visa signatur

Hur kan syltkakor överleva i det vilda utan ögon?

Rapportera Redigera

Citera flera Citera

2009-08-26 09:15

Permalänk

azoapes

Medlem