Canvas Javascript

thijmen2610

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.

jip_rietveld

Hoi hoi @thijmen2610

Heb je het stuk code voor me wat de lijnen tekent, ik gok dat je er een gebogen lijnen functie zal zijn in Javascript maar weet ik niet zeker.. Als je je code stuurt kan ik zien waarom die een rommeltje rechte lijnen tekent en daarop gebaseerd verder helpen.

Groetjes,
Jip

thijmen2610

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.

thijmen2610

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.

jip_rietveld

Hoi hoi,

Ik moet zeggen dat ik niet de beste ben in JavaScript. Ik zie dus ook niet direct de fout hier in de code.Wel heb ik de volgende code online gevonden:

function buildSineWave(amplitude)
{
    //---mask fill bottom of circle
    var startPoint=[0,400]
    var endPoint=[400,400]

    var originX=0
    var percent=parseFloat(percentSelect.options[percentSelect.selectedIndex].value)
    var originY=400*(1-percent)

    var width=400
    var pointSpacing=1
    var angularFrequency=.02
    var phaseAngle=90

    var origin = { //origin of axes
    x: originX,
    y: originY
    }

    var points=[]
    points.push(startPoint)
    var x,y
    for (var i = 0; i < width/pointSpacing; i++)
    {
        x= i * pointSpacing + origin.x
        y= Math.sin(angularFrequency*(i + phaseAngle)) * amplitude + origin.y
        points.push([x,y])
    }
    points.push(endPoint)
    sineWave.setAttribute("points",points.join(" "))
}

function animateSineWave()
{
    var range=60 //--amplitude +/- ---
    var FPS=120  //---frames per second---
    var duration=2000 //---ms, 2 seconds---
    //----core animation function---
		new AnimateJS(
		{
			delay: 1000/FPS,
			duration: duration,
			delta: linear,
			output: function(delta)
			{
                if(delta<=.5)
                var amplitude=range*delta
                else
                var amplitude=60-range*delta

                buildSineWave(amplitude)
                if(progress==1)//---run again---
                    animateSineWave()
			}
		})

}

(Je kan dit soort stukken code sturen door "```" om de code heen te doen [zonder "])

Dit komt van hier ik weet niet zeker of je daar wat aan hebt. Hopelijk wel.

Anders loop je misschien tegen hetzelfde probleem aan als degene die hier met iets soortgelijks bezig is.

Ik hoop dat deze 2 bronnen je verder helpen, voor de rest is internet je grote vriend! Als je je probleem in het engels googled kom je vaak genoeg op plekken uit waar mensen tegen dezelfde problemen aan lopen.

Groetjes,
Jip