![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Processing
写代码的资资
这个作者很懒,什么都没留下…
展开
-
[资资]A5
在做A2作业的时候,我画了一副江南图书馆雪景图,其中下雪的粒子,我是每次draw的时候速度+0.8,没有模拟出自由落体的效果,因此结合《代码本色》第二章力,因此在A5这个实验,我想要把地球引力,空气和流体阻力加入进来。...原创 2020-12-25 13:47:24 · 285 阅读 · 0 评论 -
ZIZI - A3 再自己的“库”中增加体现丰富意象的“线条”
文章目录1 设计思路2 情绪线条设计2.1 从安静到兴奋2.2 浪漫---You are my angel.2.3 焦虑的线2.4 愤怒的线2.5 悲伤的圆2.6 怀旧3 创作出体现丰富意象感受的作品/应用3.1 使用愤怒的线作图怀旧的图形1 设计思路在自己编写的“库”中增加新的内容,充分体现下列类型的意象(选择下列四类之一即可):丰富的情绪:钦佩 崇拜 欣赏 娱乐 焦虑 敬畏 尴尬 厌倦 冷静 困惑 渴望 厌恶 痛苦 着迷原创 2020-12-13 22:44:42 · 292 阅读 · 1 评论 -
ZIZI - A4 将”随机性&概率论”的相关技术加入到自己的“库”中
文章目录一、Random Gaussian圆1.1 构思1.2 效果1.3 调用案例1.4 利用Random Gaussian圆作图一、Random Gaussian圆1.1 构思P5.js中提供一个函数randomGaussian,因此我用这个函数生成360个值,作为直线的长度,组成一个圆,形成爆炸圆的效果。1.2 效果动图效果1.3 调用案例高斯圆调用案例let circle1 = new Array(360);var a;function setup() {原创 2020-12-13 22:42:34 · 289 阅读 · 1 评论 -
江南画
//江南秋,有落叶let gravity = 1;let timeUnit = 0.5;let windy = false;let landScape = null;var falg = false;function setup() { createCanvas(600,600); //createCanvas(windowWidth, windowHeight); frameRate(24); landScape = new LandScape([], []); cre.原创 2020-11-28 23:04:00 · 259 阅读 · 0 评论 -
[0115ZIZI]扩展库组织架构介绍
文章目录一.扩展库组织架构1.1 扩展库介绍1.2 扩展库一览图二.接口架构介绍2.1 扩展line库2.2 扩展circle库2.3 扩展arc库2.4 扩展rect库一.扩展库组织架构1.1 扩展库介绍这次我主要扩展了四种接口,分别是圆(circle)、线(Line)、方形(rect)、弧线(arc)。这四种接口分别包含在四个js文件中。1.2 扩展库一览图二.接口架构介绍这边主要介绍每个库中的函数架构,函数的调用和方法可以查看下面的链接。相关库链接2.1 扩展line库2.2原创 2020-11-28 10:05:27 · 230 阅读 · 0 评论 -
[0115ZIZI]扩展P5.js库相关链接
ZIZI扩展P5.js库相关链接1. 线库——扩展P5.js的line接口2. 圆库——扩展P5.js的circle接口3. 方形库——扩展P5.js的rect接口4. 弧线库——扩展P5.js的arc接口原创 2020-11-28 10:04:33 · 192 阅读 · 0 评论 -
[0115资资]扩展p5.js中的arc接口
文章目录1 旋转的弧线1.1效果展示1.1.1 单色的旋转弧线1.1.2 颜色改变的旋转弧线1.2 调用方法1.2.1 函数参数介绍1.2.2 函数案例(demo)1 旋转的弧线1.1效果展示1.1.1 单色的旋转弧线Nums = 50,中心位置在(200,200)Nums = 20,中心位置在(width/2,height/2)1.1.2 颜色改变的旋转弧线1.2 调用方法1.2.1 函数参数介绍单色圆案例/****************************原创 2020-11-28 08:46:07 · 251 阅读 · 0 评论 -
[0115资资]扩展P5.js中的rect接口
文章目录1 波浪正方形1.1 效果展示1.1.1 单个波浪正方形1.1.2 两个波浪正方形1.1.3 三个波浪正方形1.2 波浪圆函数调用方法1.2.1 函数参数解释1.2.2 调用方法案例(demo)1 波浪正方形1.1 效果展示1.1.1 单个波浪正方形1.1.2 两个波浪正方形1.1.3 三个波浪正方形1.2 波浪圆函数调用方法1.2.1 函数参数解释/**************************************波浪正方形1.(x,y)代表圆心所在的位置2.原创 2020-11-28 08:43:42 · 252 阅读 · 0 评论 -
[0115资资]扩展P5.js的Line接口
彩带Line——颜色随机粗细随机展示调用方法var RibbonLines = []function setup() { createCanvas(windowWidth,windowHeight); RibbonLines = CreateRibbonLine(50,50,400,400); }function draw() { noStroke() RibbonLines.forEach(line=>{ line.update() line.draw(原创 2020-11-28 08:41:11 · 600 阅读 · 1 评论 -
[0115资资]扩展p5.js的Circle库
彗星圆一直想做这种跟彗星一样,带一个尾巴的运动物体,实现的方式是每次绘制一些柏林噪声点,然后慢慢的遮盖住已经绘制的图案。效果展示由于颜色和大小是随机的,因此多次绘制会出现比较好的效果。调用方法let bg;function setup() { createCanvas(windowWidth, windowHeight); background(255); bg = CreateFrostedBackground();}function draw() { randomSe原创 2020-11-28 08:36:45 · 908 阅读 · 1 评论 -
p5.js|frameCount属性
如果想要实现一些前后相互关联的效果,那就可以用到frameCount这个属性。frameCount记录了从开始运行到目前一共刷新了几帧,draw()是连续运行的,因此可以先在setup()函数中frameRate,一秒刷新的次数。官网案例function setup() { frameRate(30); textSize(30); textAlign(CENTER);}function draw() { background(200); text(frameCou原创 2020-10-30 09:32:03 · 2838 阅读 · 0 评论 -
P5.js|createCols()函数的使用方法
在使用p5.js使,看到有一些demo都使用了createCols很是迷惑,在P5.js中的官方Reference中也没有查到这个相关函数,后来再仔细查看代码这个函数是这样写的。//调用方式const COL = createCols("https://coolors.co/app/f1e7b6-400082-fe346e-f3c623-06aed5");function createCols(_url){ let slash_index = _url.lastIndexOf('/');原创 2020-10-30 09:09:16 · 383 阅读 · 0 评论 -
P5.js:两张图像的叠加,一张每次刷新,一张不刷新
let x = 200;let y =200;let extraCanvas;function setup(){ createCanvas(400,400); extraCanvas = createGraphics(400,400); extraCanvas.background(255,0,0); background(0);}function draw(){ //iamge(extraCanvas,0,0); background(0); x += random(-5.原创 2020-10-06 10:21:47 · 838 阅读 · 0 评论 -
代码本色-示例1-运动的弹球
Mover mover;void setup(){ size(200,200); smooth(); mover = new Mover();}void draw(){ background(255); mover.update(); mover.checkEdges(); mover.display();}class Mover{ PVector location; PVector velocity; Mover() ...原创 2020-09-24 22:07:48 · 170 阅读 · 0 评论