常連

注目の的

質問力

自己紹介



ど初心者です。読みにくい部分も多いと思いますがお願いします。
pythonのtkinterでシューティングゲームを作っています。

自機（player）が弾丸(playerbullet)を射出する機能を実装中に以下のエラーメッセージが発生しました。

### 実現したいこと

クリックしたときに自機の地点から弾丸を描画し、そのx座標を継続的に増加させたいです。

### 発生している問題・エラーメッセージ

Playerクラスのself.x,self.yをplayerbulletクラスに代入して実行し自機の位置に描画は成功しましたが、shoot関数でself.xを増加させることができません。
self.x,self.yが毎回上書きされているかもしれないです。


一部抜粋したコード↓

 event_x = 200; event_y = 200;
class Player:

    def __init__(self, x, y):
        self.x = x
        self.y = y
        self.draw()

    def draw(self):
        global event_x, event_y
        self.id = can.create_rectangle(self.x, self.y, self.x+20, self.y+70, fill="white")
        if keyPress_D==True and self.y<=900:
            event_y += 15
        if keyPress_U==True and self.y>=50:
            event_y -= 15
        if keyPress_R==True and self.x<=400:
            event_x += 15
        if keyPress_L==True and self.x>=50:
            event_x -= 15
        if click==True:
            self.shooting()

    def shooting(self):
        playerbullet = PlayerBullet(self.x, self.y)


class PlayerBullet:

    def __init__(self, x, y):
        self.x = x
        self.y = y
        self.draw()
        self.shoot()
    def draw(self):
        self.id = can.create_oval(self.x+20, self.y+35, self.x+33, self.y+48, fill="white")

    def shoot(self):
        if self.x >= 0:
            can.move(self.id, 25, 0)
            self.x += 25
            win.after(200, self.shoot)


def gameLoop():
    can.delete("all")
    player = Player(event_x, event_y)


    win.after(50, gameLoop)

gameLoop()

win.mainloop()




一応下記が全コードです。
### 該当のソースコード

import random
from time import sleep
import tkinter as tk
from tkinter import messagebox

keyPress_U = False; keyPress_D = False; keyPress_R = False; keyPress_L = False; click = False; event_x = 200; event_y = 200;

bullet_list = []


#ゲームオーバー
def gameOver():
    messagebox.showinfo("Information", "GAME OVER!")
    exit()

#ゲームクリア
def gameClear():
    messagebox.showinfo("Information", "CONGRATULATIONS!!!!")
    exit()

def rightKeyPress(event):
    global keyPress_R
    keyPress_R = True
def rightKeyRelease(event):
    global keyPress_R
    keyPress_R = False
def leftKeyPress(event):
    global keyPress_L
    keyPress_L = True
def leftKeyRelease(event):
    global keyPress_L
    keyPress_L = False
def upKeyPress(event):
    global keyPress_U
    keyPress_U = True
def upKeyRelease(event):
    global keyPress_U
    keyPress_U = False
def downKeyPress(event):
    global keyPress_D
    keyPress_D = True
def downKeyRelease(event):
    global keyPress_D
    keyPress_D = False
def clicking(event):
    global click
    click = True


class Player:

    def __init__(self, x, y):
        self.x = x
        self.y = y
        self.draw()

    def draw(self):
        global event_x, event_y
        self.id = can.create_rectangle(self.x, self.y, self.x+20, self.y+70, fill="white")
        if keyPress_D==True and self.y<=900:
            event_y += 15
        if keyPress_U==True and self.y>=50:
            event_y -= 15
        if keyPress_R==True and self.x<=400:
            event_x += 15
        if keyPress_L==True and self.x>=50:
            event_x -= 15
        if click==True:
            self.shooting()

    def shooting(self):
        playerbullet = PlayerBullet(self.x, self.y)


class PlayerBullet:

    def __init__(self, x, y):
        self.x = x
        self.y = y
        self.draw()
        self.shoot()

        bullet_list.append(self)

    def draw(self):
        self.id = can.create_oval(self.x+20, self.y+35, self.x+33, self.y+48, fill="white")

    def shoot(self):
        if self.x >= 0:
            can.move(self.id, 25, 0)
            self.x += 25
            win.after(200, self.shoot)



class Enemy:

    def __init__(self, x, y, st):
        self.x = x
        self.y = y
        self.st = st
        self.draw()

    def draw(self):
        self.id = can.create_rectangle(self.x, self.y, self.x+20, self.y+30, fill="white")

    def collision(self):
        enemy_count = 0
        if (self.x-playerbullet.x)**2+(self.y-playerbullet.y)**2<=120 and self.st==1:
            can.delete(self.id)
            self.x = 1200            #要改善
            self.st = 0
        if self.st==1 :
            enemy_count += 1
        if enemy_count == 0:
            gameClear()
            win.destroy(self.id)


class EnemyBullet:

    def __init__(self, x, y):
        self.x = x
        self.y = y
        self.draw()

    def draw(self):
        self.id = can.create_rectangle(self.x, self.y, self.x+20, self.y+30, fill="white")

    def collision(self):
        enemy_count = 0
        if (self.x-player.x)**2+(self.y-player.y)**2<=120:
            can.delete(self.id)
            self.x = 0


