ZIZI - A3 再自己的“库”中增加体现丰富意象的“线条”

1 设计思路

在自己编写的“库”中增加新的内容，充分体现下列类型的意象（选择下列四类之一即可）：
丰富的情绪：钦佩 崇拜 欣赏 娱乐 焦虑 敬畏 尴尬 厌倦 冷静 困惑 渴望 厌恶 痛苦 着迷 嫉妒 兴奋 恐惧 痛恨 有趣 快乐 怀旧 浪漫 悲伤 满意 性欲 同情 满足 激烈 安静 愤怒，或者其他自己指定的情绪，尽量体现出在实验C1~C5中难以呈现的情绪；

我选择了第一道题，体现丰富的情绪，前面律老师给我们做过很多测试，气泡体现出情绪，气泡的变化大多都是线的运动速度、振幅还有线的尖锐程度等等，在此基础上，我想再加上颜色来体现情绪。
颜色可以影响情绪这个是经常运用到的，像卧室会使用蓝色的墙纸，因为蓝色会给人平静的感觉，蓝色

是大海与天空的颜色，给人平和、恬静、高远之感。在蓝色环境下工作能提高效率，因此许多办公桌隔板是蓝色的。蓝色还能改善记忆、安抚焦虑情绪。有助
于人的睡眠；餐厅会大量用到黄色的灯光，因为黄色会促进人的食欲等等。

颜色与对应的情绪
红色：热烈 喜庆 激情 避邪 危险、热情、浪漫、火焰、暴力、侵略
橙色：温暖 食物 友好 财富 警告
黄色：艳丽 单纯 光明 温和 活泼、明亮、光辉、疾病、懦弱
绿色：生命 安全 年轻 和平 新鲜、自然、稳定、成长、忌妒
青色：信任 朝气 脱俗 真诚 清丽
蓝色：整洁 沉静 冷峻 稳定 精确、忠诚、安全、保守、宁静、冷漠、悲伤
紫色：浪漫 优雅 神秘 高贵 妖艳、创造、谜、忠诚、稀有
白色：纯洁 神圣 干净 高雅 单调、天真、洁净、真理、和平、冷淡、贫乏
灰色：平凡 随意 宽容 苍老 冷漠
黑色：正统 严肃 死亡 沉重 恐怖、能力、精致、现代感、死亡、病态、邪恶

2 情绪线条设计

2.1 从安静到兴奋

• 情绪从安静到兴奋
• 解释：整个圆从刚开始的平整，圆润，慢慢变得锐利，对应了人的情绪从安静到兴奋甚至有点激烈。
  效果：
  线性
  
  填充
  
  调用代码：

var filled = false;
function setup() 
{
   createCanvas(800, 800);
   background('#fff1e6');
}

function draw() 
{
  NosiyCircle();
 }


function mouseClicked() 
{ 
  filled = !filled; 
}

2.2 浪漫—You are my angel.

老师的气泡是从图形的尖锐度、快慢等等来营造人的心情的，没有从颜色下手，浪漫这个意象在老师给的气泡中很少体现。因此我打算从颜色下手，营造给人浪漫感觉的图形。我这次画的这个线，有一定的柔和度，像蝴蝶🦋和翅膀这样比较浪漫的事物，并且颜色给的是以红色、粉红色为主的浪漫色调，营造出浪漫的感觉。

颜色：

var colorTheme = ["#FBD1D3", "#F198AF", "#EBB2D6", "#9F81CD", "#766DC1"];

调用代码：

function setup() 
{
  createCanvas(windowWidth, windowHeight);
  mouseX = width / 4;
}

function draw() 
{
  drawRomanticLine();
}

2.3 焦虑的线

黄色经常用在一些警示牌上面，因为黄色是特别显眼的一个颜色，特别引人注目的一个颜色，给人以警示的感觉，也是所有颜色中，最能带给人焦虑的颜色。因此焦虑的线我在正余弦改变振幅，添加扰动的下，还加了黄色元素进去，更能够引起人焦虑的感觉。

let waves = [];
const wavesNum = 5;

let yoff = 0.0;
let themeColor;

function setup() {
  createCanvas(windowWidth, windowHeight);
  themeColor = 255;
  for (let i = 0; i < wavesNum; i++) {
    waves.push(new anxietyWave(i));
  }
}

function draw() 
{
  push();
  colorMode(RGB, 255, 255, 255);
  background(255);
  pop();
  for (let i = 0; i < waves.length; i++) 
  {
    waves[i].display();
  }
  anxietyWaveColor();
}

2.4 愤怒的线

愤怒一般用激动、强烈、爆炸性色彩，通常使用紫色、黑色、灰色、红色常伴随着火灾、战争、事故、流血、受伤、恐怖和死亡，又有痛苦、愤怒、紧张感。明度要按一些，红色则要明显一些。
因此我在表现“怒”方面，使用兴奋色红色搭配令人感到不安的紫色或具有压抑感的黑色，可以让人通过颜色感到愤怒。

• 调用方式

var incr2, incr3, h, a;
var incr1 = 0.0004;
function setup() 
{
  createCanvas(900, 400);
   background("#292929");
  colorMode(HSB, 360, 100, 100, 100);
}

