Ohjelmointi

[Jaska]

Emmätiä, mutta luulisin, että jos meillä on viiva joka esittää tien keskiviivaa, niin reuna on kummallakin puolella tien leveyden puolikkaan etäisyydellä kohtisuoraan keskiviivan pisteen tangenttia vastaan

[-:)lauri]

Löysin viivan normaalien laskukaavan ja se vaikuttaa lupaavalta.

[-:)lauri]

https://editor.p5js.org/lazydistribution/sketches/TBG409hmCX


Ainakin simppelin kuvion reunaviivat onnistuu, kun saa viivojen normaaleista suunnan, että mihin päin pitää piirtää reunaviiva kuvion sisäpuolella ja kuvion ulkopuolella. Pitää tosin liitttää toi siihen "sketsiin", jossa kuvio piirretään hiirellä, jotta sitten ihan oikeasti näkee, toimiiko tämä implementaatio. Ei ole suuria toiveita sen suhteen. Toistaiseksi vaikuttaa kuitenkin siltä, että olen ymmärtänyt, kuinka noiden normaalinen kanssa toimitaan. Tosin en ole matemaatikko taikka fyysikko, joten se, miten olen ongelman tässä ratkaissut, voi olla alan ammatilaisten silmissä kamala.

[-:)lauri]

Olen css-ohjelmoinnissa täysi turisti. Olen nyt tantrajoogannut kaksi työpäivää simppelin pdf-tiedoston kanssa tuloksetta. Serverillä pyörii Domphp-kirjasto, joka konvertoi html-koodin pdf-tiedostoksi, tukien jossain määrin paremmin css-tyylejä kuin toinen vastaava TCPDF-kirjasto. Molemmat ovat täysiä susia, mitä tulee tarkkojen määritysten säätämiseen html-tyyleillä, jos kohta todennäköisempää, etten vain osaa CSS-tyylien määrittelyjä tarpeksi hyvin Domphp-vaatimusten näkökulmasta.

Pitäisi jakaa sivu neljään yhtä suureen osaan ja sitten asemoida sisältö neljään keskenään samanlaiseen lokeroon niin, että vaihtuvien tietojen paikat kussakin lokerossa on määritelty. Kyseesssä on postikorttitulostusta varten tulostettava arkki. Arkille siis menee neljä korttia. Saan homman toimimaan selaimessa, mutta en ilmeisesti css-ohjelmointitaidoissani olevien aukkojen vuoksi niin, että Domphp onnistuisi konvertoimaan saman pdf-tiedostoksi.

Sain kasaan kahden päivän aikana yhden version, joka vaikuttaa tulostavan yhden sivun kuten pitääkin, mutta kun tiedostossa voi olla useampia sivuja. Olen yrittänyt ohjelmoida html-koodin ja css-tyylit lukuisia kertoja eri tavoin, mutta homma ei ota edistyäkseen.

Viimeisin oljenkorteni on palata implemataatiooni, joka tulostaa yhden sivun oikein ja kokeilla konvertoida html-tekstiä sivu kerrallaan pdf-tiedostoiksi, ja lopulta yhdistän nuo irtonaiset yhden sivun pdf-tiedostot yhdeksi pdf-tiedostoksi. Tätä pdf-sivujen "mergeämistä" varten latasin libmergepdf-kirjaston ja ensivaikutelma on positiivinen. Seuraava ongelma on kuitenkin se, että pdf-sivun koko on ollut mulla todennäköisesti väärä. Postikorttitulostuksessa sivun koko on erilainen kuin DomPHP-kirjastossa valmiiksi olevat enkä osaa sanoa, onnistuuko tuon yhden sivun generointi oikein enää jos menen sorkkiman kirjaston koodia sivukoon osalta. Kaiken järjen mukaan homman pitäisi olla simppeli, mutta tämä kaksi päivää on osoittanut, että pärehimmelini löytää kuin löytääkin aina vain uuden tavan tuottaa minulle pettymys.

[-:)lauri]

https://editor.p5js.org/lazydistribution/sketches/TBG409hmCX


