编程实现三次bezier曲线的绘制_视觉系编程2——用代码写出动态交互海报-优快云博客

今天的文章介绍了如何将平面设计与编程结合起来，做一张动态交互海报。

motion graphic大火的今天，小伙伴们来学习一下吧～

知乎视频www.zhihu.com

静态效果图1

静态效果图2

平面设计是组织，编排文字，图像，符号的一种视觉表现形式。

所以现在将这种海报分为三部分，背景，眼睛（符号），文字。

注：代码是用p5js写的。

1.眼睛

眼眶：用两个贝塞尔曲线画出，眼眶的阴影同形状不同颜色，并向右下位移（8，8）

function drawEyekuang() {
  //影子
  push();
  translate(8, 8);
  fill(120, 200);
  bezier(-55, 0, -35, z - 44, 35, z - 44, 55, 0);
  bezier(-55, 0, -35, 44 - z, 35, 44 - z, 55, 0);
  pop();

  //眼眶
  bezier(-55, 0, -35, z - 44, 35, z - 44, 55, 0);
  bezier(-55, 0, -35, 44 - z, 35, 44 - z, 55, 0);

  push();
  stroke(255);
  line(-55, 0, 55, 0);
  pop();
  fill(0);

}

眼珠：用noise使眼球随机变大变小，反三角函数求出角度，让眼球跟着鼠标位置移动。

function drawEyeball(size, x, y) {
  //反三角函数求出角度
  angle = atan2(mouseY - y, mouseX - x);
  push();
  rotate(angle);
  for (b = 0; b < width / 2; b += size) {
    noise2 += noise(2);
    for (c = 0; c < width / 2; c += size) {
      noise3 += noise(2);
      fill(0);
      let u = 1;
      ellipse(size / 6, 0, noise(noise2, noise3) * 1.3 * size * u, noise(noise2, noise3) * 1.3 * size * u);
      push();
      fill(255);
      ellipse(3, 3, 3, 3);
      pop();
    }
  }
  pop();
}

最后眼眶和眼珠整合在一起的函数

function drawEye_dad(x, y, v) {
  push();
  translate(x, y);
  rotate(frameCount / v);
  drawEyekuang();
  pop();
  
  push();
  translate(x, y);
  drawEyeball(40, x, y);
  pop()

在set up使用数组储存随机生成眼睛的位置和大小

let Eyes_xaxis_nums = 5;
let Eyes_yaxis_nums = 4;
let Eyes_locs = [];

function setup() {
  createCanvas(600, 800);
  frameRate(50);
  noisex = noisey = 0;
  noStroke();
  for (var i = 1; i < Eyes_xaxis_nums; i++) {
    for (var k = 1; k < Eyes_yaxis_nums; k++) {
      let random_dis = 60;
      let x = random(-random_dis, random_dis);
      let y = random(-random_dis, random_dis);
      let v = random(20, 200);
      Eyes_locs.push([x + i / Eyes_xaxis_nums * width, y + k / Eyes_yaxis_nums * (height - 300), v]);
    }
  }
}

在draw中用function drawEye_dad(x, y, v)这个函数画出

function draw() {
  for (var i = 0; i < Eyes_locs.length; i++) {
    var x, y, v;
    [x, y, v] = Eyes_locs[i];
    drawEye_dad(x, y, v);
  }
}

2.背景

就是画格子，很简单啦～

2个for循环分别划出横向和纵向

function drawGrid(m, n) {
  stroke(m, m, n);
  for (i = 0; i < height; i += 20) {
    line(0, i, width, i);
  }
  for (a = 0; a < width; a += 20) {
    line(a, 0, a, height);
  }
}

3.文字

左下角4层文字：按键盘字体之间的空隙会随机改变，所以在此处设置一个变量 textgap

四层文字颜色不同，制造一种立体的视觉效果

参考图，来源网络

function drawtext(a) {
  push();
  fill(0,200);
  strokeWeight(7);
  stroke(0);
  text(a, 50, 95-textGap);
  pop();

  push();
  fill(231, 45, 48);
  strokeWeight(7);
  stroke(231, 45, 48);
  text(a, 50, 105);
  pop();

  push();
  fill(240, 133, 13);
  strokeWeight(7);
  stroke(240, 133, 13);
  text(a, 50, 115+textGap);
  pop();

  push();
  fill(255, 226, 63);
  strokeWeight(7);
  stroke(255, 226, 63);
  text(a, 50+textGap, 125);
  pop();
}

4. 交互部分

之前设置的背景颜色和格子颜色都与m,n有关。background(62, m, 152); drawGrid(m, n);按下键盘让m,n随机变化，就能改变背景颜色了。

随机textgap也会改变文字间距。

调整贝塞尔曲线的两个控制点，令鼠标按下仿佛有眨眼的效果。

function keyPressed() {
  m = random(255);
  n = random(255);
  textGap = random(0, 5);
}

function mousePressed() {
  z = 44;
  u = 0;
}

function mouseReleased() {
  z = 0;
  u = 1;
}

一起来玩玩吧，按鼠标和键盘都有不同的效果～

链接在这：https://editor.p5js.org/nancy2721/present/1HVnkg59e

最后分享几个我喜欢的动态海报，学习编程的时候小伙伴们记得发挥自己的想象力和创造力，结合自己的专业更容易做出有趣的东西～

来源网络，侵删