win = tk.Tk()
win.title("シューティング")

win.bind("<KeyPress-Right>", rightKeyPress)
win.bind("<KeyRelease-Right>", rightKeyRelease)
win.bind("<KeyPress-Left>", leftKeyPress)
win.bind("<KeyRelease-Left>", leftKeyRelease)
win.bind("<KeyPress-Up>", upKeyPress)
win.bind("<KeyRelease-Up>", upKeyRelease)
win.bind("<KeyPress-Down>", downKeyPress)
win.bind("<KeyRelease-Down>", downKeyRelease)
win.bind("<Button-1>", clicking)

menubar = tk.Menu(win)
win.configure(menu=menubar)
menubar.add_command(label="QUIT", underline=0, command=win.quit)

can = tk.Canvas(bg="black", width=1100, height=720)
can.pack()


def gameLoop():
    can.delete("all")
    player = Player(event_x, event_y)
    enemy = []
    for i in range(3):
        for u in range(3):
            enemy_xy = Enemy(random.randrange(700, 1000, 20), random.randrange(100, 600, 35), 1)
            enemy.append(enemy_xy)

    win.after(50, gameLoop)

gameLoop()

win.mainloop()


**試したこと**

event_xを使わないコードを考えましたがわかりませんでした




python(tkinter)で簡単なシューティングゲームにおいて自機から弾丸を発射したい

### 前提、実現したいこと

HELLO という文字列を、個々の文字がバウンドしているようなアニメーションを表示したい。
実行環境はローカルのブラウザです。


### 発生している問題・エラーメッセージ

アニメーションは開始するが、文字の残像がついてしまう。

### 該当のソースコード

```html,javascript
<div id="container"></div>
<script type="text/javascript">

var cvs = document.createElement("canvas");

cvs.width = 500;
cvs.height = 500;
document.getElementById('container').appendChild(cvs);


var ctx = cvs.getContext("2d");
var gravity = 0.5; 
var bounce = -0.7 
var bottom = 450; 

var text1 = new Text("H",100,250,10);
var text2 = new Text("E",150,250,1);
var text3 = new Text("L",200,250,5);
var text4 = new Text("L",250,250,1);
var text5 = new Text("O",300,250,10);


function Text(t,x,y,vy) {
  var me = this;
  this.x = x;
  this.y = y;
  this.vy = vy;

  this.draw = function(ctx) {
    ctx.font = '50px serif';
    ctx.strokeText(t,me.x,me.y);
  };

  this.render = function(){
    me.vy += gravity;
    me.y += me.vy;

    if (me.y + 20 > bottom) {
      me.y = bottom - 20;
      me.vy *= bounce;
    }   

  me.draw(ctx);
  }
  }

  ctx.clearRect(0, 0, 500, 500);
  ctx.strokeStyle = "black";
  ctx.beginPath();
  ctx.moveTo(0, bottom);
  ctx.lineTo(500, bottom);
  ctx.stroke();
  setInterval(text1.render, 30);
  setInterval(text2.render, 30);
  setInterval(text3.render, 30);
  setInterval(text4.render, 30);
  setInterval(text5.render, 30);
</script>
```

### 試したこと

Text内のrenderで呼び出されているdrawが、文字の描画を行っていることは確認したが、実装のどこに問題点があるかはわからなかった。



JavaScript 文字のバウンドアニメーションに残像がついてしまう

### 前提・実現したいこと

Three.jsを使用しています．
arrowHelperで作成した，キャンバス原点から生える矢印を，指定した座標軸(x,y,z)を中心に回転させるようなものを作成しようとしています(以下の画像は作成途中のものです)．

![イメージ説明](86db36121182bcc309af641dbace2290.png)

後記のソースコードにあるとおり，arrowHelperをgroup2というグループに追加し，そのグループを回転させています(group2.rotation.●の値をいじって回転させています)．
html+cssで作成しているxボタンを押すと，xgate関数が実行されます．
xgate関数では，z軸を中心に，πだけgroup2を回転させます．
実行した結果，この関数は正常に作動しました．

### 発生している問題
新たにhgate関数を作成しようとしています．この関数はy＋x軸を中心にπだけgroup2を回転させるというものです．
rotationの回転軸を変更しようと，新たにThree.Vector3でy＋xに相当するようなベクトルを作成し，rotationの軸に設定しようと試みたのですが，うまくいきませんでした(実行したところ，回転が行われませんでした)．
グループの回転軸を新たに設定し直す方法があれば，ご教授ください．

### 該当のソースコード

