2019年5月9日木曜日

学習環境

ラング線形代数学(上)(S.ラング (著)、芹沢 正三 (翻訳)、ちくま学芸文庫)の4章(線形写像と行列)、2(線形写像に対応する行列)、練習問題7の解答を求めてみる。


  1. x ' = x cos θ + y sin θ y ' = - x sin θ + y cos θ

コード(Emacs)

HTML5

<div id="graph0"></div>
<pre id="output0"></pre>
<label for="r0">r = </label>
<input id="r0" type="number" min="0" value="2">
<label for="dx">dx = </label>
<input id="dx" type="number" min="0" step="0.001" value="0.001">
<br>
<label for="x1">x1 = </label>
<input id="x1" type="number" value="-5">
<label for="x2">x2 = </label>
<input id="x2" type="number" value="5">
<br>
<label for="y1">y1 = </label>
<input id="y1" type="number" value="-5">
<label for="y2">y2 = </label>
<input id="y2" type="number" value="5">
<br><label for="theta0">θ = </label>
<input id="theta0" type="number" value="1.5">
(<input id="x0" type="number" value="1">, <input id="y0" type="number" value="2">)

<button id="draw0">draw</button>
<button id="clear0">clear</button>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.6/d3.min.js" integrity="sha256-5idA201uSwHAROtCops7codXJ0vja+6wbBrZdQ6ETQc=" crossorigin="anonymous"></script>

<script src="sample7.js"></script>

JavaScript

let div0 = document.querySelector('#graph0'),
    pre0 = document.querySelector('#output0'),
    width = 600,
    height = 600,
    padding = 50,
    btn0 = document.querySelector('#draw0'),
    btn1 = document.querySelector('#clear0'),
    input_r = document.querySelector('#r0'),
    input_dx = document.querySelector('#dx'),
    input_x1 = document.querySelector('#x1'),
    input_x2 = document.querySelector('#x2'),
    input_y1 = document.querySelector('#y1'),
    input_y2 = document.querySelector('#y2'),
    input_theta = document.querySelector('#theta0'),
    input_x0 = document.querySelector('#x0'),
    input_y0 = document.querySelector('#y0'),
    inputs = [input_r, input_dx, input_x1, input_x2, input_y1, input_y2,
              input_theta, input_x0, input_y0],
    p = (x) => pre0.textContent += x + '\n';

let fns = [];

let draw = () => {
    pre0.textContent = '';

    let r = parseFloat(input_r.value),
        dx = parseFloat(input_dx.value),
        x1 = parseFloat(input_x1.value),
        x2 = parseFloat(input_x2.value),
        y1 = parseFloat(input_y1.value),
        y2 = parseFloat(input_y2.value),
        theta = parseFloat(input_theta.value),
        x0 = parseFloat(input_x0.value),
        y0 = parseFloat(input_y0.value),
        x01 = x0 * Math.cos(theta) + y0 * Math.sin(theta),
        y01 = -x0 * Math.sin(theta) + y0 * Math.cos(theta)

    console.log(x0, y0, x01, y01);
    if (r === 0 || dx === 0 || x1 > x2 || y1 > y2) {
        return;
    }    

    let points = [],
        colors = ['red', 'green', 'blue', 'orange', 'brown',
                  'purple', 'brown', 'pink', 'skyblue', 'gray'],
        lines =  [[0, 0, x0, y0],
                  [0, 0, x01, y01]]
        .map((line, i) => line.concat([colors[i]]));

    console.log(points);
    fns
        .forEach((o) => {
            let [f, color] = o;
            for (let x = x1; x <= x2; x += dx) {
                let y = f(x);

                points.push([x, y, color]);
            }
        });
    
    let xscale = d3.scaleLinear()
        .domain([x1, x2])
        .range([padding, width - padding]);
    let yscale = d3.scaleLinear()
        .domain([y1, y2])
        .range([height - padding, padding]);

    let xaxis = d3.axisBottom().scale(xscale);
    let yaxis = d3.axisLeft().scale(yscale);
    div0.innerHTML = '';
    let svg = d3.select('#graph0')
        .append('svg')
        .attr('width', width)
        .attr('height', height);

    svg.selectAll('line')
        .data([[x1, 0, x2, 0], [0, y1, 0, y2]].concat(lines))
        .enter()
        .append('line')
        .attr('x1', (d) => xscale(d[0]))
        .attr('y1', (d) => yscale(d[1]))
        .attr('x2', (d) => xscale(d[2]))
        .attr('y2', (d) => yscale(d[3]))
        .attr('stroke', (d) => d[4] || 'black');

    svg.selectAll('circle')
        .data(points)
        .enter()
        .append('circle')
        .attr('cx', (d) => xscale(d[0]))
        .attr('cy', (d) => yscale(d[1]))
        .attr('r', r)
        .attr('fill', (d) => d[2] || 'green');
    
    svg.append('g')
        .attr('transform', `translate(0, ${height - padding})`)
        .call(xaxis);

    svg.append('g')
        .attr('transform', `translate(${padding}, 0)`)
        .call(yaxis);

    [fns].forEach((fs) => p(fs.join('\n')));
};

inputs.forEach((input) => input.onchange = draw);
btn0.onclick = draw;
btn1.onclick = () => pre0.textContent = '';
draw();








(, )

1 コメント :

دريم هاوسさんのコメント...

افضل شركة تنظيف منازل بالرياض http://great.social/theme8 شركة تنظيف بيوت بالرياض
سرعان ما تتعرض البيوت لانتشار الشوائب والأتربه والاتساخات الخطيرة ؛لذلك فكافه أجزاء البيوت تحتاج الى أعمال تنظيف دورية ومستمرة ؛فالبيوت من اثاث سواء مجالس أو غرف نوم أو سفر أو صالونات تحتاج الى أعمال تنظيف ؛كما تتمكن شركة تنظيف منازل من القيام بأعمال تنظيف البيوت ومكافحة الحشرات وتنظيف الخزانات وكشف تسربات الماء وغيرها من الأجزاء الأخرى ؛لذلك من الأن لا داعى للقلق بشأن أعمال تنظيف البيوت ؛نحن شركة تنظيف بالرياض التى تعتمد على فريق عمل متخصص لديه خبرات واسعه فى القيام بأعمال تنظيف البيوت .

https://sauditourguide.com/%D8%B4%D8%B1%D9%83%D8%A9-%D8%AA%D9%86%D8%B8%D9%8A%D9%81-%D9%85%D9%86%D8%A7%D8%B2%D9%84-%D8%A8%D8%A7%D9%84%D8%B1%D9%8A%D8%A7%D8%B6/

تتراكم الأتربه والشوائب فى البيوت مسببة فى تعرض البيوت للعديد من الأمراض الخطيرة التى تؤثر سلبيا على الأفراد ؛فالبيوت تتعرض للنوافذ والشبابيك وغيرها من المنافذ التى سرعان ما تتعرض للعديد من الشوائب والعوالق الخطيرة ؛لذلك يتم الاعتماد على مجموعه من الألات والمعدات الحديثة وأجهزة البخار التى تساعد على التخلص من الشوائب والعوالق سريعا ؛فقط شركة تنظيف منازل بالرياض تعتمد على أحدث وأفضل الأساليب... اقرأ المزيد https://sauditourguide.com/شركة-تنظيف-منازل-بالرياض/

المصدر: شركة تنظيف منازل بالرياض

コメントを投稿