Hahow课程

Day 1

function setup 跟 fucntion draw 的区别：setup在一开始设定绘制好，draw会不停的绘制。

Day 2

Nothing much. 下载vscode并安装liveserver插件，可以快速用网页运行代码。

Day 3

使用frameCount让圆形自动绘制：
ellipse(width / 2, height / 2, 400, 50 + frameCount*10)
结合fill使用，可以产生颜色自动变化的效果：
noFill()
fill(frameCount) 从黑色变成白色

在绘制rect时，默认以左上角的点为基准，跟ellipse不一样，此时可以使用 rectMode(center) 来修改

    ellipse(width/2, height/2, 50)
    rectMode(CENTER)
    strokeWeight(frameCount % 2 ==0?5:1)
    stroke(mouseX)
    rect(width/2, height/2, 100+frameCount*5)

    fill(mouseX, mouseY, 50)
    stroke("white")
    triangle(440+mouseX/2, 140, 160+frameCount, mouseX, 40, 160)

(跳过绘制海星)

变数与数据–赋予可变与连续性

sketch3.js

Day 5

需要变数的原因

• 减少重复
• 暂存手表需要的数据
• 做复杂的运算时结构概念
• 留下上一刻的状态
• 赋予数值与数据意义

Day 6

function setup() {
  createCanvas(windowWidth, windowHeight);
  background(100);
}
var r = 0
function draw() {
  r = mouseX/2
  ellipse(width/2, height/3, r, r)
  ellipse(width/2, height/2, r, r)
  ellipse(width/2, height/6, r, r)
}

也可以设置brightness变量，控制颜色的深浅：

function setup() {
  createCanvas(windowWidth, windowHeight);
  background(100);
}
var r = 0
function draw() {
  r = mouseX/2
  var brightness = r/2 +40
  fill(brightness)
  ellipse(width/2, height/3, r, r)
  ellipse(width/2, height/2, r, r)
  ellipse(width/2, height/6, r, r)
}

或是var三个变量，依次放入fill里面，可以改变rgb颜色。

绘制自由落体反弹效果的圆形：

var r = 0
var x = 50, y = 50
var vx = 3, vy = 3
function draw() {
  // background(0)
  ellipse(x, y, 50)
  x = x + vx
  y = y + vy
  vy += 0.2
  if (y > height) {
    vy = -vy * 0.6 //让反弹力道降低
    y = height //反弹时，避免马上归零
  }  
}

Day 7

加入 txt 变量，里面包含了字符串：

var r = 0
var x = 50, y = 50
var vx = 3, vy = 3
var txt = "Hello"
function draw() {
  // background(0)
  ellipse(x, y, 50)
  text(txt, x+100, y)
  txt += "."
  x = x + vx
  y = y + vy
  vy += 0.2
  if (y > height) {
    vy = -vy * 0.6
    y = height
  }

Day 8

继续联系if else语句

  if (mouseIsPressed){
    fill('red')
  } else {
    fill("yellow")
  }

sketch4.js

Day 9

换成绘制长方形，设定变量并使用+=来重复绘制

function setup() {
  createCanvas(windowWidth, windowHeight)
  background(100)
}
var x = 10
function draw() {
  rect(x, 10, 50, 20)
  x += 50 + 10
}

Day 10

加入y变量，影响绘制结果

var x = 10, y = 10
function draw() {
  rect(x, y, 50, 20)
  x += 50 + 10
  if (x>width){
    x=0
    y+=30
  }
}

Day 11

加入随机变量，以产生宽度不一致的效果

var x = 10, y = 10
function draw() {
  var w = random(30,80)
  rect(x, y, w, 20)
  x += w + 10
  if (x>width){
    x=0
    y+=30
  }
}

Day 12

在原先的基础上将变量加入颜色

var x = 10, y = 10
function draw() {
  var w = random(30,80)
  fill(100 + random(155), 59, 59)
  rect(x, y, w, 20)
  x += w + 10
  if (x>width){
    x=0
    y+=30
  }
}