互动媒体实验①——艺工结合课程——“码绘”

最新推荐文章于 2024-09-07 11:00:39 发布

╰ ＇Noemi �

最新推荐文章于 2024-09-07 11:00:39 发布

阅读量255

点赞数

本文链接：https://blog.csdn.net/qq_43742866/article/details/102651045

版权

本文是互动媒体技术实验报告，作者扎西旺姆通过p5.js编程语言临摹并拓展了一幅动态图形作品。实验中，作者详细描述了原作的动态规律，以及在自己作品中的呈现和变化，强调了编程绘画的精准性与挑战性，同时也分享了实验过程中遇到的算法理解与代码编写困难。

摘要由CSDN通过智能技术生成

实验报告课程名称：
互动媒体技术实验一创意编程作业
实验日期：2019年10月21日、班级：数技1701

姓名：扎西旺姆学号 1191170115 仪器编号：P5.js
一、实验目的：
互动媒体作业1-动态图形临摹主题：
从参考资料中的“动态图形艺术”中选取不少于1幅作品，用编程方式临摹，并进行拓展
二、实验要求编程语言与工具：
编程可以用p5,processing，若想用其他语言或工具，提前向老师说明情况；
作品: 要有一件临摹的作品；还要有至少一件拓展的作品；每幅作品录制一段半分钟内的视频；
报告：写一篇文章，发表为博文/推文等形式，描述从原作中提炼出的规律，既要用平实易懂的语言描述，也要尝试运用凝练的数学语言表达（公式、方程、推导等），特别要描述出这些规律在原作中如何呈现的？在自己的扩展中如何呈现和变化的？
提交内容与方式：
1.程序+视频+报告（博文转为doc或pdf),放入一个文件夹，按“学号+姓名”命名文件夹，由学习委员汇总后提交；
2.博文链接加入表格文档《作业登记》-创意编程作业-作业1-动态图形临摹中
三、实验过程：
①在网页直接可用。开始编程左边输入代码，点击运行按钮，就可以在右边看到代码运行效果。
②查阅Reference p5.js提供了许多函数用来进行创作，并且许多函数都有多种重载函数.
p5.js官网提供了Reference，对每一种函数都进行了详细的解释，可以通过查阅这些函数的用法来进一步学习p5.js，
网址如下：https://p5js.org/reference/

[https://github.com/processing/p5.js/wiki/Processing-transition]查看参考文献以更深入了解各个功能。
四、实验结果比较临摹
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GiDWvJ7h-1571187102894)(https://editor.p5js.org/Noemi/present/iH1fndIUC)]
临摹了老师发的动态图形艺术的6gif那张图。
在这里插入图片描述
可以说整体的走势很相似，
区别：
相同的：两个都是动态的，其次是有颜色上相同。
都有环绕运动的特点，背景为黑色的。
不同点：老师的是小球在来回直线运动，小球的颜色始终不变。
小球的运动速度比较快。
临摹的有颜色的变换，看似是在小球运动，但是在圆弧上运动，有颜色的变换。运动速度有差别，速度比较慢。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NFyYTYHB-1571557688962)(https://editor.p5js.org/Noemi/present/iH1fndIUC)]

**四、实验体会（**包括对于本次实验的小结，实验过程中碰到的问题等）
其实我觉得用代码画画的确比动手画画更加准确，而且人为的眼睛不好操作时能用代码更精确。
当然也是难点。我觉得作为数媒人，既能在学科方面上掌握多一点也要在艺术领域中也是一种挑战，也是国家全才全能的必备要求，当然像是我对程序这么菜的人，是一种磨练困难的过程，途中遇到的问题其实在一些算法上有点难度。其次是读懂和编写代码上吃力。截图导致静态

在这里插入代码片
``
"use strict";
function _classCallCheck(instance, Constructor)
 {
  if (!(instance instanceof Constructor)) 
  { throw new TypeError("Cannot call a class as a function"); 
  } 
  }var canvas = undefined,    ctx = undefined;
  var count = 100;
  var particles = [];
  var screenPos = undefined,    lastScreenPos = undefined;function setup()
   {	canvas = createCanvas(windowWidth, windowHeight);	
   ctx = canvas.drawingContext;	colorMode(HSB, 255, 255, 255, 255);	
   for (var i = 0; i < count; i++) 
   {		
   var p = new Particle();		
   p.randomize();		
   particles.push(p);	}	
   screenPos = createVector(screenX, screenY);	
   lastScreenPos = screenPos.copy();}function draw() {	// background(0);	
   fill(0, 20);	
   rect(0, 0, width, height);	
   stroke(255);	noFill();	
   lastScreenPos = screenPos.copy();	
   screenPos = createVector(screenX, screenY);	
   var screenForce = screenPos.copy().sub(lastScreenPos);	
   var center = createVector(width / 2, height / 2);	
   // let centerScreen = center.copy().add(screenForce);	
   // line(center.x, center.y, centerScreen.x, centerScreen.y);	screenForce.mult(0.1).limit(1);	
   particles.forEach(function (n) {		
   stroke((n.vel.heading() + PI) / TAU * 255, 255, 255);		n.show();		
   var noiseForce = p5.Vector.fromAngle(map(noise(n.pos.x / 300, n.pos.y / 300, frameCount / 300), 0.3, 0.7, 0, TAU));		n.applyForce(screenForce);		n.applyForce(noiseForce.limit(0.06));		
   n.update();		
   n.vel.limit(12);		
   n.edges();	});	
   stroke(255, 40);	
   var averageVelocity = particles.reduce(function (p, n) 
   {		
   return p.add(n.vel);	
   }, createVector(0, 0)).div(particles.length);	
   var centerAverageVelocity = center.copy().add(averageVelocity.mult(10));	
   line(center.x, center.y, centerAverageVelocity.x, centerAverageVelocity.y);}
   function windowResized() {	
   resizeCanvas(windowWidth, windowHeight);}
   var Particle = function () {	
   function Particle() {		
   _classCallCheck(this, Particle);		
   this.reset();	
   }	
   Particle.prototype.applyForce = function applyForce() {		
   var _acc;		
   (_acc = this.acc).add.apply(_acc, arguments);	
   };	Particle.prototype.reset = function reset() {		
   this.pos = createVector(0, 0);		
   this.acc = createVector(0, 0);		
   this.vel = createVector(0, 0);	};	Particle.prototype.randomize = function randomize() {		
   this.pos.set(random(width), random(height));	};	Particle.prototype.update = function update() {		this.vel.add(this.acc);		
   this.acc.mult(0);		
   this.pos.add(this.vel);		
   this.vel.mult(0.99);	
   };	
   Particle.prototype.edges = function edges() {		
   if (this.pos.x < 0) this.pos.x += width;
   else if (this.pos.x > width) this.pos.x -= width;		
   if (this.pos.y < 0) this.pos.y += height;else if (this.pos.y > height) this.pos.y -= height;	};	
   Particle.prototype.show = function show() {		
   var i = arguments.length <= 0 || arguments[0] === undefined ? 0 : arguments[0]; 		
   ellipse(this.pos.x, this.pos.y, 6);	};	Particle.prototype.showVel = function showVel() {		
   var pVel = this.pos.copy().add(this.vel);		
   line(this.pos.x, this.pos.y, pVel.x, pVel.y);	
   };	
   return Particle;}();
   

![在p5中的效果]
(https://img-blog.csdnimg.cn/20191020162612240.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM1MDE0Mw==,size_16,color_FFFFFF,t_70)