“运动”主题创作——码绘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);
}
}
实验体会
动图方面码绘比手绘优秀无数倍。