該当箇所のみを抽出しています．
```JavaScript
window.addEventListener('load', init);

function init() {

    // シーンを作成
    const scene = new THREE.Scene();

    //カメラ，レンダラー，球，ワイヤ，光源作成は省略

    const group1 = new THREE.Group(); 
    const group2 = new THREE.Group(); 
    scene.add(group1);
    scene.add(group2);
    group2.rotation.x = 0;
    group2.rotation.y = 0;
    group2.rotation.z = 0;

    //ベクトル描画
    const from = new THREE.Vector3(0, 0, 0);
    const to = new THREE.Vector3(0, 1, 0);
    const direction = to.clone().sub(from);
    const length = 250;
    const arrowHelper = new THREE.ArrowHelper(direction.normalize(), from, length, 0xDF013A, 25, 20);
    group2.add(arrowHelper);
   
    function tick() {
        renderer.render(scene, camera); 
        requestAnimationFrame(tick);
    }
    tick();
    
    var flag = 0;

    //xgate関数
    document.getElementById('x').onclick = function xgate(){
       if(flag < Math.PI){
           group2.rotation.z += Math.PI/50;
           flag += Math.PI/50;
           requestAnimationFrame(xgate);
       }else{
           flag = 0;
       }
    }

    //y＋xに相当するベクトルを作成
　　 const yx = new Three.Vector3(1,1,0);

    //問題のhgate関数
    document.getElementById('h').onclick = function hgate(){
        if(flag < Math.PI){
            group2.rotation.yx += Math.PI/50;
            flag += Math.PI/50;
            requestAnimationFrame(hgate);
        }else{
            flag = 0;
        }
    }
}
```

Three.jsで，グループの回転軸を新たに設定したい

オブジェクト指向（OOP）は変更に強い、と一般に言われます。
カプセル化とかいろいろな機能のおかげで、あとから仕様変更する場合などに他に影響が及びにくい、と。

しかし実際には銀行や官公庁の大規模プロジェクトで、システム開発の失敗や遅延、頓挫などをしばしば見聞きします。
それらはおそらくJavaでOOPで開発されているはずです。
失敗や遅延などする理由は、発注元の曖昧な要求や後出しの仕様変更の多発などが想像されます。

でもOOPであれば、少なくとも仕様変更には強いはず。
なのに、なぜ失敗しまくるのでしょうか？
なぜ仕様変更のたびに膨大な影響範囲の調査・テストが必要なのか？ ある一部分の機能を変更するだけなら、そのクラスの単体テストだけでいいんじゃないの？

「OOPは設計が大事。最初の設計がダメだった」という意見が想定されます。
しかし数百億円・数千億円規模のプロジェクトに関わるレベルの人ですら上手な設計が出来ないのであれば、じゃあ一体誰なら上手に出来るのでしょうか？
そう考えるとOOPって机上の空論というか、現実的に「仕様変更に強い」という夢のようなことは期待できないのではないでしょうか？

あと、もしOOPが理論どおりに機能する概念だとしても、開発に延べ何千人も関われば結局グズグズになっていくのではないでしょうか？ 少数精鋭でやったほうが速く安く正確に開発できるのでは？ そもそもなぜ延べ数千人・数万人もの開発者が必要なのか？ 規模がデカいだけで、機能個々のプログラムの内容自体はそんなに難しいものではないでしょう？
初心者に毛が生えたようなSEやプログラマ数千人かき集めるよりも、スーパーハカークラスを超高給で数十人雇ったほうがいいのでは？


質問を整理します。
0. オブジェクト指向は本当に変更に強いのか？
0. なぜOOP開発での失敗例が多発するのか？
0. 失敗例の教訓、改善法はあるのか？
0. なぜ少数精鋭チームで開発しないのか？


その他OOP開発や大規模プロジェクトの失敗等について思うところあればなんでもご意見ください。

大規模開発でオブジェクト指向は本当に変更に強いのか？

タイトルにもあるとおり、
1から100までの数字をそれぞれ1つずつを100個使って、偶数もしくは奇数が4回以上続かないように並べる(配列を作る)アルゴリズムを教えていただきたいです。
例えば
x = [99,1,4,5,2,66,45...]
length(x)
→100
のようなものを作成したいです。
条件にもあるとおり、よくないパターンは
１, 偶数が4回以上続いている(奇数も同様)
x = [77,2,4,3,66,88,42,72]
2, 同じ数値がある(下の例では99)
x = [99,1,4,5,2,66,99...]

同じ数値を使わずに1から100までの数値を使ってランダムな配列を作成することは、組み込み関数(MATLAB)を使ってできますが、良くないパターン1の条件を満たせません。
自分がわかる言語はpythonとmatlabですので、そちらの言語で教えていただくのがベストですが、難しい場合は、言葉で説明していただけると幸いです。

1から100までの数字をそれぞれ1つずつを100個使って、偶数もしくは奇数が4回以上続かないように並べる(配列を作る)アルゴリズム

JavaScriptの質問です。

[こちらの動画](https://youtu.be/DjG3IyCRRSk?t=177)で、
> 「setIntervalの中で関数定義をすると実行するたびに毎回関数を作ることになるので、外に書いたほうがいい」

と言われていました。

つまり、
```Javascript
setInterval(function() {
  // 処理
}, 1000);
```
とすると1秒おきに新しく関数オブジェクトを作ってから実行することになるので、
```Javascript
function myCallback() {
  // 処理
}

setInterval(myCallback, 1000);
```
のように外に切り出すべきということでした。

これは本当でしょうか？
自分は**setIntervalの**実行時に関数オブジェクトが一度だけ作られ、指定ミリ秒ごとにその関数を実行するものと思っていました。
可読性や保守性の面で外に切り出すのはわかるのですが、関数オブジェクトの作成が毎回行われるから外に出すというのは初耳でした。
（一応、関数の代わりに文字列を使う構文では指定時間ごとに文字列をコンパイルして実行するとMDNに書いてありました。）


また、addEventListenerやArray.prototype.forEachではどうなるのでしょうか。
中に関数式を書いてしまうとイベント発火毎や配列反復毎に関数オブジェクトが毎回作られるのですか？

setIntervalのコールバックに関数式を書いたとき、インターバル毎に新しく関数オブジェクトが作られるのか？

現在、RINN.Incという以下のサイトを模写しているのですが、
[リンク内容](https://rinn.co.jp/)

少しスクロールした後に出てくるMEOW　という文字や、一番下あたりで、
MADE FOR CATS,　DESIGNED FOR YOU.という文字がスクロールすると急に浮かび上がってくるのですが、これはパララックス効果という認識であっていますでしょうか？

そして、これを実装していく際には、StickyStack.jsといったプラグイン等を使うのが普通なのでしょうか。それとも普通にjqueryで実装していくのが筋なのでしょうか。

実際にコードを書いていく前の確認として質問をさせていただきました。
詳しい方、どうかよろしくお願い致します。

パララックス効果?及びその実装の流れについて

JavascriptでCanvasを使ったアニメーションのようなものを行う際、setIntervalを使ったループではなく、requestAnimationFrame() でループさせようと考えています。
canvasのそばにボタンが有り、ボタンを押すとアニメーションが実行され、１秒かけて四角形が右に移動します。

```JavaScript
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Canvas</title>
        <script>
        window.addEventListener("load", function(){
            var canvas = document.getElementById("canvas1");
            var context = canvas.getContext("2d");
            var x = 0;

            var button1 = document.getElementById("button1");
            button1.addEventListener("click", function(){
                x = 0;
                var func = setInterval(function(){
                    if(x > 100){
                        clearInterval(func);
                        return;
                    }
                    x += 1;
                }, 10);
            });

            var loop = function(){

                context.clearRect(0, 0, canvas.width, canvas.height);
                y = 30;
                context.fillRect(x, y, 30, 30);
                window.requestAnimationFrame(loop);
            };
            loop();
        });
        </script>
    </head>
    <body>
        <canvas id="canvas1" width="320" height="100"></canvas>

        <p><button id="button1">Button</button></p>
    </body>
</html>
```

しかしこのままでは描画用の requestAnimationFrame() の他に移動のための setInterval() ループが必要になってしまいます。
n秒かけて物体がある地点まで移動するといったアニメーションを行うにはどのようにして FPS が一定でない requestAnimationFrame() のループと同期させれば良いのでしょうか？

requestAnimationFrame()使用時にn秒かけて要素を移動する処理

### 前提・実現したいこと

pythonのbeautiful soupを使ってtwitterのトレンドをスクレイピングしたいです


### 発生している問題・エラーメッセージ
NULL見つからない
```
エラーメッセージ

```python
from bs4 import BeautifulSoup
import requests
import re
url = "https://twitter.com/explore/tabs/trending"

r = requests.get(url)

r.encoding = r.apparent_encoding

soup = BeautifulSoup(r.text, "html.parser")

topic = soup.find("div", class_ ="css-901oao css-16my406 r-poiln3 r-bcqeeo r-qvutc0")

print(topic)
```

```ここに言語名を入力
ソースコード
```

### 試したこと

twiiter apiを使ってみた(403エラーが出たため失敗

### 補足情報（FW/ツールのバージョンなど）

twitter トレンド スクレイピング

###Javascriptで画像を大量に読み込みたい

とある案件でJavascriptで画像を大量に読み込んでThree.jsで処理するものがあり、大量に画像を読み込む時の処理の方法がわからず困っています。

### 該当のソースコード
処理の部分をこんな感じにしましたが画像読みこむ前に次のプログラムに進んでしまいます
```javascript
function action(i) {
    return new Promise( (res) => {
        texture1[i] = new THREE.TextureLoader().load(pic_data[i].src1);//ここと
        texture2[i] = new THREE.TextureLoader().load(pic_data[i].src2);//ここが非同期
        res(texture1[i],texture2[i]);
    });
}

function loop( fn, i, end) {
    return fn(i)
    .then( (te1,te2) => {
        tex1(te1,i);
        tex2(te2,i);
        if ( i < end ) {
            return loop( fn, i+1, end);
        }
        else {
            start();
        }
    });
}
$.ajaxSetup({async: false});
$.getJSON("./pic.json",(data)=>{
    pic_data=data;//画像を配列に格納
    loop(action, 0, pic_data.length );//処理開始
});
$.ajaxSetup({async: true});
```

### 試したこと

Promiseがいいといわれホイホイ使いましたがfor文を使用した時の使い方がわかりません。

### 補足情報（FW/ツールのバージョンなど）

jQuery v3.3.1
Three.js r101

### 参考
[Promiseでループ処理](http://karuta-kayituka.hatenablog.com/entry/2018/01/07/200758)

Javascriptで画像を大量に読み込みたい

見て頂きありがとうございます。
以下のコードをHTMLファイルに書き、ローカルの環境で試していたのですが、
画像（earthmap1k.jpg）が球体に表示されません...

https://ics.media/tutorial-three/material_basic/

初心者なもので、コチラのサイトを見て勉強しているところでしたが...
基本の段階でつまずいてしまいました...

誰かおたすけください.....


```
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js"></script>
	<script>

      // ページの読み込みを待つ
		window.addEventListener('load', init);

		// サイズを指定
		const width = 960;
		const height = 540;

		function init() {
		  // レンダラーを作成
		  const renderer = new THREE.WebGLRenderer({
		    canvas: document.querySelector('#myCanvas')
		  });
		  renderer.setSize(width, height);

		  // シーンを作成
		  const scene = new THREE.Scene();

		  // カメラを作成
		  const camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
		  camera.position.set(0, 0, +1000);

		  // 球体を作成
		  const geometry = new THREE.SphereGeometry(300, 30, 30);
		  // 画像を読み込む
		  const loader = new THREE.TextureLoader();
		  const texture = loader.load('img/earthmap1k.jpg');
		  // マテリアルにテクスチャーを設定
		  const material = new THREE.MeshStandardMaterial({
		    map: texture
		  });
		  // メッシュを作成
		  const mesh = new THREE.Mesh(geometry, material);
		  // 3D空間にメッシュを追加
		  scene.add(mesh);

		  // 平行光源
		  const directionalLight = new THREE.DirectionalLight(0xFFFFFF);
		  directionalLight.position.set(1, 1, 1);
		  // シーンに追加
		  scene.add(directionalLight);

		  tick();

		  // 毎フレーム時に実行されるループイベントです
		  function tick() {
		    // メッシュを回転させる
		    mesh.rotation.y += 0.01;
		    // レンダリング
		    renderer.render(scene, camera);

		    requestAnimationFrame(tick);
		  }
		}
    </script>
</head>
<body>
	<canvas id="myCanvas"></canvas>
</body>
</html>
```

Three.js でテクスチャーが表示されない

下記はリサジュー曲線を描くプログラムで、一応、表示してくれるものを書けたのですが

自分の理想としては、angle（角度）360でパッと表示されるのではなく、
0.5度設定刻みでダラ～というかビロ～ンというか、
ラインが描画されていく様子を楽しみたいのです。

そこでsetTimeoutかなと思い、いろいろ試したのですが
どうしても上手く動いてくれませんでした。

どのように改造すれば良いでしょうか。
ご教授よろしくお願いいたします。

（余談ですが
 やっぱり「a=2,b=5」または「a=3,b=8」が面白いと思います。）


```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Lissajous curve</title>
</head>
<body>
  値a<input id="data1" type="number">
  値b<input id="data2" type="number">
  <input id="drawBtn" type="button" value="描画する"><br>
  <canvas id="xyPlane" width="640" height="580"></canvas>
  <script src="js/main1.js"></script>
</body>
</html>

```

```javascript
document.addEventListener("DOMContentLoaded", () => {
  "use strict";

  let graph;
  const xWidth = 640;
  const xHalf = xWidth / 2;
  const yHeight = 580;
  const yHalf = yHeight / 2;

  function axis2d() {
    graph.strokeStyle = "black";
    graph.beginPath();
    graph.moveTo(0, yHalf);
    graph.lineTo(xWidth, yHalf);
    graph.moveTo(xHalf, 0);
    graph.lineTo(xHalf, yHeight);
    graph.stroke();
  }
  function draw() {
    let angle = 0;
    const a = document.getElementById("data1").value;
    const b = document.getElementById("data2").value;
    graph.beginPath();
    while (angle <= 360) {
      const x = 150 * Math.sin(a * angle * Math.PI / 180);
      const y = 150 * Math.sin(b * angle * Math.PI / 180);
      if (angle === 0) {
        graph.moveTo(xHalf + x, yHalf - y);
      } else {
        graph.lineTo(xHalf + x, yHalf - y);
      }
      graph.strokeStyle = "blue";
      graph.stroke();
      angle += 0.5;
    }
  }

  const xyPlane = document.getElementById("xyPlane");
  if (xyPlane.getContext) {
    graph = xyPlane.getContext("2d");
    axis2d();
  }

  const drawBtn = document.getElementById("drawBtn");
  drawBtn.addEventListener("click", draw);

});

```

（追記）2017-09-04-0:08
分かり難い質問になってしまい、すみません。追記します。

以下の部分で、
angle0.5度でいったん表示、angle1度でまた表示、1.5度で表示、2度で表示・・・
と繰り返せばラインが伸びていく様子が描画されるかな、と思っています。

```javascript
while (angle <= 360) {
  const x = 150 * Math.sin(a * angle * Math.PI / 180);
  const y = 150 * Math.sin(b * angle * Math.PI / 180);
  if (angle === 0) {
    graph.moveTo(xHalf + x, yHalf - y);
  } else {
    graph.lineTo(xHalf + x, yHalf - y);
  }
  graph.strokeStyle = "blue";
  graph.stroke();
  angle += 0.5;
}

```
イメージとしては下から３行目を
  setTimeout(graph.stroke(), 300); とか  setInterval(graph.stroke(), 300);
のようにする感じです。
（あくまでイメージです。これでは動きません。）

それをangle360度まで繰り返せば、
じわじわ伸びるラインが表示されるのではないかと。

もしくは、
while (angle <= 360) {
の360の部分を100にしたり180にしたりすると途中経過が表示されることは分かっているので、ここが引数で渡される関数を作る方法にもチャレンジしましたがダメでした。

いずれにせよ処理を遅延させるメソッドの理解が乏しいようで、
ネット検索で出てくる例文は理解出来たつもりでも、それを真似して組み込むと失敗します。
変更前同様、グラフが一瞬で表示されてしまうか、まったく表示されなくなってしまうか。

この作業中、ESLintには
Don't make functions within a loop. (no-loop-func)
（ループ内で関数を作成しないでください）
と、よく怒られているところです。

グラフの『完成図形』が目的ではなく、
グラフのドットが伸びていく『過程』を見られるようにしたいです。

【canvas要素】2Dグラフをゆっくり表示したい

###前提・実現したいこと
Canvasを使った波のアニメーションを実装したいと考えています。
実装することはできたのですが、これを同じページに複数設置する場合、
どう修正したら良いのかご教示いただきたいです。
（類似の質問は見つけたのですが、私には難しく…）

具体的には下記の項目を実現したいと思っています。
- 同一アニメショーンのCanvasを同一ページに複数設置したい。
- 色をCanvas毎に変更したい。

###該当のソースコード
下記のサイトを参考にしています。
http://sterfield.co.jp/designer/canvasで波のアニメーションを描画する/
→デモ
http://sterfield.co.jp/demo/ninomiya/104/index2.html

```html
<canvas id="sineCanvas" width="800" height="300"></canvas>
```

```javascript
(function () {

var unit = 100,
    canvas, context, canvas2, context2,
    height, width, xAxis, yAxis,
    draw;

/**
 * Init function.
 * 
 * Initialize variables and begin the animation.
 */
function init() {
    
    canvas = document.getElementById("sineCanvas");
    
    canvas.width = document.documentElement.clientWidth; //Canvasのwidthをウィンドウの幅に合わせる
    canvas.height = 300;
    
    context = canvas.getContext("2d");
    
    height = canvas.height;
    width = canvas.width;
    
    xAxis = Math.floor(height/2);
    yAxis = 0;
    
    draw();
}

/**
 * Draw animation function.
 * 
 * This function draws one frame of the animation, waits 20ms, and then calls
 * itself again.
 */
function draw() {
    
    // キャンバスの描画をクリア
    context.clearRect(0, 0, width, height);

    //波を描画
    drawWave('#10c2cd', 0.3, 3, 0);
    drawWave('#43c0e4', 0.4, 2, 250);
    drawWave('#1d82b6', 0.2, 1.6, 100);
    
    // Update the time and draw again
    draw.seconds = draw.seconds + .014;
    draw.t = draw.seconds*Math.PI;
    setTimeout(draw, 35);
};
draw.seconds = 0;
draw.t = 0;

/**
* 波を描画
* drawWave(色, 不透明度, 波の幅のzoom, 波の開始位置の遅れ)
*/
function drawWave(color, alpha, zoom, delay) {
    context.fillStyle = color;
    context.globalAlpha = alpha;

    context.beginPath(); //パスの開始
    drawSine(draw.t / 0.5, zoom, delay);
    context.lineTo(width + 10, height); //パスをCanvasの右下へ
    context.lineTo(0, height); //パスをCanvasの左下へ
    context.closePath() //パスを閉じる
    context.fill(); //塗りつぶす
}

/**
 * Function to draw sine
 * 
 * The sine curve is drawn in 10px segments starting at the origin. 
 * drawSine(時間, 波の幅のzoom, 波の開始位置の遅れ)
 */
function drawSine(t, zoom, delay) {

    // Set the initial x and y, starting at 0,0 and translating to the origin on
    // the canvas.
    var x = t; //時間を横の位置とする
    var y = Math.sin(x)/zoom;
    context.moveTo(yAxis, unit*y+xAxis); //スタート位置にパスを置く
    
    // Loop to draw segments (横幅の分、波を描画)
    for (i = yAxis; i <= width + 10; i += 10) {
        x = t+(-yAxis+i)/unit/zoom;
        y = Math.sin(x - delay)/3;
        context.lineTo(i, unit*y+xAxis);
    }
}

init();
    
})();
```

###試したこと
値を変更・削除したり、類似のものを流用してみたりしましたが、
どうも関数に弱く、丸一日作業が止まってしまいました。

丸投げに近い形で大変心苦しいのですが、
どうぞご教示のほどよろしくお願い致します。

Canvasで複数の箇所に同一アニメーションを設置する方法

react + reduxでcanvasを利用した開発をしています。

諸事情により実際このコードは見せられないのですが、
例えばパーティクルを描画したいと思っているとします。
パーティクルは10000個程度あるものです。
パーティクルの座標を全て配列としてreduxで管理しています。
一つのパーティクルの座標が移動したときに、reduxではimmutableなものを返す必要があると思うので、新しく配列をつくり、返します。

しかし、10000個程度になってくると新しい配列を作るか、そのまま配列の値を変更するかでパフォーマンスの差が出てきます。
なので、配列のコピーなどはなるべくしたくないなと思っています。

また、このパーティクルの配列はDOMを生成するためというわけではなく、canvasに描画するためだけのものです。
そのため、このパーティクルの配列が新しくアップデートされたからといって、DOM更新は必要なく、canvasの再描画を行えばいい話なので、わざわざreduxで管理する旨味もないかもしれません。

（一応ですが、色々なコンポーネントからこのパーティクルの配列の値を使いたい場面があるので、コンポーネント内の変数とかにはできません。）

今の所、reduxで管理するのはやめて、グローバル変数でこの配列だけ管理してみようかと考えていますが、
グローバル変数を使うのには少々抵抗があります。
もしベストな解決方法が思い浮かびましたら、ぜひ教えていただきたいです。
よろしくお願いします。

reduxにおける超長い配列の扱い

pタグを複数作り、各idにカウンタ変数を代入しました。

idから要素を取得しようとしたところ、
document.getElementByIdでは上手くいきましたが、
document.querySelectorでは取得できませんでした。

このような場合はdocument.querySelectorは使えないのでしょうか？

```js
for (let i = 1; i <= 10; i++) {
  const p = document.createElement("p");
  // idをカウンタiの値に設定
  p.setAttribute("id", i);
  p.textContent = i;
  document.body.appendChild(p);

  // カウンタで要素を取得
  console.dir(document.getElementById(i));
  
  // console.dir(document.querySelector(i));

}
```

getElementByIdとquerySelectorの違い

body内に3つのpタグを記述しようとしたところ、1つしか出来ないのですがどのように記述したらよいのでしょうか？

```js
const p = document.createElement("p");

for (let i = 0; i < 3; i++) {
  document.body.appendChild(p);
}
```

複数の要素をbody内に追加する方法を教えてください

### 前提・実現したいこと

Pythonのタートルグラフィック機能を使って八角系のコッホ曲線を描きたいのですが、elseのところをどう弄り続けたらいいかがわからなくなってきましたので、ご教授頂ければ幸いです。

```Python
 from turtle import*
 speed(1)
 
 def line(length,depth):
 if depth == 0:
 forward(length)
 else:
 line(length/3,depth-1)
 left(60)
 line(length/3,depth-1)
 right(120)
 line(length/3,depth-1)
 left(60)
 line(length/3,depth-1)
 left(60)
 
 length = 300
 depth = 3
 line(length,depth)
 done()

```

Pythonでコッホ曲線

jQueryでプルダウンメニューを作成しています。
タブキーで操作した場合に子要素からフォーカスが外れた場合にプルダウンを閉じたいのですが上手くいきません。
下記の例で言うと、タブキーでメニュー2にフォーカスが移動した場合、どのようにしたらメニュー1の下層メニューを閉じられるでしょうか。
スクリプト最後のifのfocusinのあたりがおかしいと思うのですが、正しい書き方がわかりません。
なおプルダウンが閉じている場合にはフォーカスが当たらないようにtabindexもコントロールしています。
まだスクリプト全般に不慣れなので冗長なコードになっていて申し訳ありません。
アドバイスよろしくお願いいたします。

```HTML
<nav>
<ul>
	<li>
		<p class="accordion" tabindex="1">メニュー1</p>
		<ul class="lower">
			<li><a href="#" tabindex="2">下層メニュー</a></li>
			<li><a href="#" tabindex="3">下層メニュー</a></li>
		</ul>
	</li>
	<li>
		<p class="accordion" tabindex="4">メニュー2</p>
		<ul class="lower">
			<li><a href="#" tabindex="5">下層メニュー</a></li>
			<li><a href="#" tabindex="6">下層メニュー</a></li>
		</ul>
	</li>
</ul>
</nav>
```
```CSS
.accordion {
	height: 40px;
	position: relative;
	z-index: 1;
	transition: 0.3s ease-out;
	cursor: pointer;
}
li ul {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	transition: 0.3s ease-in;
	z-index: -1;
}
li ul li {
	height: 0;
	overflow-y: hidden;
	transition: 0.3s ease-in;
}
.accordion.open + ul {
	top: 40px;
}
.accordion.open + ul li {
	height: 40px;
	overflow-y: visible;
}
```
```jQuery
$('nav').on('keypress', '.accordion', function(e){
	if(e.which == 13){
		$ac = $('.open');
		$ac.not(this).each(function(){
			$ac.removeClass('open');
			$(this).next().find('[tabindex]').each(function(){
				$tab = $(this).attr('tabindex');
				$tab = $tab * -1;
				$(this).attr('tabindex',$tab);
			});
		});
		if($(this).hasClass('open')) {
			$(this).removeClass('open');
			$(this).next().find('[tabindex]').each(function(){
				$tab = $(this).attr('tabindex');
				$tab = $tab * -1;
				$(this).attr('tabindex',$tab);
			});
		} else {
			$(this).addClass("open");
			$(this).next().find('[tabindex]').each(function(){
				$tab = $(this).attr('tabindex');
				$tab = $tab * -1;
				$(this).attr('tabindex',$tab);
			});
		}
	}
});

$('nav').on('click', '.accordion', function(){
	$ac = $('.open');
	$ac.not(this).each(function(){
		$ac.removeClass('open');
		$(this).next().find('[tabindex]').each(function(){
			$tab = $(this).attr('tabindex');
			$tab = $tab * -1;
			$(this).attr('tabindex',$tab);
		});
	});
	if($(this).hasClass('open')) {
		$(this).removeClass('open');
		$(this).next().find('[tabindex]').each(function(){
			$tab = $(this).attr('tabindex');
			$tab = $tab * -1;
			$(this).attr('tabindex',$tab);
		});
	} else {
		$(this).addClass("open");
		$(this).next().find('[tabindex]').each(function(){
			$tab = $(this).attr('tabindex');
			$tab = $tab * -1;
			$(this).attr('tabindex',$tab);
		});	
	}
});

$('.lower').on('focusout', function(){
	if(!$(this).focusin()) {
		$(this).prev('accordion').removeClass('open');
	}
});
```

子要素からフォーカスが外れた場合の処理をしたい

```python
import numpy as np
import matplotlib.pyplot as plt
from numpy.lib.type_check import isrealobj

def f1(fai2):
    return fai2

def f2(i,fai1,fai2,bc):
    return (i-np.sin(fai1)-fai2)/bc

a = 0.0
b = 100
N = 10000
h = (b-a)/N
j = 0
bc = 4.0
i = 1.5

t = np.arange(a,b,h)
fai1_0 = 0.0
fai2_0 = 0.0

fai1 = np.empty(N)
fai2 = np.empty(N)
fai1[0] = fai1_0
fai2[0] = fai2_0


while j < N-2:

    print(f'{j=}\t{fai2[j]=:.6f}\t{t[j]=:.3f}')

    k1 = h * f1(fai2[j])
    d1 = h * f2(fai1[j] , fai2[j], i , bc)

    k2 = h * f1(fai2[j] + d1/2)
    d2 = h * f2(fai1[j] + k1/2,  fai2[j] + d1/2 , i, bc)

    k3 = h * f1(fai2[j] + d2/2)
    d3 = h * f2(fai1[j] + k2/2 , fai2[j] +d2/2, i, bc)

    k4 = h * f1(fai2[j] + d3)
    d4 = h * f2(fai1[j] + k3 , fai2[j] + d3 , i, bc)     

    fai1[j+1] = fai1[j] + 1/6 * (k1 + 2 * k2 + 2 * k3 + k4) 
    fai2[j+1] = fai2[j] + 1/6 * (d1 + 2 * d2 + 2 * d3 + d4) 

    if j == N-1:
      break

    j += 1

plt.plot (t,fai2)
plt.xlabel("τ")
plt.ylabel("φ2")
plt.show()
```RCSJモデル
i = sinφ　+ dφ/dτ + βc*d^2φ/dτ^2
を、連立1階常微分方程式に変換し、ルンゲクッタ法を用いてグラフ化するコードです。本来であればサインカーブのようなグラフが出てくるはずなのですが、実際にこのコードをデバックすると、下のような全然違ったグラフが出てきてしまい、完全に行き詰まってしまいました。
どこがおかしいのか自分ではわからず、ご指導いただきたいです。どうかよろしくお願いします。
![イメージ説明](231cef9acbd37f163b3a5e5f9e26e3fb.png)

python　ルンゲクッタ法

### 前提・実現したいこと

XMLHttpRequestを用いてserverにデータを送信することを考え， 下のような実装を行いました．

chromeでは正常に動いたのですが， safariでは以下のようなエラーメッセージがでてしまいます．
テストコードは正常に動いたのですが， 本番のコードに埋め込むとエラーがでてしまいました．．

### 発生している問題・エラーメッセージ

```
XMLHttpRequest cannot load http://XXXXXXXX.php due to access control checks.
```

### 該当のソースコード

```javascript
  //インスタンスを生成
  var xhr = new XMLHttpRequest();

  //送信データ
  var data =
    "time=" + time + "&" + 
　　 //中略
;

  xhr.open("POST", "http://XXXXXXX.php", true);
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  xhr.send(data);
  xhr.abort();
```

```php
<?php
//データを受け取る
$time = $_POST['time'];

//書き込み
$data = ("time:", $time);

//ファイルを生成
$file_name = "test.csv";
$fp = fopen($file_name,'a');
fputcsv($fp, $line);
fclose($fp);

?>
```

### 試したこと

ここに問題に対して試したことを記載してください。

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。