Fixed hygsvg post.

This commit is contained in:
Joachim 2018-10-10 21:53:44 +02:00
parent fffd6c3724
commit 55517a724e
7 changed files with 99 additions and 37 deletions

View File

@ -1,38 +1,59 @@
<p>
There are a couple of online services that offer the creation of a poster that contains the night's sky at a certain
point in time and space, but they all want to be paid handsomely. So, do it ourselves then! A quick search for input
data resulted in the following database: <a target="_blank" href="https://github.com/astronexus/HYG-Database">https://github.com/astronexus/HYG-Database</a>
data resulted in the following database:
</p>
<p>
After a failed attempt at trying to understand the basics of astronomy I found a concise explanation of how you can
calculate the visible night sky for a specific observer: <a target="_blank"
href="http://jknight8.tripod.com/CelestialToAzEl.html#the%20source%20code">http://jknight8.tripod.com/CelestialToAzEl.html</a>.
I implemented this, quick and dirty, in a Kotlin project (check out <a target="_blank"
href="https://github.com/CountZukula/hygsvg">this
github repository</a> if you want to try it out. The code outputs the following vector images, which I'm pretty
pleased with! They can easily be included in whatever vector image program (Inkscape!) you want to use, which means
you can produce posters of whichever size you desire.
<a target="_blank" href="https://github.com/astronexus/HYG-Database">https://github.com/astronexus/HYG-Database</a>
</p>
<p>
After a failed attempt at trying to understand the basics of astronomy I found a
<a target="_blank" href="http://jknight8.tripod.com/CelestialToAzEl.html#the%20source%20code">concise explanation</a>
of how you can calculate the visible night sky for a specific observer.
I implemented this algorithm, quick and dirty, in a Kotlin project (check out
<a target="_blank" href="https://github.com/CountZukula/hygsvg">my github repository</a> if you want to try it out).
The code outputs a vector image and I'm pretty pleased with the
result. As it's in vector format, it can be easily modified without loss of quality, meaning you can produce posters
of whichever size you desire.
</p>
<p>Below are some sample screenshots. I'm not rendering the full image here, to avoid a slow load of this page, but you
can download an example <a href="https://github.com/CountZukula/hygsvg/blob/master/example/stars.svg">here</a> to open
with your favorite image viewer.</p>
<div class="row">
<div class="col-md-6">
<div class="col-md-12">
<figure class="figure">
<img src="assets/post/ikearefurbish/img/tafel3.jpg" class="figure-img img-fluid rounded"
alt="One of the old planks in contrast to the new ones.">
<figcaption class="figure-caption">One of the old planks in contrast to the new ones.</figcaption>
<img src="assets/post/hygsvg/img/stars1.png" class="figure-img img-fluid rounded"
alt="The whole hemisphere, projected on a circle.">
<figcaption class="figure-caption">The whole hemisphere, projected on a circle.</figcaption>
</figure>
</div>
<div class="col-md-6">
<div class="col-md-12">
<figure class="figure">
<img src="assets/post/ikearefurbish/img/tafel4.jpg" class="figure-img img-fluid rounded"
alt="Sanded down and ready for putting on the protective oil.">
<figcaption class="figure-caption">Sanded down and ready for putting on the protective oil.</figcaption>
<img src="assets/post/hygsvg/img/stars3.png" class="figure-img img-fluid rounded"
alt="Slightly zoomed in ...">
<figcaption class="figure-caption">Slightly zoomed in ...</figcaption>
</figure>
</div>
<div class="col-md-12">
<figure class="figure">
<img src="assets/post/hygsvg/img/stars2.png" class="figure-img img-fluid rounded"
alt="Zoomed in all the way!">
<figcaption class="figure-caption">Zoomed in all the way!</figcaption>
</figure>
</div>
</div>
<p>Most parameters can be easily modified (size of the stars, colors, ...), either by changing some variables or
modifying the code (which should be relatively easy. It's currently possible to have the star's colors correspond to
<p>
Most parameters can be easily modified (size of the stars, colors, ...), either by changing some variables or
modifying the code (which should be relatively easy. It's currently possible to have the stars' colors correspond to
their actual class (if it's known in the database), meaning that the star is blue when hot, and reddish when cool.
Stars are also portrayed bigger when they are more bright in the sky, which made sense to me, as a non-astronomer.</p>
Stars are also portrayed bigger when they are more bright in the sky, which made sense to me, as a non-astronomer.
</p>
<p>
Off to the printer!
</p>

View File

@ -1,24 +1,64 @@
<p>
Dit mag je klasseren onder <em>"Ik wil dit, maar ik wil er niet voor betalen... Dan maar zelf doen!"</em>. Er zijn een
paar betaalde services online die het mogelijk maken om een poster te maken van de sterrenhemel, uitgaande van een
bepaalde locatie op de aarde, op een bepaald moment in de tijd. Om zelf zoiets te maken moet je natuurlijk beginnen
met een leesbare dataset, en na een snelle zoektocht kwam ik uit op de volgende databank (vrij beschikbaar): <a
target="_blank" href="https://github.com/astronexus/HYG-Database">https://github.com/astronexus/HYG-Database</a>.
Er zijn een paar online services die het mogelijk maken om een poster af te drukken met de sterrenhemel op. Niet zo
evident, zo blijkt, aangezien dit wijzigt afhankelijk van de plaats of tijd van observatie. Vond ik tof, maar de
meeste van die services zijn relatief duur. Dan maar zelf doen! Een snelle zoektocht naar input data resulteerde in de
volgende databank:
</p>
<p>
Na een mislukte poging om de basics van astronomie te begrijpen vond ik een beknopte uitleg die uit de doeken deed hoe
je de positie van sterren in het zichtbare stuk van de hemel moet berekenen:
<a target="_blank" href="http://jknight8.tripod.com/CelestialToAzEl.html#the%20source%20code">http://jknight8.tripod.com/CelestialToAzEl.html</a>.
Ik heb dit, hopelijk correct genoeg, geimplementeerd in Kotlin (check <a target="_blank"
href="https://github.com/CountZukula/hygsvg">deze
github repository</a> als je het zelf wil uitproberen). De code maakt een vector afbeelding die je later kan verwerken
in, bijvoorbeeld, een poster, met gelijk welke software die kan omgaan met een SVG afbeelding (en in gelijk welk
formaat, aangezien het een vector afbeelding is).
<a target="_blank" href="https://github.com/astronexus/HYG-Database">https://github.com/astronexus/HYG-Database</a>
</p>
<p>
De meeste parameters kan je gemakkelijk aanpassen, zoals de grootte en kleuren van de sterren, ofwel door een
variabele aan te passen of even in de code te duiken.
Na een gefaalde poging om de basics van astronomie te begrijpen vond ik een
<a target="_blank" href="http://jknight8.tripod.com/CelestialToAzEl.html#the%20source%20code">mooie uitleg</a>
van de berekening van de locatie van de sterren voor een specifieke locatie. Dit heb ik snel (en vuil) geimplementeerd
in een Kotlin project, dat je kan vinden op
<a target="_blank" href="https://github.com/CountZukula/hygsvg">mijn github repository</a>. De code produceert een
vector afbeelding (SVG formaat) die je verder kan verwerken naar je eigen noden, en aangezien het een vector
afbeelding is kan je op
grote afmetingen printen zonder verlies van kwaliteit.
</p>
<p>
Beneden staan een paar voorbeeld screenshots. De volledige SVG afbeelding render ik hier niet om te voorkomen dat de
pagina te traag laadt, maar je kan een voorbeeld
<a href="https://github.com/CountZukula/hygsvg/blob/master/example/stars.svg">hier</a> downloaden om te openen met je
favoriete programma om vector afbeeldingen te verwerken of bekijken.
</p>
<div class="row">
<div class="col-md-12">
<figure class="figure">
<img src="assets/post/hygsvg/img/stars1.png" class="figure-img img-fluid rounded"
alt="The whole hemisphere, projected on a circle.">
<figcaption class="figure-caption">De hele hemisfeer, geprojecteerd op een cirkel.</figcaption>
</figure>
</div>
<div class="col-md-12">
<figure class="figure">
<img src="assets/post/hygsvg/img/stars3.png" class="figure-img img-fluid rounded"
alt="Light ingezoomd ...">
<figcaption class="figure-caption">Light ingezoomd ...</figcaption>
</figure>
</div>
<div class="col-md-12">
<figure class="figure">
<img src="assets/post/hygsvg/img/stars2.png" class="figure-img img-fluid rounded"
alt="Zoomed in all the way!">
<figcaption class="figure-caption">... en helemaal ingezoomd!</figcaption>
</figure>
</div>
</div>
<p>
De meeste parameters kunnen gemakkelijk aangepast worden (grootte van de sterren, kleuren, ...), ofwel door een
variabele in de code aan te passen, of in de code te duiken (die relatief simpel te lezen zou moeten zijn). Het is
momenteel mogelijk om de kleur van een ster te laten overeenstemmen met de temperatuur (of klasse van de ster), als
deze gekend is in de databank: blauw voor een hete star, rood voor een koude. Sterren worden ook groter afgebeeld als
ze feller zijn, en kleiner als ze flauw zijn. Dat hield toch steek voor mij, als astronomie leek.
</p>
<p>
Naar de printer!
</p>

View File

Before

Width:  |  Height:  |  Size: 133 KiB

After

Width:  |  Height:  |  Size: 133 KiB

View File

Before

Width:  |  Height:  |  Size: 80 KiB

After

Width:  |  Height:  |  Size: 80 KiB

View File

Before

Width:  |  Height:  |  Size: 104 KiB

After

Width:  |  Height:  |  Size: 104 KiB

View File

@ -1,4 +1,5 @@
{
"created_timestamp": 1539198696.0825138,
"languages": [
"en",
"nl"
@ -10,4 +11,4 @@
"en": "An SVG firmament!",
"nl": "Een SVG firmament!"
}
}
}

View File

@ -1 +1 @@
[{"id": "first", "info": {"created_timestamp": 1515094679.342938, "title": {"en": "Who said Web 1.0 was dead anyway?", "nl": "Omdat ik het Web 1.0 tijdperk gemist heb..."}, "tags": ["blog"], "languages": ["nl", "en"]}}, {"id": "phdpresentation", "info": {"created_timestamp": 1522255558.864005, "languages": ["en", "nl"], "tags": ["tech"], "title": {"en": "Presentation of my PhD public defence", "nl": "Publieke doctoraatsverdediging - presentatie"}}}, {"id": "ikearefurbish", "info": {"created_timestamp": 1525895500.2597992, "languages": ["nl", "en"], "tags": ["project"], "title": {"en": "Better together!", "nl": "Eindelijk samen!"}}}, {"id": "beamerprototype", "info": {"created_timestamp": 1526328948.8972409, "languages": ["nl", "en"], "tags": ["project"], "title": {"en": "No more television!", "nl": "Geen televisie meer!"}}}, {"id": "beamer", "info": {"languages": ["nl", "en"], "tags": ["project"], "title": {"en": "Long live the prototype!", "nl": "Lang leve het prototype!"}, "created_timestamp": 1529827943.7910142}}]
[{"id": "first", "info": {"created_timestamp": 1515094679.342938, "title": {"en": "Who said Web 1.0 was dead anyway?", "nl": "Omdat ik het Web 1.0 tijdperk gemist heb..."}, "tags": ["blog"], "languages": ["nl", "en"]}}, {"id": "phdpresentation", "info": {"created_timestamp": 1522255558.864005, "languages": ["en", "nl"], "tags": ["tech"], "title": {"en": "Presentation of my PhD public defence", "nl": "Publieke doctoraatsverdediging - presentatie"}}}, {"id": "ikearefurbish", "info": {"created_timestamp": 1525895500.2597992, "languages": ["nl", "en"], "tags": ["project"], "title": {"en": "Better together!", "nl": "Eindelijk samen!"}}}, {"id": "beamerprototype", "info": {"created_timestamp": 1526328948.8972409, "languages": ["nl", "en"], "tags": ["project"], "title": {"en": "No more television!", "nl": "Geen televisie meer!"}}}, {"id": "beamer", "info": {"created_timestamp": 1529827943.7910142, "languages": ["nl", "en"], "tags": ["project"], "title": {"en": "Long live the prototype!", "nl": "Lang leve het prototype!"}}}, {"id": "hygsvg", "info": {"languages": ["en", "nl"], "tags": ["tech"], "title": {"en": "An SVG firmament!", "nl": "Een SVG firmament!"}, "created_timestamp": 1539198696.0825138}}]