P5.js(生活コード)

4009 ワード
テキストリンク

P 5の世界に入る


https://p5js.org/ko/get-started/
cdnを使用してインターネット上のファイルをダウンロードする
  • 初稼働のタスクは---setup
    アニメーションのように、繰り返しの作業は--drawで表現します.
    • function setup() {
    createCanvas(400, 800);
    background('gray');
    }
    400,800サイズのキャンバスを作りました.背景色はグレーです.
    circle(x,y,サイズ);--げんせいせい
    point(x,y); ---ポイントの作成
    rect(100100100)---1000位置で生成された100100サイズの箱.
  • 色を入れるには、絵を描いた後ではなく、絵を描いた前に塗りつぶすべきです.
    fill('red');
    rect(100,100,100);

    • 色を減らしたいなら
    noFill();
    rect(200,100,100);

    枠線
    stroke('blue');
    strokeWeight(10);

    fillの詳細--fill(r,g,b,a)

    アニメーション

  • drawにより繰り返し実施する.
  • サイズで、位置はランダムに円を作成します.
    ループ+random
    circle(random(400),random(400),random(100));
    一つの円を横に移動させたいなら.
  • function setup() {
    createCanvas(400, 400);
    x = 0; y =0;}
  • function draw() {
    background(220);
    x = x+10; y= y+5;
    circle(x,y,100);}
  • バックグラウンドでは、初期化のたびにx、y軸に移動します.
  • キャンバスのサイズをスクリーンサイズに設定する場合は、Canvas(窓幅、窓の高さ)を作成します.
    マウスの位置による円の作成

    function draw() { circle(mouseX,mouseY,100);}
    条件文制御の使用
    「if」(mouseIsPressed){}も使用できます.
    function mousePressed() {background(1,1,1);}クリックすると背景色が黒くなります.

    上の円は互いにつながっていない.今それらをつなぎましょう.
    従来のマウス位置はpmouse X(prefer)で表すことができた.
    次にラインを使用
    line(pmouseX,pmouseY,mouseX,mouseY);

    マウスがゆっくり動くと、小さな円が形成され、速く動くと大きな円が形成されます.
    ピタゴラスの定理である雨辺の長さを用いる.
    平方--pow()--pow(3,2)は3の2平方の9です.
    平方根は--sqrt()
    function draw() {
    px=pow(mouseX-pmouseX,2)
    py=pow(mouseY-pmouseY,2)
    speed = sqrt(px+py);
    circle(mouseX, mouseY,speed);
    }

    三角関数で表します。



    1弧度==57度
    circle(Math.cos(0)200,Math.sin(0)200,10);
    半径200の単位円.
    circle(Math.cos(1)size,Math.sin(1)size,10);
    点は57度1弧のところにあります.
    より明確な角度で憧れを表現する
    function degreeToRad(degree)
    {
    return degree * Math.PI/180;
    関数を}に設定します.
    circle(Math.cos(degreeToRad(100))size,
    Math.sin(degreeToRad(100))size,10);
    で終わる.
    次に、三角関数を使用して角度別に円を作成し、大きな円を描くコードを書きます.
    function setup() {
  createCanvas(windowWidth,windowHeight);
    background('black');
    size = 200;
  degree =0;
}
function degreeToRad(degree)
{
  return degree * Math.PI / 180;
}
function draw() {
  translate(width/2,height/2);
  circle(0,0,10);
  degree = degree +1;
  rad = degreeToRad(degree);
  circle(Math.cos(rad)*size,Math.sin(rad)*size,10);
}
    角度を1つ増やし、それに応じて円を作成します.結果は.

    生活コードp 5写生大会


    https://www.google.com/url?q=https://docs.google.com/spreadsheets/d/178cIAH4C-UlYHQ24oWLW9DK7Bg91GLTOKnPYd1cXqFQ/edit?usp%3Dsharing&sa=D&source=editors&ust=1650184981880832&usg=AOvVaw2HBToq96fEcpM34w_cO39s
    • 復号解題ノードを学習します.js
    (Ajax)サーバにGET,POSTを要求する