Ainakin simppelin kuvion reunaviivat onnistuu, kun saa viivojen normaaleista suunnan, että mihin päin pitää piirtää reunaviiva kuvion sisäpuolella ja kuvion ulkopuolella. Pitää tosin liitttää toi siihen "sketsiin", jossa kuvio piirretään hiirellä, jotta sitten ihan oikeasti näkee, toimiiko tämä implementaatio. Ei ole suuria toiveita sen suhteen. Toistaiseksi vaikuttaa kuitenkin siltä, että olen ymmärtänyt, kuinka noiden normaalinen kanssa toimitaan. Tosin en ole matemaatikko taikka fyysikko, joten se, miten olen ongelman tässä ratkaissut, voi olla alan ammatilaisten silmissä kamala.

Joo, ei onnistunut: https://editor.p5js.org/lazydistribution/sketches/l1WvLMcPlb. Sen pitäisi piirtää normaalin mukaan pitkä viiva ja sitten muodostaa piste siihen kohtaan, jossa normaalin mukaan piirretty pitkä viiva leikkaa järjestyksessä seuraavan normaalin mukaan piirretyn pitkän viivan ja lopulta piirtää reunaviiva noiden pisteiden kautta. Joko algoritmissani on feelua, toteutuksessa on feelua tai molemmissa. Täytyy siis jatkaa opintoja.

[-:)lauri]

https://editor.p5js.org/lazydistribution/sketches/TBG409hmCX


Ainakin simppelin kuvion reunaviivat onnistuu, kun saa viivojen normaaleista suunnan, että mihin päin pitää piirtää reunaviiva kuvion sisäpuolella ja kuvion ulkopuolella. Pitää tosin liitttää toi siihen "sketsiin", jossa kuvio piirretään hiirellä, jotta sitten ihan oikeasti näkee, toimiiko tämä implementaatio. Ei ole suuria toiveita sen suhteen. Toistaiseksi vaikuttaa kuitenkin siltä, että olen ymmärtänyt, kuinka noiden normaalinen kanssa toimitaan. Tosin en ole matemaatikko taikka fyysikko, joten se, miten olen ongelman tässä ratkaissut, voi olla alan ammatilaisten silmissä kamala.

Joo, ei onnistunut: https://editor.p5js.org/lazydistribution/sketches/l1WvLMcPlb. Sen pitäisi piirtää normaalin mukaan pitkä viiva ja sitten muodostaa piste siihen kohtaan, jossa normaalin mukaan piirretty pitkä viiva leikkaa järjestyksessä seuraavan normaalin mukaan piirretyn pitkän viivan ja lopulta piirtää reunaviiva noiden pisteiden kautta. Joko algoritmissani on feelua, toteutuksessa on feelua tai molemmissa. Täytyy siis jatkaa opintoja.

Riisuin kaiken !ylimääräisen, eli kirjoitin kokonaan uuden. Nyt jälki on jo ihan tyydytävää: https://editor.p5js.org/lazydistribution/sketches/r60EQ2cVg. Tällä kertaa lasken sivulinjat suoraan normaalien antamista pisteistä (kunhan olen siirtänyt ne keskellä viivoja), sen sijaan, että hifistelisin leikkauspisteiden kanssa kuten edellisellä kerralla tein. Kunhan ei edellytä liian tarkkaa resoluutiota - jota en edellytä - tämä on jo hyvä suoritus. Vaatimuksethan olivat:

• pitää pystyä piirtämään ajorata tekoäyobjektin kulkureitiksi viivoiksi muodostettavin komponentein.
• ajoradan tulee olla esteetön eli että tekoälyllä on mahdollisuus läpäistä se
• ajorata tulee voida olla millainen vain

Vaatimukset ovat tällä erää ainakin tyydyttävästi täytetty, kunhan ei piirrä liian jyrkkiä mutkia. Eli tuo kolmas kohta vielä edellyttää ehkä hiomista. Jos nimittäin piirtää turhan jyrkän mutkan, pisteet menevät ikävästi ristiin ja tulos on ehkä visuaalinen haitta. Tosin minun taidoillani se tulee tehdasasetuksina.


Onko kellään ideoita miten nuo muodostuvat ikävät silmukat liian jyrkissä mutkissa saadaan pois?

[-:)lauri]

