数字媒体艺术 · 互动编程 · 2026 秋

用代码，
画出会动的东西.

从一颗随机出发的小球，到一个能完整玩一局的贪吃蛇，
再到一幅向梵高致敬的星夜。这里是我的三份课程作业，也是我让画面回应人的开始。

学号 25337002130182 数字媒体艺术专业 2026 秋季学期

浏览作品 ↓ 关于我

SCROLL

01 / WORKS

课程作品

三份作业，两份完整录屏，一件静态生成作品。点「在线体验」可以直接在站内跑起来，不用跳走。

作业一 · 创意代码的基本原理

p5.js / 2026.09

01交互动态

运动轨迹 Motion Trail

一颗随机出发的小球，在深蓝画布上留下会呼吸的轨迹。

创作思路

用半透明背景反复覆盖代替清屏，让每一帧的残影自然叠成轨迹，而不是自己存一堆坐标。小球碰到边界就反向，颜色由鼠标横向位置映射到冷色区间，橙色方块跟着指针走——把「看不见的操作」变成看得见的笔触。

用了什么

p5.js
Canvas 2D
鼠标交互
随机与映射
半透明叠加

源码 ↗

查看核心代码 sketch.js

let x, y, speedX, speedY;

function setup() {
  createCanvas(380, 570);
  noStroke();
  x = random(width);
  y = random(height);
  speedX = random(-2, 2);
  speedY = random(-2, 2);
}

function draw() {
  // 半透明背景，保留运动轨迹
  background(20, 20, 40, 18);

  // 碰到画布边缘反弹
  if (x < 0 || x > width)  speedX = -speedX;
  if (y < 0 || y > height) speedY = -speedY;

  x += speedX;
  y += speedY;

  // 鼠标横向位置控制颜色
  let redVal = map(mouseX, 0, width, 30, 220);
  fill(redVal, 100, 180);

  // 随机尺寸
  let size = random(15, 45);
  ellipse(x, y, size, size);

  // 鼠标位置绘制跟随方块
  fill(255, 180, 80, 120);
  rectMode(CENTER);
  rect(mouseX, mouseY, 30, 30);
}

作业二 · 互动艺术与电子媒介

HTML5 / 2026.10

02互动游戏

贪吃蛇 Snake

一个能完整玩一局的小游戏：有开始、有计分、有结束、能重开。

创作思路

先搭一个固定格点的棋盘，让「移动」变成数组里坐标的增删，逻辑就不会乱。撞墙、撞自己、撞障碍都归到同一个结束判定里；最高分存在本地，刷新页面也还在。刻意把界面压到只剩标题和分数，让视线留在棋盘上。

用了什么

HTML5 Canvas
原生 JavaScript
键盘交互
localStorage
状态机

星夜流光 Starry Flow

让柏林噪声替我握住画笔，把《星月夜》的漩涡重新画一遍。

灵感来源 · 梵高《星月夜》(1889)

原作最打动我的不是星星，而是天空那种「空气在动」的感觉：短促、有方向、彼此缠绕的笔触。于是我把画面拆成五种语言再逐条翻译——笔触写成噪声流场里的短线段，漩涡写成噪声梯度的转向，铬黄星月写成多层叠加的光晕，山脚的村庄写成暖黄窗光，前景柏树写成一路向上的黑色火焰。

创作思路

每一笔的起点都加一点随机抖动，避免网格感；角度完全交给 noise()，所以笔触永远不会真正重复。整幅画只画一帧（noLoop()），最后逐像素叠一层噪点当作画布颗粒。换一颗随机种子就是另一幅星夜——同一个灵感，无穷种表达。

用了什么

p5.js
Perlin 噪声流场
静态生成 / 种子
HSB 色彩系统
像素级颗粒

全屏打开 ↗

查看核心代码 flow-field.js

// 每一笔的方向来自噪声，长度与粗细带随机抖动
var n   = noise(px * 0.0016, py * 0.0016);
var ang = n * TWO_PI * 2.2;

// 沿场方向画一条微弯的短笔触
beginShape();
vertex(px, py);
quadPath(
  px, py,
  px + cos(ang) * len * 0.5 - sin(ang) * len * 0.18,
  py + sin(ang) * len * 0.5 + cos(ang) * len * 0.18,
  px + cos(ang) * len,
  py + sin(ang) * len
);
endShape();

// 固定种子 → 可复现的静态一帧
randomSeed(seed);
noiseSeed(seed);
noLoop();

02 / ABOUT

关于我

邓

邓洪洮

数字媒体艺术专业 · 2026 级

正在学怎么用代码做会回应人的画面。比起把效果堆满，我更在意一个交互是不是真的说得通：手往哪动、画面怎么变、为什么这么变。

专业: 数字媒体艺术
年级: 2026 级 · 秋季学期
学号: 25337002130182
感兴趣的方向: 创意编程 · 互动装置 · 生成视觉
课程: 《互动编程》
GitHub: @DUSL212 ↗

工具箱

p5.js
JavaScript
HTML / CSS
Three.js（学习中）
Git
屏幕录制

用代码，画出会动的东西.

课程作品

运动轨迹 Motion Trail

贪吃蛇 Snake

星夜流光 Starry Flow

关于我

邓洪洮

用代码，
画出会动的东西.