Online Grafieken tekenen

Heb je een leuke tutorial, een duidelijke uitleg van een bepaald onderwerp, een interessante minicursus of heb je een leuk trucje gevonden, post het hier.

Online Grafieken tekenen

Berichtdoor meneer van Hoesel » 19 Mrt 2011, 13:35

Soms is het wel eens handig om een grafiekje te kunnen laten zien. Dat kan natuurlijk door eerst zelf met je eigen middelen een grafiek op de computer te tekenen en die dan ergens op het internet te plaatsen (bijvoorbeeld op het forum) en dan het plaatje te 'embedden' in de post. Maar dat moet dus mooier kunnen en gelukkig zijn er online 'graphers' of 'plotters' die 'on-the-fly' de grafiek voor je tekenen.

Graag zou ik samen met de forumleden een overzicht opstellen van een aantal goede plotters en hoe ze gebruikt kunnen worden op het forum.

Hieronder staat een voorbeeld:

Afbeelding
f₁(x)=sin(x); f₂(x)=cos(x); f₃(x)=tan(x)

En ja, in de code staat een hoop 'abracadabra' maar met een beetje puzzelen komt iemand er wel uit.

Code: Alles selecteren
[img]http://graphsketch.com/render.php?
eqn1_color=1&eqn1_eqn=sin(x)&
eqn2_color=2&eqn2_eqn=cos(x)&
eqn3_color=3&eqn3_eqn=tan(x)&
eqn4_color=4&eqn4_eqn=&
eqn5_color=5&eqn5_eqn=&
eqn6_color=6&eqn6_eqn=&
x_min=-6&x_max=6&y_min=-4&y_max=4&
x_tick=1&y_tick=1&x_label_freq=3&y_label_freq=1&
do_grid=0&do_grid=1&
bold_labeled_lines=0&bold_labeled_lines=1&
line_width=3&image_w=480&image_h=320
[/img]


Mijn streven is naar 'non-flash' en 'non-java', puur en alléén embedded afbeeldingen, in png het liefst

Jullie reakties zijn van harte welkom om tot een mooi overzicht te komen van wat er is en welke opties in de URL worden gebruikt
Laatst gewijzigd door meneer van Hoesel op 19 Mrt 2011, 23:36, in totaal 3 keer gewijzigd.
Gebruikers-avatar
meneer van Hoesel
Vergevorderde
Vergevorderde
 
Berichten: 395
Geregistreerd: 20 Apr 2010, 14:43
Woonplaats: Zwolle

Re: Online Grafieken tekenen

Berichtdoor Sjoerd Job » 19 Mrt 2011, 23:17

Non-Flash, Non-Java, Non-Javascript heeft ook mijn voorkeur. De voorbeeldgrafiek ziet er wel gaaf uit.

Het liefst zou ik iets willen hebben wat op deze server draait, maar ik denk niet dat dat gaat lukken...
``Life is complex. It has real and imaginary parts.''
Sjoerd Job
Admin
Admin
 
Berichten: 1148
Geregistreerd: 21 Jan 2006, 15:09
Woonplaats: Krimpen aan den IJssel

Re: Online Grafieken tekenen

Berichtdoor meneer van Hoesel » 20 Mrt 2011, 12:11

Kijk op Bewijs logaritmische ongelijkheid voor een mooie demo.

De breedte van 624 is een veelvoud van 12 dat dicht bij de 'code-box' afmetingen komt (622 +3 pixels rondom). Daaruit mag al voorzichtig worden opgemaakt dat het kiezen van een horizontale afmeting even een beetje aandacht behoeft; de verticale afmeting is uiteraard afhankelijk van de grafiek.
Gebruikers-avatar
meneer van Hoesel
Vergevorderde
Vergevorderde
 
Berichten: 395
Geregistreerd: 20 Apr 2010, 14:43
Woonplaats: Zwolle

Re: Online Grafieken tekenen

Berichtdoor op=op » 20 Mrt 2011, 14:22

Afbeelding
"root(x,3)^2+/-root(4-x^2,2)"
Gebruikers-avatar
op=op
Vergevorderde
Vergevorderde
 
Berichten: 1096
Geregistreerd: 23 Apr 2010, 18:11

Re: Online Grafieken tekenen

Berichtdoor arno » 20 Mrt 2011, 14:29

