---
tags: 程式設計,第一個作業,教師版,互動藝術程式創作入門,Creative Coding
---

# 第一個作業

## 1.用line畫線(第一周)15%


var points = [[12, 2], [5, 5], [2, 5],[-3,7],[-1,4,5],[-6,4],[-11,-1],[-7,-5],[-1,-7],[3,-8],[5,-11],[4,-7],[6,-5],[3,-6],[2,-6],[-1,-5]]; //list資料\
var frameSize = [200]; // 定義外框大小

function setup() {   //只會執行一次的函數
  createCanvas(windowWidth, windowHeight); //設定一個畫布，寬為整個視窗的寬度windowWidth，高度為整個視窗的高度windowHeight
  //把points 內的值都*50
  for (var i = 0; i < points.length; i++) {
    for (var j = 0; j < points[i].length; j++) {
      points[i][j] = points[i][j] * 20;
    }
  }
}

function draw() {
  background(0);
  stroke(255)//原本原點在左上角，利用這指令把原點放到視窗的中心
  strokeWeight(4)
  
  
  translate(mouseX, mouseY); //平移位置
  scale(1, -1); //上下翻轉
  for (var i = 0; i < points.length-1; i++) {
    line(points[i][0], points[i][1], points[i+1][0], points[i+1][1]);
  }
  line(points[points.length-1][0], points[points.length-1][1], points[0][0], points[0][1]); //把最後一點與第一點的連線

}

## 2.文字顯示(第二周)15%


var points = [[12, 2], [5, 5], [2, 5],[-3,7],[-1,4,5],[-6,4],[-11,-1],[-7,-5],[-1,-7],[3,-8],[5,-11],[4,-7],[6,-5],[3,-6],[2,-6],[-1,-5]]; //list資料\
var frameSize = [200]; // 定義外框大小

function setup() {   //只會執行一次的函數
  createCanvas(windowWidth, windowHeight); //設定一個畫布，寬為整個視窗的寬度windowWidth，高度為整個視窗的高度windowHeight
  //把points 內的值都*50
  for (var i = 0; i < points.length; i++) {
    for (var j = 0; j < points[i].length; j++) {
      points[i][j] = points[i][j] * 20;
    }
  }
}

function draw() {
  background(0);
  stroke(255)//原本原點在左上角，利用這指令把原點放到視窗的中心
  strokeWeight(4)
  text("淡江大學教育科技系",mouseX,mouseY)//文字
  
  translate(mouseX, mouseY); //平移位置
  scale(1, -1); //上下翻轉
  for (var i = 0; i < points.length-1; i++) {
    line(points[i][0], points[i][1], points[i+1][0], points[i+1][1]);
  }
  line(points[points.length-1][0], points[points.length-1][1], points[0][0], points[0][1]); //把最後一點與第一點的連線

}

---
---
# ***因為不好寫,所以改一個寫法***
## 3.隨著滑鼠移動產生放大縮小的畫面15%


var points = [[12, 2], [5, 5], [2, 5],[-3,7],[-1,4,5],[-6,4],[-11,-1],[-7,-5],[-1,-7],[3,-8],[5,-11],[4,-7],[6,-5],[3,-6],[2,-6],[-1,-5]]; //list資料\
var frameSize = [200]; // 定義外框大小

function setup() {   //只會執行一次的函數
  createCanvas(windowWidth, windowHeight); //設定一個畫布，寬為整個視窗的寬度windowWidth，高度為整個視窗的高度windowHeight
  //把points 內的值都*50
  for (var i = 0; i < points.length; i++) {
    for (var j = 0; j < points[i].length; j++) {
      points[i][j] = points[i][j] * 20;
    }
  }
}

function draw() {
  background(0);
  stroke(255)//顏色
  
  strokeWeight(4)
  text("淡江大學教育科技系",mouseX,mouseY)//文字
  
  translate(mouseX, mouseY); //滑鼠平移位置
  scale(1, -1); //顛倒

  for (var i = 0; i < points.length-1; i++) {
    var ratio1 = map(i, 0, points.length-1, 0, 1);
    var ratio2 = map(i+1, 0, points.length-1, 0, 1);
    var clr = lerpColor(color("#ef233c"), color("#ffe5ec"), ratio1);//混合顏色找出漸層
    var middlecolor = lerpColor(color("#f72585"), color("#ef233c"), (ratio1+ratio2)/2)//混合顏色找出漸層
    stroke(clr);//顏色
    strokeWeight(5);//粗細
    for(r=1;r<2;r++){//層數
      textSize(25*(mouseX/1000)*r)//文字大小
      line(points[i][0]*(mouseX/1000)*r, points[i][1]*(mouseX/1000)*r, points[i+1][0]*(mouseX/1000)*r, points[i+1][1]*(mouseX/1000)*r);
    }
  


  }
  }

