Arhivi Kategorije: Programiranje

Grafika na spletni strani, Javascript in HTML5

Objavljeno ,

Matematik želi prikazati matematično grafiko na zaslonu, po možnosti na spletni strani in -še bolj zaželjeno – po možnosti dinamično. Na začetku je te prikaze sprogramiral sam. Nato pa je bila v preteklih desetletjih razvita vrsta orodij, od tistih za prikaz grafov do orodij za modeliranje, ki se uporabljajo namensko npr. v strojništvu, gradbeništvu.  Programiranje je domala izginilo, sploh pa iz šol.  Slovenske firme danes vneto iščejo programerje, v glavnem brezuspešno. Nekatere jih morajo celo uvažati iz vzhodnih držav.

Sam sem se z dijaki precej ukvarjal z računalniško grafiko, najprej v strem dobrem Turbo Pascalu v operacijskem sistemu DOS, pod Okni pa v nadaljevanju Pascala  – programu Delphi. Dijaki so znali napisati samostojne grafične aplikacije, pretežno simulacije fizikalnih pojavov, in ti programi so se preko orodja Activex dali zaganjati tudi preko spleta. Napredno za tiste čase ob koncu tisočletja, a tudi povezano s težavami. Brskalnik je moral imeti varnostne nastavitve znižane, Delphi pa je bil plačljiv program in je kar nenadoma izginil, skupaj s svojo različico Kilix za Linux.

Sredi prejšnjega desetletja sem na nekem seminarju opazoval predavatelja, kako uspešno je zganjal grafiko na spletni strani z običajnim Javascriptom. Prikaz mi je bil zelo všeč, dosti manj pa koda. Sem pač scrkljan tako od Pascala in Delphija, da ko slišim C++, skoraj dobim ošpice, največ, kar lahko še prezvečim, je Python. Poleg tega se mi je zdelo, da uporablja trike iz CSS. Kljub temu sem napisal nekaj kratkih programov v Javascriptu, pa jih tudi hitro pozabil zaradi obilice drugega dela.

Potem pa mi je prišel v roke standard zadnje verzije HTML-ja, torej HTML 5.0. Podpirajo ga vsi moderni brskalniki, pa tudi mobilne priprave. Postal sem pozoren na njegovo podporo grafiki in sklenil sem, da spet poskusim. Tole je (s pomočjo priročnika seveda) pravkar ratalo. Ni bogvekaj in nič ne miga, je pa dokaz, da se da:

<html>
<head>
	<style type="text.css">
		canvas {border: 1px solid black}
	</style>
</head>
<body>
<h3>Moja prva grafika v HTML5</h3>
<canvas id="mycanvas" width="800" height="500"></canvas>
<script language ="Javascript">
var canvas = document.getElementById('mycanvas');
var c = canvas.getContext('2d');
c.fillStyle="red";
c.fillRect(0,0,20,10);

c.lineWidth=1;
c.beginPath();
c.moveTo(0,100);
c.lineTo(201,100);
c.stroke()

c.beginPath();
c.moveTo(100,0);
c.lineTo(100,120);
c.stroke()

for (i=-100;i<100;i++)
{
c.fillStyle="black";
c.lineColor="red";
c.lineWidth=3;
c.beginPath();
c.moveTo(i+100,100-i*i/100);
c.lineTo(i+101,100-i*i/100);
c.stroke()
}
</script>

</body>
</html>

zgornja koda  nam da naslednji graf kvadratne funkcije:

HTML5 ima navo značko platno <canvas>, na katerega lahko rišemo na spletni strani. Canvas je poznal tudi Delphi, zato  je pojem poznan. Nanj rišemo z ukazi iz Javascripta, kot so drawRect, fill in drawImage.

 

Moja prva grafika v HTML5


Nostalgija(2)

Objavljeno ,

Zadnjič sem pisal o tem, kako je Logo kakor feniks ponovno vstal iz pepela, tokrat v preobleki Pythonove želvje grafike. Nekaj preprostih ukazov , pa vam program lahko riše lepe krivulje. Grafika pa lahko postane nekaj posebnega, če pri njenem nastajanju uporabite rekurzijo – programerski prijem, s katerim velik problem razdelite na identične, a nekoliko manjše probleme. Seveda se to da narediti samo pri posebnih problemih. Včasih smo občudovali Hilbertove krivulje, krivulje Sierpinskega, hanojske stolpiče, celo permutacije se dajo programirati rekurzivno. A tokrat (pogled skozi okno pove, da še vedno sneži) si oglejmo Kochovo snežinko.

Koda je naslednja:

#Kochova snežinka, V.Petruna feb.2013
from Tkinter import *
import math
import turtle
a=80
def koch(x,stopnja):
    if stopnja<1:
        turtle.forward(x)
    else:
        koch(x/3,stopnja-1)
        turtle.left(60)
        koch(x/3,stopnja-1)
        turtle.right(120)
        koch(x/3,stopnja-1)        
        turtle.left(60)
        koch(x/3,stopnja-1)
turtle.heading()
turtle.penup()
turtle.setpos(-600,0)
turtle.pendown()
for n in range(5):    
    for i in range(3):        
        koch(243,n)
        turtle.right(120)
    turtle.penup()
    turtle.forward(243)
    turtle.pendown()
mainloop()

Dolžina 243 ni izbrana naključno, saj je to 3^5. Tako se izognemo napaki zaradi necelega deljenja. Program nam ustvari naslednjo risbico

Vtičnik za QuickLaTeX

Objavljeno ,

Našel sem krasen vtičnik za LaTeX v WordPressu, imenuje se QuickLatex, avtor Pavel Holoborodko.
Pri urejanju je treba edino v html načinu in oglatih oklepajih napisati ukaz latexpage. Več o tem pa na uradni strani vtičnika…
To je test x_{1,2}=\frac{-b\pm\sqrt{b^2-4ac}}{2a}

Spodnjo lepo grafiko pa dobimo preprosto z ukazom:

Rendered by QuickLaTeX.com

Rendered by QuickLaTeX.com

Pa še nekaj za Andreja.
Koda

      \[f(x)=\begin{cases} \frac{1}{2},&x=\frac{1}{n}\wedge n\in \cal{N}\\ \frac{1}{n+1},& \text{sicer} \end{cases}\]

nam da

    \[f(x)=\begin{cases} \frac{1}{2},&x=\frac{1}{n}\wedge n\in \cal{N}\\ \frac{1}{n+1},& \text{sicer} \end{cases}\]