@op=op: Het is jammer dat Valentijnsdag inmiddels al voorbij is, anders zou jouw grafiek zeer toepaselijk zijn geweest.
"Mathematics is a gigantic intellectual construction, very difficult, if not impossible, to view in its entirety." Armand Borel
arno
Vergevorderde
Vergevorderde
 
Berichten: 1765
Geregistreerd: 25 Dec 2008, 16:28

Re: Online Grafieken tekenen

Berichtdoor op=op » 20 Mrt 2011, 15:31

Dan maar een scheef hartje
Afbeelding
Gebruikers-avatar
op=op
Vergevorderde
Vergevorderde
 
Berichten: 1096
Geregistreerd: 23 Apr 2010, 18:11

Re: Online Grafieken tekenen

Berichtdoor David » 22 Mrt 2011, 01:51

Dit ziet er erg mooi en nuttig uit!

Voor als je zelf de code van de grafiek wilt construeren.
Ik heb het in ieder geval voor mezelf duidelijker proberen te krijgen, te ontrafelen, maar ik ben er niet helemaal uit.

Er kunnen 6 vergelijkingen worden gemaakt. Je kan er meer geven, dan worden ze niet meer getoond.
Met "grafiek" bedoel ik het geheel, dat opgesplitst is in verschillende eigenschappen.

Afbeelding
Code: Alles selecteren
[img]http://graphsketch.com/render.php?eqn1_color=1&eqn1_eqn=sin(x)&eqn2_color=10&eqn2_eqn=cos(x)&eqn3_color=3&eqn3_eqn=tan(x)&eqn4_color=4&eqn4_eqn=x&eqn5_color=5&eqn5_eqn2x=&eqn6_color=6&eqn12_eqn=3x&eqn6_eqn=9x&eqn7_eqn=4x&eqn8_eqn=5x&eqn9_eqn=6x&eqn10_eqn=7x&eqn11_eqn=8x&x_min=-6&x_max=%2B6&y_min=-4&y_max=%2B4&x_tick=1&y_tick=1&x_label_freq=3&y_label_freq=1&do_grid=0&do_grid=1&bold_labeled_lines=0&bold_labeled_lines=1&line_width=3&image_w=480&image_h=320[/img]

In de code worden 12 vergelijkingen opgeroepen.

Over de code:
meneer van Hoesel schreef:eqn1_color=1&eqn1_eqn=sin(x)&

De grafiek
Hier wordt grafiek van de vergelijking 1 weergegeven als "eqn1" (eqn is de afkorting voor "equation", het engelsetalige woord voor vergelijking).
Die grafiek heeft verschillende eigenschappen. Die eigenschappen staan als "subscript*" achter de vergelijking (eqn).
*Een subscript is een karakter in bijv. een variabele dat lager in de regel staat. In is 1 het subscript, omdat die lager staat in de regel.

De kleur van de grafiek
Een van de eigenschappen is de kleur van de grafiek van de vergelijking/functie. Die wordt gegeven door het engelstalige woord "color" (kleur). De kleuren kunnen vaker dan 1 keer gebruikt worden, tot hoogstens 6 keer, omdat er 6 grafieken gemaakt kunnen worden.

Je kan kleur als variabele zien, die waarden 1 tot en met 6 kan hebben.
Bij elke waarde hoort een kleur. Zie afb. hieronder.

Afbeelding
Onder het getal 1 is de kleur blauw gegeven. Dus als color de waarde 1 krijgt wordt de lijn blauw etcetera voor de waarden 2 tot en met 6.

De vergelijking van de grafiek
Een andere eigenschap van de vergelijking is de vergelijking zelf. Die staat achter "eqnm_eqn=" met m het nummer van de vergelijking (geheel, van 1 t/m 6)
Voor een aantal vergelijkingen is de code hetzelfde als je gewend kan zijn bij het opschrijven. Denk aan bijv.
goniometrische formules, logaritmische formules en lineaire functies (evt onderling vermenigvuldigd).

Voor een aantal functies kan het anders zijn dan gewend.
Voor functies of getallen met machten, 2^x, 3^5, wordt, net als ik hier deed, een dakje gebruikt voor de exponent. Dat is ook zo in LateX. Voor de constanten pi en e, typ pi en e.

Voor de (gehele >1?) machtswortels wordt root(x,y) gebruikt, met als resultaat een grafiek van

Het domein van de grafiek
Wordt gegeven door "x_min=" voor de laagste x-waarde van de grafiek en "x_max=" voor de hoogste x-waarde van de grafiek.

