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

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

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

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

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

2.1 从安静到兴奋

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

var filled &＃61; false;
function setup()
{createCanvas(800, 800);background(&＃39;#fff1e6&＃39;);
}function draw()
{NosiyCircle();}function mouseClicked()
{ filled &＃61; !filled;
}


2.2 浪漫—You are my angel.

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

颜色&＃xff1a;

var colorTheme &＃61; ["#FBD1D3", "#F198AF", "#EBB2D6", "#9F81CD", "#766DC1"];


调用代码&＃xff1a;

function setup()
{createCanvas(windowWidth, windowHeight);mouseX &＃61; width / 4;
}function draw()
{drawRomanticLine();
}


2.3 焦虑的线

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

let waves &＃61; [];
const wavesNum &＃61; 5;let yoff &＃61; 0.0;
let themeColor;function setup() {createCanvas(windowWidth, windowHeight);themeColor &＃61; 255;for (let i &＃61; 0; i < wavesNum; i&＃43;&＃43;) {waves.push(new anxietyWave(i));}
}function draw()
{push();colorMode(RGB, 255, 255, 255);background(255);pop();for (let i &＃61; 0; i < waves.length; i&＃43;&＃43;) {waves[i].display();}anxietyWaveColor();
}


2.4 愤怒的线

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

• 调用方式

var incr2, incr3, h, a;
var incr1 &＃61; 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 &＃61; 300;incr3 &＃61; -250;h &＃61; 0;a &＃61; 100;strokeWeight(random(.3,1));for(var i &＃61; 0; i < 1; i&＃43;&＃43;) {angryLine(h,a,incr1,incr2,incr3);incr1 &＃43;&＃61; 0.004;incr2 -&＃61; 37;incr3 &＃43;&＃61; 70;h &＃43;&＃61; 5;a -&＃61; 7;}
}


2.5 悲伤的圆

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

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

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

3.1 使用愤怒的线作图

通过增加愤怒的线&＃xff0c;从而增强图像中愤怒的情感。

代码

var incr2, incr3, h, a;
var incr1 &＃61; 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 &＃61; 300;incr3 &＃61; -250;h &＃61; 0;a &＃61; 100;strokeWeight(random(.3,1));for(var i &＃61; 0; i < 9; i&＃43;&＃43;) {angryLine(h,a,incr1,incr2,incr3);incr1 &＃43;&＃61; 0.004;incr2 -&＃61; 37;incr3 &＃43;&＃61; 70;h &＃43;&＃61; 5;a -&＃61; 7;}
}


3.2 怀旧的图形

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

源码&＃xff1a;

var noiseX, noiseY;function setup()
{createCanvas(400, 400);noiseX &＃61; random(10000);noiseY &＃61; random(10000);stroke("#e29578");
}function draw()
{background(255, 250, 205);for(var x &＃61; 0; x < width; x&＃43;&＃43;){for(var y &＃61; 0; y < height; y&＃43;&＃43;){var n &＃61; noise(x * 0.003 &＃43; noiseX, y * 0.003 &＃43; noiseY, frameCount * 0.004);if(int(n * 100) % 2 &＃61;&＃61; 0){point(x, y);}}}
}


3.3 娱乐的字体

let myFont;
let points;
let lapse &＃61; 0; function setup() {createCanvas(1112, 834);points &＃61; getFontOutlinePointsForWord("CODE");frameRate(5)
}const bigBubbleSizes &＃61; [6, 10, 16];
const bigBubbleColours &＃61; ["#ffff00", "#00ffff", "#ff00ff"];
const bigBubblePositions &＃61; [];function draw() {bigBubblePositions.length &＃61; 0; background(50);stroke(&＃39;white&＃39;);noFill();for (let point of points) { const posX &＃61; point.x;const posY &＃61; 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 &＃61; 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(&＃39;pix.jpg&＃39;);lapse &＃61; millis();}
}

3.4 快乐的字体

//the custom font we&＃39;ll use
let font;
//an array of objects with x and y properties, outlining some text
let points;
let hu &＃61; 0;
let oldpx &＃61; 0;
let oldpy &＃61; 0;function setup() {createCanvas(windowWidth, screen.availHeight);let chosenWord &＃61; random(["Happy"]);textSize(10);points &＃61; getFontOutlinePointsForWord(chosenWord);colorMode(HSB, 255);
}function draw() {background(255);//stroke(&＃39;white&＃39;);//noFill();for (let i &＃61; 0; i < points.length; i&＃43;&＃43;) {let p &＃61; points[i];let radius &＃61; 10 //random(2, 14);stroke(255);fill((i / points.length * 3 * 255)%255, 200, 255);circle(p.x, p.y, radius);}
}function preload() {font &＃61; 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});
}