ik heb dit weekend nog even naar mijn code gekeken, en ik zie nu pas hoe onoverzichtelijk het is. Ik zal de kern van het probleem even wat makkelijker formuleren. Ik gebruik nu deze code voor mijn javascript:

var canvas = document.querySelector('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var ctxt = canvas.getContext('2d');

var x;
var y;
var STARTi=0 - canvas.width/2 ;
var MAXi = 1800;
var yOffset = canvas.height/2;
var xOffset = canvas.width/2;

//X-Axis

ctxt.beginPath();
ctxt.setLineDash([5, 15]);
ctxt.moveTo(0, canvas.height/2);
ctxt.lineTo(canvas.width, canvas.height/2);
ctxt.strokeStyle = "rgba(169,169,169)"
ctxt.stroke();

//Y-Axis
ctxt.beginPath();
ctxt.setLineDash([5, 15]);
ctxt.moveTo(canvas.width/2, 0);
ctxt.lineTo(canvas.width/2, canvas.height);
ctxt.strokeStyle = "rgba(169,169,169)"
ctxt.stroke();

function xCoord(a){

return a;

}

function yCoord(a){

return -0.5*(a*a);
}

x = xCoord(STARTi);
y = yCoord(x);
ctxt.beginPath();
ctxt.moveTo(x+xOffset,y+yOffset)

for(i=STARTi; i<MAXi; i++){

ctxt.moveTo(x+xOffset,y+yOffset)
x = xCoord(i);
y = yCoord(x);
ctxt.lineTo(x+xOffset,y+yOffset)

ctxt.strokeStyle = "black"
ctxt.setLineDash([0, 0]);
ctxt.stroke();
}

Het gaat goed zolang ik normale formules invul voor Ycoord, maar zodra ik met sinussen ga werken wordt het een rare functie die weinig laat zien van bijvoorbeeld een normale sinus functie. Aangezien ik een sinus in de formule voor een lisjajous figuur heb staan is het wel van belang dat deze sinus normaal wordt gezien door de code. Ook ben ik er nog niet uit hoe ik de figuren in mijn grafiek een mooie bocht moet geven. Maar als ik bijvoorbeeld een parabool of wortel functie wil tekenen dan laat hij deze wel met een redelijke bocht zien, maar bij de oude code (waar ik nu achter ben gekomen dat het echt een bende is, want die had ik met behulp van een ander forum in elkaar gezet), laat hij wel een normale sinus zien, maar zodra het een andere formule wordt gaat het weer mis.

Alvast bedankt voor de hulp.

De code die ik nu gebruik voor javascript is:

var canvas = document.querySelector('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var ctxt = canvas.getContext('2d');
ctxt.save();

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var i;
for(i=0; i<720; i+= 20){
ctx.moveTo(i+5,360);
ctx.lineTo(i,360);

}
ctx.stroke();
var a = 9;
var b = 9;
var K = 10;
var L = 100;
var counter = 0, x=0,y=360;

var add = 90/180*Math.PI / 500;
var i = 0;

drawStep();
0
function drawStep() {

 ctx.moveTo(x+250,y);
x =  (K*Math.sin(a*i +Math.PI/2))*10;
y =  (360 - L*Math.sin(b*i));

counter += add;

ctx.lineTo(x+250,y)
ctx.stroke();

i += 1;
if (i <= 20) {
    window.setTimeout(drawStep, 40);
}

}

het html gedeelte is:
<canvas id="myCanvas" width="720" height="720" style="border:1px solid #d3d3d3;">
<script src="canvas.js"> </script>

Ik hoop dat je hier wat aan hebt, want ik heb zelf ook al een flinke tijd er wat van proberen te maken, maar tervergeefs.

EDIT: Er is inderdaad ook een gebogen lijnen functie in javascript genaamd de arc functie, maar deze heeft bepaalde waardes nodig, maar ik heb er nog geen vaste op variabele waarde voor kunnen vinden die ervoor zorgt dat de lijn netjes loopt.

Hallo, ik ben bezig met een applet aan het maken van Lissajous figuren. Deze applet moet deze figuren gaan tekeken op basis van waardes die door de gebruiker verandert kunnen worden. Ik heb al een klein opzetje, maar als ik de figuren wil tekeken, krijg ik alleen maar rechte lijnen die naar elkaar toe gaan. Hoe kan ik ervoor zorgen dat mijn tekening gebogen lijnen krijgt zodat het echt gaat lijken op een Lissajous fijguur ipv een rommeltje rechte lijnen.

Alvast bedankt,
Groetjes Thijmen.