function draw() 
{
  frameRate(30);
  fill(0,1);
  noStroke();
  rect(0, 0, width, height);
  incr2 = 300;
  incr3 = -250;
  
  h = 0;
  a = 100;
  strokeWeight(random(.3,1));
  for(var i = 0; i < 1; i++) 
  {
    angryLine(h,a,incr1,incr2,incr3);
    incr1 += 0.004;
    incr2 -= 37;
    incr3 += 70;
    h += 5;
    a -= 7;
  }
}

2.5 悲伤的圆

提到代表悲伤的色彩，我首先想到的就是蓝色。因为蓝色是后退色，同时也是冷色系色彩，所以会给人一种消极且内向的感觉。采用低明度、低饱和度的色调进行配色，增加寂寞及忧郁的气息，展现出遥不可及或空虚的感受。

var a;
function setup() {
  createCanvas(1112, 834);
  colorMode(HSB, 1);
  angleMode(DEGREES);
  noFill();
  a = new SadCircle();
  noStroke();
}
function draw() 
{
  a.DrawSadCircle();
}

3 创作出体现丰富意象感受的作品/应用

3.1 使用愤怒的线作图

通过增加愤怒的线，从而增强图像中愤怒的情感。

代码

var incr2, incr3, h, a;
var incr1 = 0.0004;
function setup() 
{
  createCanvas(900, 400);
   background("#292929");
  colorMode(HSB, 360, 100, 100, 100);
  //background(263,93,66);
}

function draw() 
{
  frameRate(30);
  fill(0,1);
  noStroke();
  rect(0, 0, width, height);
  incr2 = 300;
  incr3 = -250;
  
  h = 0;
  a = 100;
  strokeWeight(random(.3,1));
  for(var i = 0; i < 9; i++) 
  {
    angryLine(h,a,incr1,incr2,incr3);
    incr1 += 0.004;
    incr2 -= 37;
    incr3 += 70;
    h += 5;
    a -= 7;
  }
}

3.2 怀旧的图形

我觉得怀旧的那种颜色是东西放久了退色后遗留下来的颜色，像灰色，棕色，咖啡色。因此我用了米色和咖啡色，和简单的noise函数生成的图形，有点思绪流动的感觉，营造出一种怀旧的感觉。

源码：

var noiseX, noiseY;

function setup()
{
  createCanvas(400, 400);
  noiseX = random(10000);
  noiseY = random(10000);
  stroke("#e29578");
}

function draw()
{
  background(255, 250, 205);
  for(var x = 0; x < width; x++)
  {
    for(var y = 0; y < height; y++)
    {
      var n = noise(x * 0.003 + noiseX, y * 0.003 + noiseY, frameCount * 0.004);
      if(int(n * 100) % 2 == 0)
      {
        point(x, y);
      }
    }
  }
}

3.3 娱乐的字体

let myFont;
let points;
let lapse = 0;   

function setup() {
	createCanvas(1112, 834);
	points = getFontOutlinePointsForWord("CODE");
	frameRate(5) 
}

const bigBubbleSizes = [6, 10, 16];
const bigBubbleColours = ["#ffff00", "#00ffff", "#ff00ff"];
const bigBubblePositions = [];

function draw() {
	bigBubblePositions.length = 0;    
	background(50);
	stroke('white');
	noFill();
	
	for (let point of points) {	
		const posX = point.x;
		const posY = point.y;
		
		circle(posX, posY, 2);
		if (random(100) > 90) {
			bigBubblePositions.push({x: posX, y: posY});
		}
	}
	
	for (let point of bigBubblePositions) {
		fill(random(bigBubbleColours));
		circle(point.x, point.y, random(bigBubbleSizes));
	}
}

//Ignore this
function preload() {
	myFont = loadFont("Righteous-Regular.ttf");
}

//Ignore this
function getFontOutlinePointsForWord(word) {
	return myFont.textToPoints(word, 55, height / 2, 220, {
		sampleFactor: 0.3,
		simplifyThreshold: 0
	});
}

function mousePressed(){
  if (millis() - lapse > 400){
    save('pix.jpg');
    lapse = millis();
  }
}

3.4 快乐的字体

//the custom font we'll use
let font;
//an array of objects with x and y properties, outlining some text
let points;
let hu = 0;
let oldpx = 0;
let oldpy = 0;

function setup() {
	createCanvas(windowWidth, screen.availHeight);
	let chosenWord = random(["Happy"]);
	textSize(10);
	points = getFontOutlinePointsForWord(chosenWord);
	colorMode(HSB, 255);
}

function draw() {
	background(255);
	//stroke('white');
	//noFill();
	for (let i = 0; i < points.length; i++) {
		let p = points[i];
		let radius = 10 //random(2, 14);
		stroke(255);
		fill((i / points.length * 3 * 255)%255, 200, 255);
		circle(p.x, p.y, radius);
	}
}

function preload() {
	font = loadFont("Barrio-Regular.ttf");
}

//you can ignore this initially
function getFontOutlinePointsForWord(word) {
	return font.textToPoints(word, 200, height / 2, 280, {
		sampleFactor: 0.1,
		simplifyThreshold: 0
	});
}