Week02 _ 一個上課筆記

作業一 : 進階小畫家

• 程式教學

程式內容

成果

最終程式

      void setup(){

         size(800,600); 

         rect(width-100,0,width,height);

         rect(0,0,100,height);

         colorMode(HSB,100);

      }

      void draw(){

        if(mousePressed)        line(mouseX,mouseY,pmouseX,pmouseY); 

      }

       void mousePressed(){

          if(mouseX<100){

                strokeWeight(mouseY/50);

          }

          if(mouseX>700){

             stroke(mouseY/6.0,100,100);

          }

      }

最終成果，點左邊方框可換筆刷粗細，由上至下為細至粗，點右邊方框可以換顏色，由上而下為紅至藍，中間畫布可以拖曳滑鼠作畫。

成果展示

作業二 : coiorMode

• 程式教學

      noStroke();

      colorMode(HSB, 100);

      for (int i = 0; i < 100; i++) {

            for (int j = 0; j < 100; j++) {

                   stroke(i, j, 100);

                   point(i, j);

             }

      }

作業三 : 模仿互動小遊戲

• 程式教學

(一)
      void setup(){
              size(720,720,P2D);
      }
      void mouseDragged(){
              ellipse(mouseX,mouseY,100,100);
      }

拖曳滑鼠，出現許多圓。

成果

(二)
      void setup(){
             size(720,720,P2D);
      }
      float pX=-100,pY=-100,r=100;
      void draw(){
              ellipse(pX,pY,r,r);
              if(r>3){
                   r-=10;
                   pX+=13;
              }
      }
      void mousePressed(){
              pX=mouseX; pY=mouseY; r=100;
      }

程式

 最終成果，點一下畫面，出現往右飄動的小圓。

成果

(三)
        size(500,500);
        background(0,255,0);
        PImage img=loadImage("cat.png");
        image(img,0,0,500,500);

        // 圖片檔直接拉到程式中

 顯示一張圖片。

兩張圖片，一張不動，一張隨滑鼠移動。