编码艺术：从故事创作到交互应用

# 编码艺术：从故事创作到交互应用 ## 1. 情感编程与故事创作 ### 1.1 情感编程的复杂性 当尝试设计一个关于积极、消极或冲突情绪如何在大脑结构和介质控制下引发自我放纵感的程序时，情况会变得复杂。而基于感官感知和由此产生的情绪来描述记忆如何出现则更为复杂。我们可以从一些活动入手，例如拍摄展现不同情绪的面部照片，然后使用手机上安装的应用程序绘制这些情绪。 ### 1.2 故事创作的流程 #### 1.2.1 项目构思 在利用编码进行各种数据的可视化展示时，项目的构思可以从选择一个角色及其环境开始，接着考虑项目的受众。不同的受众有不同的需求，例如排版对于项目的书面部分很重要，小字体不适合儿童和老年人，大字体可能会让高中生感到冒犯。 #### 1.2.2 主题与角色选择 选择一个主题、要处理的对象以及行动指向的目标。这需要对角色及其栖息地进行研究，考虑共生关系、危险、角色的装备等因素，比如角色是高大、快速、强壮还是聪明。 #### 1.2.3 故事情节设计 创作故事情节，即虚构或基于真实研究的故事叙述。将故事情节写成像在手机上讲述的那样，简短而有趣。故事可以根据不同的媒体形式进行重述，如图形、漫画、动画、游戏等。选择合适的媒体容器来呈现故事，例如将一个简短的故事以多种方式重新创作，然后通过插图或动画将其可视化。 #### 1.2.4 故事板制作 在故事情节准备好后，制作故事板。故事板是一种图形组织者，由一系列带有对话和说明的绘图或草图组成，用于预先可视化视频、动画等。可以在互联网上找到 2D 或 3D 故事板软件和免费的可打印模板，选择符合审美和智力需求的模板，插入关键帧并为每个变化添加说明。 ### 1.3 草图绘制的重要性 绘制故事草图，熟悉艺术家的草图风格，如 Danny Coyeman 和 Ken Bernstein 的作品。草图具有认知能力，能增强眼 - 手 - 脑以及心 - 脑 - 眼 - 手的协调能力，常用于故事板制作、头脑风暴等。阅读艺术和编码等学科的设计元素和原则相关内容，并撰写自己的观点。绘制的草图将作为视觉故事的框架，如果要创建动画，还可以定义关键帧，其余帧可以作为中间帧填充。 ## 2. 交互与可视化输入 ### 2.1 输入与输出的探索 之前我们在使用代码创作艺术时，没有过多关注作品的展示方式和交互性。接下来，我们将研究如何使用鼠标引导屏幕上的图形、利用数据馈送为图形树添加动画效果，以及构建带有按钮的物理设备来点亮一组 LED 灯，希望能激发独特的创意。 ### 2.2 人物与喷气背包项目 #### 2.2.1 项目概述 该项目由北科罗拉多大学的 Matt Anderson 使用 Processing 编写，展示了一个带有喷气背包的人物。 #### 2.2.2 代码实现 ```java PImage jetpack; PImage mannequin; JetFuel stream; boolean clickEvent = false; boolean jetOneClicked = false; boolean jetTwoClicked = false; boolean strapClicked = false; boolean mannequinVisible = false; void setup (){ size (800 ,800); jetpack = loadImage("Jetpack.png"); mannequin = loadImage("mannequin.png"); image(jetpack ,249 ,100); stream = new JetFuel (); } void draw (){ if (( clickEvent && jetOneClicked )||( clickEvent && jetTwoClicked )){ for (int x = 0; x < 25; x++){ stream. addParticle (new PVector(mouseX ,mouseY)); } clickEvent = false; jetOneClicked = false; jetTwoClicked = false; } stream.run (); if(clickEvent && strapClicked ){ if(! mannequinVisible ){ scale (0.75); image(mannequin , 315, 100); mannequinVisible = true; } else{ translate (20 ,20); image(mannequin , 315, 100); } strapClicked = false; } } void mousePressed (){ clickEvent = true; if (mouseX >= 249 && mouseX <= 341 && mouseY >= 335 && mouseY <= 379){ jetOneClicked = true; } if (mouseX >= 459 && mouseX <= 551 && mouseY >= 335 && mouseY <= 379){ jetTwoClicked = true; } if(mouseX >= 341 && mouseX <= 459 && mouseY >= 100 && mouseY < 235){ strapClicked = true; } } // An array to manage particles class JetFuel { ArrayList <Particle > particles; PVector origin; // Constructor JetFuel () { particles = new ArrayList <Particle >(); } void addParticle(PVector position) { origin = position.copy (); particles.add(new Particle(origin)); } void run () { for (int i = particles.size () -1; i >= 0; i--) { Particle p = particles.get(i); p.run (); if (p.isDead ()) { particles.remove(i); } } } } // A simple Particle class class Particle { PVector position; PVector velocity; PVector acceleration ; float lifespan; Particle(PVector l) { acceleration = new PVector (0, 0.05); velocity = new PVector(random (-1, 1), random (-2, 0)); position = l.copy (); lifespan = 150.0; } void run () { update (); display (); } // Method to update position void update () { velocity.add( acceleration ); position.add(velocity); lifespan -= 1.0; } // Method to display void display () { stroke (255 , lifespan); fill (255 , lifespan); ellipse(position.x, position.y, 8, 8); } // Is the particle still useful? boolean isDead () { if (lifespan < 0.0) { return true; } else { return false; } } } ``` ### 2.3 交互式天气树应用 #### 2.3.1 应用概述 该应用是交互性的介绍，使用 Java 创建一个由外部实时天气数据驱动的动画树，将图形与外部数据馈送相结合。应用包含五个类文件：Canvas、ControlFrame、OpenWeather、Rain 和 Tree，主文件是 Canvas。 #### 2.3.2 基本树类的创建 ##### 2.3.2.1 类声明 ```java class Tree{ } ``` ##### 2.3.2.2 实例变量定义 ```java int x = 300; int y = 350; int branchingNum = 7; int length = 85; int width = 25; int angle = 30; int leafRandoms []; Color treeColor = new Color (142 , 98, 89); Color leafColor = new Color (62, 142, 73); GradientPaint backgroundColor = new GradientPaint (0, 480, Color.BLACK , 0, 240, Color.WHITE); ``` ##### 2.3.2.3 方法定义 ```java void paintBackground (Graphics2D g) { g.setPaint( backgroundColor ); g.fillRect (0, 0, 640, 480); } ``` #### 2.3.3 图形绘制与颜色设置 在 Java 中，Graphics 类包含创建线条、形状、字符和显示图像的方法。可以使用 drawRect()、fillRect() 等方法绘制矩形，使用 drawArc()、fillArc() 等方法绘制弧形。颜色可以从 Color 类访问，Java 使用 24 位颜色方案。 #### 2.3.4 背景颜色示例代码 ```java import java.awt.Color; import java.awt. GradientPaint ; import java.awt.Graphics2D; import java.awt.Graphics; import java.awt .*; import javax.swing .*; public class backgroundColor { public static void main(String [] args) { JFrame frame = new JFrame (); Container pane = frame. getContentPane (); frame. setDefaultCloseOperation ( WindowConstants . EXIT_ON_CLOSE ); frame.setSize (640 , 480); frame. setVisible (true); JPanel MyBackground = new JPanel () { public void paintComponent (Graphics g) { Color treeColor = new Color (142 , 98, 89); Color leafColor = new Color (62, 142, 73); GradientPaint backgroundColor = new GradientPaint (0, 480, leafColor , 0, 240, treeColor); Graphics2D g2D = ( Graphics2D) g; g2D.setPaint( backgroundColor ); g2D.fillRect (0, 0, getWidth (), getHeight ()); } }; pane.add( MyBackground ); } } ``` #### 2.3.5 树框架类的实现 ```java import java.awt.Color; import java.awt. GradientPaint ; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.Rectangle; import java.awt.geom.Ellipse2D; import java.util.Random; import java.awt .*; import java.awt.event .*; import javax.swing .*; import javax.swing.JPanel; public class TreeFrame extends JFrame { private Tree canvas; public TreeFrame () { canvas = new Tree (); canvas. setPreferredSize (new Dimension (640 , 480)); Container cp = getContentPane (); cp.add(canvas); setDefaultCloseOperation ( EXIT_ON_CLOSE ); pack (); setVisible (true); } public class Tree extends JPanel { int x = 300; int y = 350; int branchingNum = 7; int length = 45; int width = 10; int angle = 25; int leafRandoms []; Color treeC ```