^
Jos tossa tekisi niin, että jakaisi pinta-alan ruudukoksi ja piirtäisi pisteet sillä perusteella, missä kohtaa linja leikkaa ruudun jonkun sivun. Jos ruudun yhden sivun linja ylittyy useaman kerran lasketaan noiden kahden ylityskohdan keskiarvo ja käytetään sitä. Tämä näin alustavasti ajateltuna ehkäisisi sitä, että ei pääsisi muodostumaan tilanteita, jossa pisteitä olisi ruudun kokoista aluetta pienempi pisterykelmiä. Koska en nyt äkkiseltään keksi yhtään ongelmatilannetta tässä lähestymistavassa, lienee siinä niitä useampiakin.

[a4]

^ Ei valitettavasti mitään käryä aiheesta. Hiirellä piirtelystä tuli mieleen vain ratkaisu jossa piirretyn viivan paksuutta kasvatetaan halutun tien levyiseksi. Tarvittaessa voidaan piirtää paksun viivan päälle toisella värillä tai kumilla astetta ohuempaa viivaa, joloin syntyy tien reunat.

Ongelmanratkaisu jo itsessään on silti kiehtovaa ja opettavaista.

[-:)lauri]

^
Joo. Tietysti siellä on metodi joka paksuntaa viivan mutta se lisää vain pikseleitä "viivan" molemmin puolin, joten viiva paksunee. Ajatus olisi kuitenkin saada tuon paksun viivan reunat vektorigrafiikkana. Kun laitan tekoälyä ja/tai evoluutioalgoritmiä noudettavan "formulan" noiden vektorien piitämän polun sisäpuolelle, voin helposti laskea jos ja missä kohtaa räikkönen törmää radan reunoihin.

[a4]

^
Joo. Tietysti siellä on metodi joka paksuntaa viivan mutta se lisää vain pikseleitä "viivan" molemmin puolin, joten viiva paksunee. Ajatus olisi kuitenkin saada tuon paksun viivan reunat vektorigrafiikkana. Kun laitan tekoälyä ja/tai evoluutioalgoritmiä noudettavan "formulan" noiden vektorien piitämän polun sisäpuolelle, voin helposti laskea jos ja missä kohtaa räikkönen törmää radan reunoihin.

Mieluummin Grosjean. Kun ja milloin törmäilee. Siihenhän evoluutio perustuu ja syntyy myös niitä Räikkösiä.
Entäs jos laittaa tekoälyn tai ihmiskuskin pysyttelemään paksun ajolinjan sisäpuolella? Voidaanko helposti laskea kun ja missä kohtaa tekoräikköset ajavat ulos radan reunoista?

Paksummalla lompakolla: World's First Autonomous Racing Series | Roborace

[-:)lauri]

^Esitin pulman stackowerflowssa (https://stackoverflow.com/questions/63749593/how-to-programmatically-draw-a-thick-line-javascript) ja ilmeisesti ongelmani on onnistuttu nyt ainakin määrittelemään yhdensuuntaisten "korkeuskäyrien" laskemiseksi. Tosin haulla "parallel contours" ei tule ainakaan googlehaun kärkeen mitään apuja mitä osaisin ainakaan tältä istumalta.

Tuo kuvapinta-alan ruudukoksi jakaminen ja tarkistaminen, mitkä ruudut ja millä tavalla ottavat osumaa kun kuvio on piirretty vaikuttaisi olevan toistaiseksi parasta mitä internet tarjoaa. Ja ainakin tuo ongelma kulkee nimellä marching squares.

[-:)lauri]

Joo, ei ole löytynyt vastausta. Eli marching squares vaikuttaisi lähestymistavalta. Siinä piirtoalue jaetaan ruudukoiksi ja piirretään viiva sen perusteella ruudun yli, ylittääkö ruudun jokin sen kulmien konfiguraatio raja-arvon. Näitä eri konfiguraatioita on yhteensä 16 kappaleta:


Eli esim. kuten yo kuvan Case 1 -kohdassa, jos raja-arvo ylittyy vain vasemman alakulman kohdalla, piirretään viiva ruudun alimmasta viivasta ruudun vasemman puoleiseen viivaan ja niin edelleen. Lopullinen kuvio määräytyy sen perusteella, millä alueella raja-arvo on ylittynyt.


Tyypillisin esimerkki marching squares -tekniikan hyödyntämisestä on klassisten metapallojen simuloiminen. Interpoloimalla noiden pisteiden sijaintia ruudukon viivoilla, jotka yhdistetään, saadaan riittävän pieniä ruutuja käyttämällä kulmikkaan viivan sijaan pyöreitä muotoja kuten yo-kuvasta näkee (tosin yo-kuvan resoluutio on niin pieni, että pikselit näkyvät, mutta se ei liity marching squares -interpolointiin).

