Как нарисовать кривую Лоренца, используя холст при перетаскивании ползунка.Диапазоны слайдера составляют от 0,01 до 2,5.Формула lorenzcurve y = ((x ^ 10) ^ - (- slidervalue));
Как нарисовать кривую Лоренца, используя холст при перетаскивании ползунка.Диапазоны слайдера составляют от 0,01 до 2,5.Формула lorenzcurve y = ((x ^ 10) ^ - (- slidervalue));
Заранее спасибо Фактический результат , Ожидаемый результат
var myCanvas,ctx,xWidthUnit,yWidthUnit;
var getPointsY;
var yPtArr = [];
var xPtArr = [];
var getSliderValue;
$(document).ready(function(){
getPointsX();
myCanvas = document.getElementById("mycanvas");
ctx = myCanvas.getContext("2d");
canvasWidth = myCanvas.width;
canvasHeight = myCanvas.height;
drawSlider();
drawGraphCanvas();
});
var getPointsX = function(){
for(var i=0;i<=100;i++){
xPtArr.push(i)
}
}
var drawSlider = function(){
$("#slider").slider({
min: 0.01,
max: 2.5,
step: 0.01,
ty
slide: function( event, ui ) {
getSliderValue = ui.value;
drawGraphCanvas();
}
});
}
var drawGraphCanvas = function(){
ctx.clearRect(0,0,canvasWidth,canvasHeight);
// x - axis
ctx.beginPath();
ctx.moveTo(50,canvasHeight-50);
ctx.lineTo(canvasWidth-50,canvasHeight-50);
ctx.strokeStyle='red';
ctx.stroke();
// y - axis
ctx.beginPath();
ctx.moveTo(50,canvasHeight-50);
ctx.lineTo(50,50);
ctx.strokeStyle='red';
ctx.stroke();
//x- vertical lines
xWidthUnit = 63;
var curX = 0
for(var i=0;i<10;i++){
curX = curX + xWidthUnit;
ctx.beginPath();
ctx.moveTo(50 + curX,50);
ctx.lineTo(50 + curX,canvasHeight-50);
ctx.strokeStyle='black';
ctx.stroke();
}
//y - horizontal lines
yWidthUnit = 40;
var curY = 0
for(var i=0;i<10;i++){
curY = curY + yWidthUnit;
ctx.beginPath();
ctx.moveTo(50,(canvasHeight-50)-curY);
ctx.lineTo(canvasWidth-50,(canvasHeight-50)-curY);
ctx.strokeStyle='black';
ctx.stroke();
}
// diagonal line
ctx.beginPath();
ctx.moveTo(50,canvasHeight-50);
ctx.lineTo(canvasWidth-50,50);
ctx.strokeStyle='green';
ctx.stroke();
yPtArr = [];
for (i=1;i<xPtArr.length;i++) {
var y = Math.pow(Math.pow(xPtArr[i],10),-(-getSliderValue))
yPtArr.push(y)
}
// lorenzcurves
ctx.beginPath();
ctx.moveTo(50,canvasHeight-50);
for (i=1;i<xPtArr.length;i++) {
ctx.lineTo(xPtArr[i]+50,yPtArr[i]+50);
ctx.strokeStyle='green';
ctx.stroke();
console.log(xPtArr[i] , yPtArr[i])
}
ctx.stroke();
}
#wrapper{
position: absolute;
border: 1px solid grey;
width: 1074px;
height: 620px;
padding: 0;
left: 0;
right: 0;
margin: auto;
}
#canvasContainer{
position: absolute;
border: 1px solid grey;
position: absolute;
border: 1px solid red;
width: 914px;
height: 600px;
left: 40px;
top: 12px;
}
#mycanvas{
position: absolute;
border: 1px solid grey;
top: 20px;
left: 20px;
}
#slider{
position: absolute;
width: 20px;
height: 200px;
left: 860px;
top: 90px;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>canvas</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="wrapper">
<div id="canvasContainer">
<canvas id='mycanvas' width='750' height='500'></canvas>
</div>
<div id='slider'><div>
</div>
</body>
</html>