Het bereik van de grafiek
Wordt gegeven door "y_min=" voor de laagste y-waarde van de grafiek en "y_max=" voor de hoogste y-waarde van de grafiek.

De dikte van de lijn van de grafiek
De dikte van de lijn van de grafiek staat aangegeven achter "line_width=" waar de dikte wordt gegeven in pixels. Het aantal pixels in de grafiek is het dubbele aantal van het getal achter "line_width=". Dus de grafiek onder "line_width=4" is 2*4=8 pixels dik.

Nummering van de assen
De nummering van de assen wordt bepaald door het getal achter "x-tick=" en "y-tick=" voor de x- en y- as respectievelijk. Het getal, bijv. 2 geeft aan na hoeveel stappen de waarde van het x-coördinaat op de x-as en het y-coordinaat op de y-as wordt weergegeven. In het voorbeeld om de 2, dus ...., -4, -2, 0, 2, 4, .... als ze in het domein resp. bereik zijn opgenomen. Frequenties voor het geven van waarden op de x- en y-as kunnen onafhankelijk ingesteld worden.

definities achter elkaar
In de code worden verschillende eigenschappen van de grafiek gedefinieërd. Die definities worden gescheiden door het symbool voor "en", "&"
Voorbeeld:
Code: Alles selecteren
eqn1_color=1&eqn1_eqn=0.5

De definitie voor de eigenschap "kleur" en de definitie voor de eigenschap "vergelijking" worden gescheiden door "&".

Url
Let op: de code die geschreven wordt, wordt een url. Urls bevatten geen spaties, gebruik tussendoor dus niet de enter-toets en de spatiebalk op het toetsenbord; dan wordt geen grafiek weergegeven. Zet om de url heen de img-tags.
Code: Alles selecteren
[img][/img]


Om wat typwerk te besparen, kan worden gekopiëerd uit code. Maak eventueel een lijstje om uit te kopiëren.
Stap 1 van het oplossen van een probleem is te erkennen dat je een probleem hebt.
(Raffiek Torreman)
David
Moderator
Moderator
 
Berichten: 4935
Geregistreerd: 14 Mei 2009, 16:22

Re: Online Grafieken tekenen

Berichtdoor meneer van Hoesel » 22 Mrt 2011, 10:39

Helaas.... FooPlot.com is wel mooi om mee te werken, en doet heel veel rekenwerk in de browser, maar uiteindelijk biedt het de mogelijkheid om het plaatje op de computer te bewaren nadat het door de server met 'te veel' data is gevoed.

De zoektocht gaat verder
Gebruikers-avatar
meneer van Hoesel
Vergevorderde
Vergevorderde
 
Berichten: 395
Geregistreerd: 20 Apr 2010, 14:43
Woonplaats: Zwolle

Re: Online Grafieken tekenen

Berichtdoor David » 22 Mrt 2011, 19:32

Dan bent u wel snel van mening veranderd over http://graphsketch.com/render.php.
Ik vind het wel prettig om mee te werken, maar ik ben benieuwd naar verdere mogelijkheden.

Veel plezier met zoeken
Stap 1 van het oplossen van een probleem is te erkennen dat je een probleem hebt.
(Raffiek Torreman)
David
Moderator
Moderator
 
Berichten: 4935
Geregistreerd: 14 Mei 2009, 16:22

Re: Online Grafieken tekenen

Berichtdoor meneer van Hoesel » 23 Mrt 2011, 00:19

David schreef:Dan bent u wel snel van mening veranderd over http://graphsketch.com/render.php.
Ik vind het wel prettig om mee te werken, maar ik ben benieuwd naar verdere mogelijkheden.

Veel plezier met zoeken

Mijn mening over Graph Sketch is nog ongewijzigd. Het is goed en voor uiteenlopende doelstellingen geschikt, maar het wil niet zeggen dat het het enige en beste middel is. FooPlot is dus niet geschikt voor het 'dynamisch' opnemen van afbeeldingen.

De speurtocht naar alternatieven blijft nog even doorgaan. Als anderen toevallig ook nog goede links weten waarbij de afbeelding 'on the fly' gegenreerd wordt, laat het svp horen.
Gebruikers-avatar
meneer van Hoesel
Vergevorderde
Vergevorderde
 
Berichten: 395
Geregistreerd: 20 Apr 2010, 14:43
Woonplaats: Zwolle

Re: Online Grafieken tekenen

Berichtdoor David » 23 Mrt 2011, 15:55

