3D-s canvas javascript - egyszeri projekt

3D-s canvas javascript - egyszeri projekt
2018-01-16T18:34:27+01:00
2018-01-16T18:34:29+01:00
2022-10-19T05:40:36+02:00
  • Sziasztok!

    Szeretnek egy ilyen szimulaciot javascriptben:
    YouTube

    A vegeredmeny kb. igy nezzen ki - csak mukodjon minden esetben/rendessen  :)
    Ami a youtube videon nem lathato: x tavolsagonkent (plant_distance) rakjon koroket (atmero: plant_diameter) a vonalakra

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Simulation</title> <script type="text/javascript"> var center_point = -400.5; var heading_error = 0; var plant_distance = 30; var plant_diameter = 10; var row_width_resolution = 1; var row_width = 10; var zoom = 50; function draw_rows() { var logo_width = Math.abs(20 * center_point/1000); logo_width = Math.max(10, logo_width); logo_width = Math.min(80, logo_width); document.getElementById('tractor').style.left = 400-logo_width/2 + 'px'; document.getElementById('tractor').width = logo_width; ctx.clearRect(0, 0, c.width, c.height); var x = 400 * Math.cos(heading_error*Math.PI/180) ; var y = center_point * Math.sin(heading_error*Math.PI/180) ; for (i = -100; i < 100; i++) { ctx.beginPath(); ctx.moveTo(400+x, y); ctx.lineTo(400 - i * row_width*row_width_resolution + 0.5, 500); ctx.stroke(); } } </script> </head> <body style="background:gray; margin:0px;"> <div>3D: <input id="three_d" type="range" min="-5000" max="-100" oninput="center_point=this.value;draw_rows();" /></div> <div>Row width:<input id="row_width" type="range" min="10" max="50" step="0.2" oninput="row_width=this.value;draw_rows();" /></div> <div>Heading error:<input id="heading_error" type="range" min="-180" max="180" oninput="heading_error=this.value;draw_rows();" /></div> <div>Plant distance:<input id="plant_distance" type="range" min="10" max="500" oninput="plant_distance=this.value;draw_rows();" /></div> <img id="tractor" src="tractor.png" style="position:absolute; left:390px; top:300px;" width="20" /> <canvas id="myCanvas" width="800" height="400" style="border:0px solid #000000;background:white;"></canvas> <script type="text/javascript"> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); document.getElementById("three_d").oninput(); </script> </body> </html>

    Arajanlatokat privatban varom.

    Koszi,
    Szotyi
    Mutasd a teljes hozzászólást!
Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd