运动

做一个运动主题的码绘

用的工具：p5.js
编译器是p5.js自带的在线编译器

这次做简单的图形转化的模型

我们先看效果图

这个是圆和矩形的转化

实现代码如下

var bDrawDebug = false;
var radius;
var magicNumber = 0.551784; 
var squarePoints = [];
var nSquarePoints = 4;

function setup() {
  createCanvas(400, 400);
  radius = (width / 2) * 0.75;

  for (var i = 0; i < nSquarePoints; i++) { // square vertices
    var x = radius * cos(i * TWO_PI / nSquarePoints - HALF_PI);
    var y = radius * sin(i * TWO_PI / nSquarePoints - HALF_PI);
    squarePoints[i] = { x, y };
  }
}
function draw() {
  background(255);
  noFill();
  strokeJoin(ROUND);

  push(); 
  translate(width / 2, height/2);
  rotate(PI * 0.25);

  var backAndForth = -0.5 * (1 + sin(millis() / 2000.0));
  var amount = magicNumber * backAndForth;
  for (var i = 0; i < nSquarePoints; i++) {
    var p0x = squarePoints[i].x;
    var p0y = squarePoints[i].y;
    var p3x = squarePoints[(i + 1) % nSquarePoints].x;
    var p3y = squarePoints[(i + 1) % nSquarePoints].y;
    var p1x = p0x + (amount * p0y);
    var p1y = p0y - (amount * p0x);
    var p2x = p3x - (amount * p3y);
    var p2y = p3y + (amount * p3x);

    if (bDrawDebug) {
      stroke(255, 0, 0, 64);
      strokeWeight(1);
      line(p0x, p0y, p1x, p1y);
      line(p3x, p3y, p2x, p2y);
    }
	stroke(0);
    strokeWeight(3);
    bezier(p0x, p0y, p1x, p1y, p2x, p2y, p3x, p3y);
  }

  if (bDrawDebug) {
    stroke(255, 0, 0, 64);
    strokeWeight(1);
    ellipse(0,0, radius * 2, radius * 2);
  }
  
  pop();
}

function keyPressed(){
  bDrawDebug = !bDrawDebug; 
}

我们做到这的时候其实还想看到圆可以转化为多边形一步一步到矩形

效果如下
实现代码如下

var radius;
var squarePoints = [];
var nCirclePoints = 4;
var bDrawDebug = true;
var period = 2500;
var nPows = 4;

function setup() {
  createCanvas(400, 400);
  radius = width / 2 * 0.75;
}

function draw() {
  background(255);
  push();
  translate(width / 2, height / 2);

  var t = int(millis() / period); // 0,1,2,3,4,5,6,7...
  var tupow = floor(pow(2, 2 + (t % nPows))); // 4,8,16,32,4,8,16,32...
  var utpow = floor(pow(2, 2 + (nPows - (t % nPows) - 1))); // 32,16,8,4,32,16,8,4...
  var direction = (int(millis() / (period * nPows))) % 2; // 0,1,0,1...
  var bitupow = (direction === 0) ? tupow : utpow; // 4,8,16,32,32,16,8,4...

  var frac = (millis() % period) / float(period);
  var tfrac = (direction === 0) ? frac : (1.0 - frac);
  tfrac = pow(tfrac, 4.0);

  rotate(0 - PI / map(tfrac, 0, 1, bitupow, bitupow * 2));

  noFill();
  stroke(0);
  strokeWeight(3);
  strokeJoin(MITER);

  beginShape();
  nCirclePoints = 2 * bitupow; 
  for (var i = 0; i <= (nCirclePoints + 1); i++) { // for good shape closure
    if (i % 2 === 0) {
      // the corner vertices
      var theta = map(i, 0, nCirclePoints, 0, TWO_PI);
      var px = radius * cos(theta);
      var py = radius * sin(theta);
      vertex(px, py);

    } else {
      // the halfway vertices
      //var thetaA = map((i - 1 + nCirclePoints) % nCirclePoints, 0, nCirclePoints, 0, TWO_PI);
      //var thetaB = map((i + 0 + nCirclePoints) % nCirclePoints, 0, nCirclePoints, 0, TWO_PI);
      //var thetaC = map((i + 1 + nCirclePoints) % nCirclePoints, 0, nCirclePoints, 0, TWO_PI);
      var thetaA = map(i - 1, 0, nCirclePoints, 0, TWO_PI);
      var thetaB = map(i + 0, 0, nCirclePoints, 0, TWO_PI);
      var thetaC = map(i + 1, 0, nCirclePoints, 0, TWO_PI);

      var pxA = radius * cos(thetaA);
      var pyA = radius * sin(thetaA);
      var pxB = radius * cos(thetaB);
      var pyB = radius * sin(thetaB);
      var pxC = radius * cos(thetaC);
      var pyC = radius * sin(thetaC);

      var pxAC = (pxA + pxC) / 2; // points halfway between flanking vertices
      var pyAC = (pyA + pyC) / 2;

      var px = map(tfrac, 0, 1, pxAC, pxB);
      var py = map(tfrac, 0, 1, pyAC, pyB);
      vertex(px, py);
    }
  }
  endShape(CLOSE);

  pop();
}

——————————————————————
其实通过代码我们可以实现许多效果，这次是简单的图形的转化
希望通过以后的学习可以做出更多效果很好的运动图片