p5.jsを使用してレスポンシブなウィンドウとシェイプを試す

JSチュートリアル（p5.jsを使用）を使用していて、4つのシェイプのレスポンススクリーンをコーディングしながらdop5.jsを使用してレスポンシブなウィンドウとシェイプを試す

yの個別の変数を十分に定義しているか、新しい変数xとyですべての形状を再定義する方がよいでしょうか？あなたは、

まず：あなたは2つのことを行う必要がある

function setup() { 
 
    createCanvas(window.innerWidth, window.innerHeight); 
 
} 
 

 
function draw() { 
 
    background(200); 
 
    noStroke(); 
 

 
    var labelw = window.innerWidth/8; 
 
    var labelh = labelw/4; 
 
    var sectionw = window.innerWidth; 
 
    var sectionh = window.innerHeight; 
 

 
    //red 
 
    if(window.innerWidth/2<window.innerHeight){ 
 
    fill(200, 50, 50); 
 
    rect(0, 0, sectionw/2, sectionw/4) 
 
    } 
 

 
    //blu 
 
    if(window.innerWidth/2<window.innerHeight){ 
 
    fill(50, 50, 200); 
 
    rect(sectionw/2, 0, sectionw/2, sectionw/4) 
 
    } 
 

 
    //grn 
 
    if(window.innerWidth/2<window.innerHeight){ 
 
    fill(130, 230, 130); 
 
    rect(0, sectionh/2, sectionw/2, sectionw/4) 
 
    } 
 
    //prp 
 
    if(window.innerWidth/2<window.innerHeight){ 
 
    fill(190, 100, 230); 
 
    rect(sectionw/2, sectionh/2, sectionw/2, sectionw/4) 
 
    } 
 

 
    //label1 
 
    fill(50) 
 
    rect (0,0,labelw,labelh) 
 
    fill(255); 
 
    textSize(labelw/10); 
 
    text("Test Label\nTestIdeo, 19xx-20xx",0,0,200,200); 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/p5.js"></script> 
 
<html> 
 
    <head></head> 
 
    <body></body> 
 
</html>

出典

2017-11-05 Oliver Leak

：

私のコードを使用する正しいコードでなければなりませんように幅ウィンドウの高さ/はです画面がリサイズされたときを検出し、キャンバスのサイズを変更する必要があります。 windowResized()とresizeCanvas()の機能が便利です。詳細はthe referenceを参照してください。

第2に、widthとheightという変数を使用して図形を描画するだけです。 widthとheightの変数は、キャンバスのサイズを変更すると自動的に更新されます。一緒にすべてを置く

、それは次のようになります。

function setup() { 
    createCanvas(windowWidth, windowHeight); 
} 

function draw() { 
    fill(255, 0, 0); 
    rect(0, 0, width/2, height/2); 

    fill(0, 255, 0); 
    rect(width/2, 0, width/2, height/2); 

    fill(0, 0, 255); 
    rect(0, height/2, width/2, height/2); 

    fill(255, 255, 0); 
    rect(width/2, height/2, width/2, height/2); 
} 

function windowResized() { 
    resizeCanvas(windowWidth, windowHeight); 
}

出典

2017-11-05 22:27:08

、そんなに感謝素晴らしいです！ –

p5.jsを使用してレスポンシブなウィンドウとシェイプを試す

答えて

関連する問題