---
## 4.線條採用兩個顏色漸層呈現(第三、四周)15%


var points = [[12, 2], [5, 5], [2, 5],[-3,7],[-1,4,5],[-6,4],[-11,-1],[-7,-5],[-1,-7],[3,-8],[5,-11],[4,-7],[6,-5],[3,-6],[2,-6],[-1,-5]]; //list資料\
var frameSize = [200]; // 定義外框大小

function setup() {   //只會執行一次的函數
  createCanvas(windowWidth, windowHeight); //設定一個畫布，寬為整個視窗的寬度windowWidth，高度為整個視窗的高度windowHeight
  //把points 內的值都*50
  for (var i = 0; i < points.length; i++) {
    for (var j = 0; j < points[i].length; j++) {
      points[i][j] = points[i][j] * 20;
    }
  }
}

function draw() {
  background(0);
  stroke(255)//顏色
  
  strokeWeight(4)
  text("淡江大學教育科技系",mouseX,mouseY)//文字
  
  translate(mouseX, mouseY); //滑鼠平移位置
  scale(1, -1); //顛倒

  for (var i = 0; i < points.length-1; i++) {
    var ratio1 = map(i, 0, points.length-1, 0, 1);
    var ratio2 = map(i+1, 0, points.length-1, 0, 1);
    var clr = lerpColor(color("#ef233c"), color("#ffe5ec"), ratio1);//混合顏色找出漸層
    var middlecolor = lerpColor(color("#f72585"), color("#ef233c"), (ratio1+ratio2)/2)//混合顏色找出漸層
    stroke(clr);//顏色
    strokeWeight(5);//粗細
    for(r=1;r<2;r++){//層數
      textSize(25*(mouseX/1000)*r)//文字大小
      line(points[i][0]*(mouseX/1000)*r, points[i][1]*(mouseX/1000)*r, points[i+1][0]*(mouseX/1000)*r, points[i+1][1]*(mouseX/1000)*r);
    }
  


  }
  }

---

## 5.產生由小到大的至少五層的圖20%


var points = [[12, 2], [5, 5], [2, 5],[-3,7],[-1,4,5],[-6,4],[-11,-1],[-7,-5],[-1,-7],[3,-8],[5,-11],[4,-7],[6,-5],[3,-6],[2,-6],[-1,-5]]; //list資料\
var frameSize = [200]; // 定義外框大小

function setup() {   //只會執行一次的函數
  createCanvas(windowWidth, windowHeight); //設定一個畫布，寬為整個視窗的寬度windowWidth，高度為整個視窗的高度windowHeight
  //把points 內的值都*50
  for (var i = 0; i < points.length; i++) {
    for (var j = 0; j < points[i].length; j++) {
      points[i][j] = points[i][j] * 20;
    }
  }
}

function draw() {
  background(0);
  stroke(255)//顏色
  
  strokeWeight(4)
  text("淡江大學教育科技系",mouseX,mouseY)//文字
  
  translate(mouseX, mouseY); //滑鼠位置
  scale(1, -1); //顛倒

  for (var i = 0; i < points.length-1; i++) {
    var ratio1 = map(i, 0, points.length-1, 0, 1);
    var ratio2 = map(i+1, 0, points.length-1, 0, 1);
    var clr = lerpColor(color("#ef233c"), color("#ffe5ec"), ratio1);//混合顏色找出漸層
    var middlecolor = lerpColor(color("#f72585"), color("#ef233c"), (ratio1+ratio2)/2)//混合顏色找出漸層
    stroke(clr);//顏色
    strokeWeight(5);//粗細
    for(r=1;r<6;r++){//層數
      textSize(25*(mouseX/1000)*r)//文字大小
      line(points[i][0]*(mouseX/1000)*r, points[i][1]*(mouseX/1000)*r, points[i+1][0]*(mouseX/1000)*r, points[i+1][1]*(mouseX/1000)*r);
    }
  


  }
  var clr = lerpColor(color("#ef233c"), color("#f72585"), map(0, 0, points.length-1, 0, 1));
  stroke(clr);//顏色
  line(points[points.length-1][0], points[points.length-1][1], points[0][0], points[0][1]); //線條
}




      

---

## 把完成網頁放到GitHub上15%


https://sophieru.github.io/e042.0/e042.0/

---