互动媒体

“运动”主题创作——码绘VS手绘

主题

用手绘和码绘两种方式创作“运动”主题的作品，并撰写报告，对比二者在表现“动态”方面的异同。

要求

手绘：

至少有一幅作品；
允许采取纸面绘画或电脑绘画两种方式；
可以结合速写课作业来完成；
可以完成多幅作品，形成组图，以尝试不同的表现”动感“的手法；

码绘：

跳动的音律

编程工具默认包括p5.js, processing, openframeworks, unity。若要用其他工具，必须在第10周内找老师说明。
必须运用到条件分支、循环、函数等流程控制方法（参考《用代码画画》1.4~1.9节）
尽可能运用周期性、随机性的控制技术，参考：
《代码本色》第0章: https://pan.baidu.com/s/1twnk-rcbedbxqBFQRX12ng 密码：qubs
Red Blobs教程: https://www.redblobgames.com/articles/probability/damage-rolls.html )
尽可能在题材和内容方面与自己的手绘作品有明显的对照性，例如，若手绘画了一组动感的表情，那么码绘就可以创作一系列运动起来的表情。
必须让作品动起来；
不强制要求有交互性，但若做出了有趣、细腻、创意的交互体验，也会提高评价。

————————————————————————————————————————————————————

首先

代码如下

function setup() {
createCanvas(1000, 500);
background(0,0,0);
noStroke();
}

let frameCount = 0;

function draw() {
if(frameCount % 5 === 0) {
background(0,0,0);
refreshBlockPositionAFrame();
frameCount += 1;
}

const BASE_POINT = [0, 500];
const POINT_WIDTH = 35;
const POINT_HEIGHT = 5;
const POINTSACOUNT = 30;
const MAX_OFFSET_DISTANCE = BASE_POINT[1] * 0.7;

function refreshBlockPositionAFrame() {

for(let blockIndex = 0; blockIndex < POINTSACOUNT; blockIndex += 1) {
const offsetDis = Math.random() * MAX_OFFSET_DISTANCE + 30;

updateSingleBlockPosition(blockIndex, offsetDis);

}
}

/**

• @param {number} index
• @param {number} offset
  */
  function updateSingleBlockPosition(index, offset) {
  const leftBottomX = BASE_POINT[0] + POINT_WIDTH * index;
  const leftBottomY = BASE_POINT[1];

const leftTopX = leftBottomX;
const leftTopY = leftBottomY + POINT_HEIGHT - offset;

const rightBottomX = leftBottomX + POINT_WIDTH;
const rightBottomY = leftBottomY;

const rightTopX = leftBottomX + POINT_WIDTH;
const rightTopY = leftBottomY + POINT_HEIGHT - offset;

drawBlock(leftBottomX, leftBottomY, leftTopX, leftTopY, rightTopX, rightTopY, rightBottomX, rightBottomY);
}

function drawBlock(x1, y1, x2, y2, x3, y3, x4, y4) {
quad(x1, y1, x2, y2, x3, y3, x4, y4);

fill(130, 130, 130);
}

}

实验体会

动图方面码绘比手绘优秀无数倍。