Seuraava ratkaisualgoritmini:
Jotta saataisiin metapallojen sijaan metaviivaa, pitää ensinnäkin piirtoviivan pisteiden kodalla ylityttää raja-arvoja riittävä laajalta alueelta kuvapinta-alueella olevaa ruudukkoa, mikä edustaa siis viivan paksuutta ja toisekseen pitää varmistaa, että piirtoviivalla on riittävän usein pisteitä, jotta raja-arvon ylittävä alue on riittävän tasainen, eikä sellainen perhosen toukkamaisesti piirtoviivan pisteiden kohdalla pullea ja piirtoviivan pisteiden välissä kapea. Tämän jälkeen valitaan, mikä tahansa kuva-alalta löytyvä viiva ja aletaan yhdistelemään viivoja aina seuraavan lähimmän viivan kanssa.

PS. marchin squares on mulla jo valmiina. Siksi ratkaisualgoritmini ei sitä enää sisältänyt)

[-:)lauri]

^

Nyt toi antaa piirtää (https://editor.p5js.org/lazydistribution/sketches/2ZEKC6eFB). Tossa on vielä selkeesti hiomista. Tuossa ei ole interpolaatiota mukana, mikä tekee viivasta kulmikkaan. Tuossa on nyt kaksi vaihtoehtoa. Joko interpoloida noita pisteitä kussakin ruudussa, jolloin kulmat ainakin vähenevät tai sitten käyttää funktiota joka ottaa koko viivan ja pyöristää sen muulla keinoin, jälkimmäinen edellyttäisi, että nuo syntyneet viivat olisivat pisteittensä puolesta järjestyksessä, jossa ne ei vielä ole. Tosin koska saattaa olla tarve värittää ajorata ja ympäristö eri väreillä (silmää miellyttämään) nuo pisteet tulee joka tapauksessa yhdistää eli sitten voi katsoa josko tuon rosoisuuden saisi minimiin. Samaten piirrettäessä ei ole vielä riittävästi pisteitä, että jos piirtäessä kaahailee ei muodostu yhtenäistä kuviota.

[-:)lauri]

^
Nyt on ongelma. Molemmat ääriviivat koostuvat nyt siis pienistä viivoista, jotka ovat keskenään sekaisin samassa listassa. Jotenkin pitäisi nyt kyetä järjestää ääriviivat, omiin listoihinsa ja vieläpä sinä järjestyksessä, kuin ne näyttävät olevan kuvaruudulla.  Kellään ideoita miten?

[-:)lauri]

Vaikuttaa siltä, että homma etenee. Tässä on tarvinnut tehdä hieman kompromissiä sen suhteen, kuinka tarkkaan viivaa seurataan ja kuinka pehmeä viiva rakennetaan. Mun tarttee kyllä tota jotenkin vielä hioa, mutta periaatteessa tämä alkaa riittämään: https://editor.p5js.org/lazydistribution/sketches/2ZEKC6eFB. En keksinyt keinoa tehdä tuota interpolaatiota, joten jouduin turvautumaan viivan pyöristäjään se vie nyt saatanasti aikaa että se muodostaa tuon viivan. Pitää tutkia vielä, miten saan tähän interpolaation. Se lienee nopeampia tapa pyöristää rosoisuus kuin tuo käyttämäni viivan pyöristäjä.

^
Nyt on ongelma. Molemmat ääriviivat koostuvat nyt siis pienistä viivoista, jotka ovat keskenään sekaisin samassa listassa. Jotenkin pitäisi nyt kyetä järjestää ääriviivat, omiin listoihinsa ja vieläpä sinä järjestyksessä, kuin ne näyttävät olevan kuvaruudulla.  Kellään ideoita miten?

Meni saatanasti aikaa, että sain ratkottua tämän pulman. Jos tuota ei olisi ratkaissut, nyt käyttämääni viivan pyöristysfunktiota ei olisi voinut käyttää kun se ei olisi osannut yhdistää oikeita pisteitä toisiinsa kun ne eivät olleet järjestyksessä.

Edit: eivät ne kaikki ole järkässä vieläkään mutta riittävän hyvin kuitenkin.