Ok, dan heb ik u verkeerd begrepen. Wat misschien nuttig is, is een lijstje waarop staat wat gewenst is van de plotter. Dat kan ook helpen met het zoeken; door de zoektermen.
Stap 1 van het oplossen van een probleem is te erkennen dat je een probleem hebt.
(Raffiek Torreman)
David
Moderator
Moderator
 
Berichten: 4935
Geregistreerd: 14 Mei 2009, 16:22

Re: Online Grafieken tekenen

Berichtdoor FlorianK » 29 Mrt 2011, 23:05

Ik blijf groot fan van Geogebra (http://www.geogebra.org) (Java). Die is zowel als webapplicatie (applet start) te starten, als te 'installeren' op de computer (webstart). En is helemaal gratis.

Waarom ben ik fan? Omdat je zowel meetkundige figuren als grafieken kunt laten plotten. Je kunt er ook variabelen in opgeven, met een schuifbalkje. Als je dan in een functie die variabele opneemt kun je door eenvoudig te schuiven in het schuifbalkje de functie aanpassen. (kan erg handig zijn om te 'zien' wat een bepaald getal nou eigenlijk doet in een functie)

Wat kun je qua meetkunde? Voor de kenners; dit is vergelijkbaar met Cabri, maar dan netter, gebruiksvriendelijker en iets uitgebreider.
Je kunt dus in het platte vlak tekenen en alle constructies maken die je normaal gesproken ook met passer en lineaal kunt maken.

Wil je meetkundige figuren in 3d maken, waarbij je de tekening wilt kunnen draaien, dan raad ik Google SketchUp aan.
FlorianK
Nieuw lid
Nieuw lid
 
Berichten: 6
Geregistreerd: 21 Mrt 2011, 14:21

Re: Online Grafieken tekenen

Berichtdoor meneer van Hoesel » 30 Mrt 2011, 10:31

Het gaat mjn niet zozeer om een programma of een hulpmiddel waarmee ik een plaatje kan maken. Daar zijn middelen genoeg voor. Wat ik wil is een overzicht van 'services' die 'on the fly' een grafiek voor mij tekenen. Zoals bijvoorbeeld 'CodeGogs' doet voor het omzetten van 'elementaire LaTeX' naar een afbeelding in .png of .gif; als je wil laten zien, dan is dat ook niks anders dan:
Code: Alles selecteren
http://latex.codecogs.com/png.latex?\lim_{h\to0}\frac{f(x+h)-f(x)}{h}

Zo wil ik dus ook onderstaande afbeelding kunnen maken, 'on the fly' [img]http://graphsketch.com/render.php?eqn1_eqn=-1/3x^2%2b2x-1&x_min=-3&x_max=9&y_min=-5&y_max=3&image_w=480&image_h=320[/img]
Code: Alles selecteren
http://graphsketch.com/render.php?
eqn1_eqn=-1/3x^2+2x-1

Simpel, gewoon een 'render URL' + de formule ... eventueel gevolgd door 'meta data' voor het aansturen van de plotter, zodat je weet waar er getekend moet worden
[img]http://graphsketch.com/render.php?eqn1_eqn=-1/3x^2%2b2x-1[/img]

Dat is vooral handig op een forum, of andere web pagina's waar 'even een afbeelding' ingevoegd moet worden.

Nog mooier zou het zijn... een BB-Plugin die in HTML5-Canvas (géén Java, géén Flash) tekent en nog enige interactie mogelijk maakt zoals een grafische rekenmachine... in- en uit zoomen, tracen van een grafiek, dat is beter voor leerlingen
Gebruikers-avatar
meneer van Hoesel
Vergevorderde
Vergevorderde
 
Berichten: 395
Geregistreerd: 20 Apr 2010, 14:43
Woonplaats: Zwolle


Terug naar Tutorials en Minicursussen

Wie is er online?

Gebruikers in dit forum: Geen geregistreerde gebruikers en 2 gasten

Wie is er online?

Er zijn in totaal 2 gebruikers online :: 0 geregistreerd, 0 verborgen en 2 gasten (Gebaseerd op de gebruikers die actief waren gedurende 5 minuten)
De meeste gebruikers ooit tegelijkertijd online was 649 op 31 Okt 2014, 18:45

Gebruikers in dit forum: Geen geregistreerde gebruikers en 2 gasten
Copyright © 2009 Afterburner - Free GPL Template. All Rights Reserved.