ShaderJoy 的兴趣技术杂货铺

效果图外观模式（也称为门面模式），外观模式也属于结构型模式，这个场景其实在日常开发中使用的频率还是非常高的，也非常好理解的，简单的来讲就是将多个复杂的业务封装成一个方法，在调用此方法时可以不必关系具体执行了哪些业务，而只关心结果即可。外观模式是隐藏了系统的复杂性，能够为子系统中的一组接口提供一个统一的接口。客户在使用系统时不必和子系统打交道了，降低了客户和子系统间的耦合。完整代码点类 —— PointObj 的定义（子系统角色之一）class PointObj{ ...

效果图原图完整代码//String letter[] = {"色","即","是","空","空","即","是","色"};//String letter[] = {"S","h","a","d","e","r","J","o","y"};String letter[] = {"P","r","o","c","e","s","s","i","n","g","J","o","y"};PImage img;ArrayList...

效果图稍加修改后的彩色文字完整代码和注释float x = 0, y = 0;float stepSize = 5.0;String letters = "ProcessingJoy & ShaderJoy! ";float fontSizeMin = 3;float angleDistortion = 0.01;int counter = 0;PFont font;void setup() { // use full screen size ...

效果图完整代码和注释String wordStr = "ProcessingJoy " + "ShaderJoy " + "ProcessingJoy " + "ShaderJoy ";char[] words = wordStr.toCharArray();color colors[] = {#000000, #ffffff};PFont font;PImage img;void preload() { font = createFont("cmb10.ttf", .

效果图代码十分简单，所以就话不多说，直接看代码与注释完整代码与注释定义粒子的 Particle 类class Particle{ float mass = random(0.003, 0.03); PVector position; PVector velocity = new PVector(0, 0); color colors[] = {#52489c, #4062bb, #59c3c3, #ebebeb, #f45b69}; int idx = 0;

效果图完整代码和注释main.pdeParticle[] p = new Particle[800];int diagonal;void setup() { size(640, 480); for (int i = 0; i<p.length; i++) { p[i] = new Particle(); p[i].o = random(1, random(1, width/p[i].n)); } diagona...

效果图完整代码与注释main.pdeString str = "Processing & Shader Joy ~";ArrayList<Type> str_arr = new ArrayList<Type>();PFont font;//let sdgreg;void preload() { font = createFont("cmb10.ttf", 97); //font = loadFont("LetterGothicStd-.

效果图完整代码与注释PImage img;float radius;PVector center;float totalPins = 50; ///< 圆周上分布针孔的个数float steps = 200; ///< 直线分段步长阈值float stepsPerFrame = steps * 0.01;float totalPoints = 20;ArrayList<Point> points = new ArrayList<Poi...

效果图什么是适配器模式在开发过程中，使用一个已经存在的类，而他的接口不符合我们的需求。这个时候我们本着开闭原则，要创建一个既符合我们需求又实现了已存在的接口的类，这个类可以把其他不相关或不可预见的类协同起来一起工作。我们创建的这个类就是适配器类，起到了一个转换的作用。完整代码和解释假设我们原有一个接口 IMove.javapublic interface IMove { void move();}但是它不满足我们当前的需求（直接修改的话，违反了开闭原则），因...

效果图球形粒子的缓动特效EasingEaseInCubicEasingEaseOutCubicEasingEaseInOutCubic什么是桥接模式桥接模式（Bridge Pattern）是将抽象部分与它的实现部分分离，使它们都可以独立地变化。 Abstraction（抽象类）：用于定义抽象类的接口，并且维护一个指向 Implementor 实现类的指针。它与 Implementor 之间具有关联关系（本立的 Dot.java）。 Refi...

效果图代码和完整注释首先我们来看看圆弧类的定义，Circle.pdeclass Circle { PVector pos; PVector prevPos; float dir; float radius; float angle; Circle(){}}主要的逻辑实现，由于代码很简单，那么我们就直接结合代码和注释来进行讲解main.pdeArrayList<Circle> circles = new Arr...

效果图策略模式（Strategy Pattern）定义了一系列算法（以缓动算法为例），把它们一个个封装起来，并且使其可以互相替换。Strategy 可以使算法独立于使用算法的客户端。它有三个部分组成 Context（环境角色）：持有一个对 Strategy 的引用，最终给客户端调用。 Strategy（抽象策略）：定义了一个公共接口，让不同的算法以不同的方式来实现。通过这个接口，Context 可以调用不同的算法。 ConcreteStrategy（具体策略）：实现 .

效果图建造者模式（Builder Pattern），它的目的是将一个复杂对象的构建与它的表示相分离，使得同样的构建过程可以创建不同的表示。它的定义包括如下四个部分 Builder（抽象建造者）：为创建一个产品对象的各个部件指定抽象接口。 ConcreteBuilder（具体建造者）：实现 Builder 的接口以构造和装配该产品的各个部件，定义并明确它所创建的表示，并提供一个检索产品的接口。 Director（建造指导者）：构造一个使用 Builder 接口的对象.

效果图带描边的粒子效果原图承接上文特效设计也需要设计模式—— 工厂方法模式【Java】，工厂方法模式有它自身的缺陷，比如要求产品为同一类型的（比如圆形粒子），倘若要生产其他产品（例如：方形粒子），则需要再创建对应的工厂。如果这样的话，后续工厂会越来越多，非常难以管理。同时，假如这次又增加新的需求 —— “给圆形/矩形粒子加上描边”，那么我们应该怎么修改上一节中的代码以方便日后的扩展呢？为了解决这个问题，我们可以扩大现有工厂的规模，增加一条生产线，专门用来生产圆形粒子和方形粒子，这样...

效果图三角形粒子原图工厂方法模式在简单工厂模式中只提供一个工厂类，该工厂类处于对产品类进行实例化的关键位置，它需要知道每一个产品（粒子）对象的创建细节，并决定何时实例化哪一个产品（粒子）类。简单工厂模式最大的缺点是当有新产品要加入到系统中时，必须修改工厂类，需要在其中加入必要的业务逻辑，这违背了“开闭原则”。此外，在简单工厂模式中，所有的产品都由同一个工厂创建，工厂类职责较重，业务逻辑较为复杂，具体产品与工厂类之间的耦合度高，严重影响了系统的灵活性和扩展性，（在前文 特...

效果图圆形粒子方形粒子注：源代码是根据我的前文进行修改的ProcessingJoy —— 粒子流逝特效【JAVA】简单工厂简单工厂模式，又被称为静态工厂方法模式，属于创建型模式。其实质是工厂类根据传入的参数，动态的决定应该创建哪一个产品类的实例（本文则以创建不同形状的粒子为例）简单工厂的 UML 图Particle.java它是各种粒子的抽象基类（父类），即 UML 图中的抽象产品Product ，负责描述所有实例所共有的公共接口。...

效果图什么是设计模式什么是设计模式？设计模式（Design pattern）是一套被反复使用、多数人知晓的、经过分类编目的、代码设计程序精英们的经验总结为什么使用设计模式？使用设计模式是为了可重用代码（不修改或者少修改代码来解决新的问题），减少重复工作、让代码更容易被他人理解、保证代码可靠性。设计模式是编程过程中的一种中间层面的技巧或者经验（微观层面的如算法、数据结构、语法，宏观层面的如框架、工具箱、系统架构），是许多优秀的程序员通过大量实际项目的磨练所总结出来的 “内功秘...

效果图实际显示的效果点击鼠标左键后的 debug 效果只有两个圆的效果关键算法解析如何在平面上找到两个圆的交点，如果存在的话，我们的目标是找到这两个点 (都用 P3 = (x3, y3) 表示) 。首先计算圆心之间的距离 d。d = ||P1 - P0||。则有以下三种情况需要排除如果d > r0 + r1 没有解，这两个圆是独立的。 如果d < |r0 - r1|，那么没有解，因为一个圆包含在另一个圆中。 如果d = 0, r0 =...

效果图遇到鼠标发生排斥的效果点击鼠标产生吸力的效果切换图像的效果完整代码和注释main.pdeimport controlP5.*;ControlP5 cp5;ArrayList<PImage> imgs = new ArrayList<PImage>();String imgNames[] = {"data/images1.jpg", "data/images2.jpg", "data/images3.jpg"};int ...

效果图完整代码和注释原理很简单，代码也不复杂，直接上代码import java.util.Iterator;float circleRadius = 100;/// @note 笔迹的生存期float fadeOutTime = 2000;/// @note 保存多个笔迹的列表ArrayList<ArrayList<PVector>> pointsList = new ArrayList<ArrayList<PVector>&gt.

效果图静态图动态图【GIF 压缩有质量损失】完整代码和注释main.pde主程序主要就是每帧分别构造两种粒子（Spark / Particle Line），初始化它们的上一帧位置和本帧位置，然后将它们放入粒子列表，每帧去旋转（旋转策略不同）并绘制它们。float angleRate = 10; ///< 角度更新步长int particleLinesPerFrame = 3; ///< particle lineint ...

效果图完整代码和注释main.pde逻辑非常简单，所以大家直接看代码吧，我就不多说了。提一嘴 HSB 颜色空间，因为在 Processing 中是仅次于 RGB 颜色空间的存在HSB 其实与HSV是完全相同的颜色空间，只是名字不同HSV（HSB）色调（H,hue）：在0~360°的标准色轮上，色相是按位置度量的。在通常的使用中，色相是由颜色名称标识的，比如红、绿或橙色。黑色和白色无色相。饱和度（S,saturation）：表示色彩的纯度，...

效果图静态图动态图，压缩有质量损失完整代码和注释main.pde主程序的逻辑，主要分为以下几个部分：记录鼠标的轨迹 根据鼠标轨迹的前后位置（方向向量）来添加新的粒子，并更新已存在粒子的状态 序列化以上这些数据，以便传入 shaderfinal int MAX_PARTICLE_COUNT = 70;final int MAX_TRAIL_COUNT = 30;color colorScheme[] = {#E69F66, #DF843A, #...

效果图黄色竖线为粒子的水平分界 —— 用于区分是否激活（有重力）完整代码和注释main.pde核心的逻辑都在此代码中，主要的流程可以被简单概括为—— 首先根据窗口的宽度 width，我们人为地划分为了 columnCount 个区间，然后每个区间通过设定不同的 rotate value (旋转数组) 来构造该flow field （流场）不同的分区。之后每帧都会创建若干（particlePerFrame）的粒子，只要它们是非激活态就会依照流场向量的方向来运动，直到它们遇到了...

效果图完整代码和注释main.pde主程序很简单，主要的逻辑在于 draw 方法中，根据 Blob 上次的位置和当前的位置计算方向向量，然后凭借这个方向计算出新的位置，并将其作为直线的另一个端点（其中一个端点是 Blob 的当前位置）int blobCount = 3000;ArrayList<Blob> blobs = new ArrayList<Blob>();float globalHue;void setup(){ size..

效果图看起来很复杂的效果，其实它的实现逻辑十分简单，话不多说，我们直接上源码！完整代码与注释主程序代码逻辑很简单，主要就是做两件事：（随机）初始化各个 Blob ； 然后遍历 Blob 进行绘制。main.pde/// @note 全局变量int blobCount = 30;ArrayList<Blob> blobs = new ArrayList<Blob>();float borderOffset = 30; ///< ...

效果图其中关键的就是如何按心形 ♥ 排列粒子简单起见，只考虑一层（深度）的情况for (float angle = -90; angle < 90; angle += angleSteps){ float t = angle * 2.0; ///< [-180., 180.] float x = 16 * pow(sin(radians(t)), 3); float y = -13 * cos(..

效果图圆域方形域完整代码和注释float speed = 0.1;int maxSize = 20;int falloff = 100;int steps = 20;color color_0;color color_1;void setup(){ size(640, 640); textAlign(CENTER); ///< 文字居中对齐 noStroke(); color_0 = color(255);...

效果图完整代码和注释// 定义立方体的大小和其分块的大小int cubeSize = 50;int blockSize = 10;void setup() { // Make a 3d sketch to match the window's dimensions. size(640, 480, P3D); colorMode(HSB, 255);}void draw() { background(0); noStroke(); ...

效果图关键算法说明弧线的绘制，我们使用的是 Processing 的 arc 方法arc(a, b, c, d, start, stop)其 5 个参数分别表示如下含义：a float: 弧线椭圆的 x 坐标b float: 圆弧椭圆的 y 坐标c float: 默认情况下圆弧椭圆的宽度d float: 默认情况下圆弧椭圆的高度start float: 开始圆弧的角度，用弧度表示stop float: 圆弧停止的角度，用弧度表示举...

效果图精要示意图大笔触的效果在大笔触上平行的叠加小笔触的最终合成效果完整代码和注释String[] imgNames = {"portrait1.jpg", "portrait2.jpg", "portrait3.jpg"};PImage img;int imgIndex = 0;void nextImage(){ background(255); loop(); frameCount = 0; /// @note...

三角形图元圆形图元菱形图元方形和菱形图元完整代码和注释String[] imgNames = {"beard.jpg", "cow.jpg", "img.jpg"};color backgroundColor = color(255);float spacing = 3;float goldenAngle = 137.5;float minThickness = 1.0;float maxThickness = 7.0;int i...

效果图金属性随着高度增加而增大，粗糙度随着宽度增加而增大金属性随着高度增加而增大，粗糙度随着宽度增加而增大理论相关ProcessingJoy —— 基于物理的渲染 PBR 入门（一）【JAVA】【GLSL】ProcessingJoy —— 基于物理的渲染 PBR 入门（二）【JAVA】【GLSL】有了前两篇的理论铺垫，我们就可以很容易写出自己的 PBR Demo完整代码和详细注释如下：主流程代码 Main.pdePShader sh;vo....

上接ProcessingJoy —— 基于物理的渲染入门（一）【JAVA】【GLSL】4. BRDFBRDF (Bidirectional Reflective Distribution Function)，即双向反射分布函数，是一个将入射(光)方向、出射(视图)方向、表面法线 n 和表面参数 a （表示微表面粗糙度）作为输入的函数。在给定一个不透明表面的材料属性后，BRDF 能近似出每个单独的光线 对最终反射光的贡献。例如，如果表面有一个完美光滑的表面(~像镜子一样)，那么 BRDF...

理论PBR（Physically Based Rendering），或者更常见的说法是基于物理的渲染，是一组渲染技术，它们或多或少基于与物理世界更接近的相同的基础理论。由于基于物理的渲染旨在以物理上可信的方式模拟光线，所以它通常看起来比那些凭经验的灯光算法（如 Phong 和 Blinn-Phong） 更真实。它不仅看起来更好，并且因为它接近于实际的物理，我们(特别是美术设计人员)可以根据物理参数来创建表面材质，而不必诉诸廉价的 hack 和调整来使光线看起来正确。基于物理参数创作材质的一个更大的...

效果图代码详解由于完整代码比较长，限于篇幅关系，我把它放在了文末，各位读者可以往后拉来进行对照。这个效果的主要思想，是通过叠加各层的圆环来实现的，接下来针对某一层我们来展开分析offset 的可视化 vec2 offset = (.0025 * z) * vec2(cos(z - (.2 * z) * t), sin(z - (.2 * z) * t));可见它的作...

效果图完整代码和详细注释主流程 main.pdeimport lunar.*;// 噪声种子LVector offset = new LVector();LVector direction = new LVector(0.01, 0.01, 0.01);// Timer，用于动画int timer = 0;int interval = 180;/// @note 本地网格PShape humanScaleModel;void settings().

效果图完整代码和详细注释主流程 main.pdeimport lunar.*;/// @note 用鼠标交互创建一个简单的2D粒子系统// 800x800 的画布尺寸LVector windowSize = new LVector(800, 800);LVector canvasSize = new LVector(windowSize.x *pow(0.625, 2), windowSize.y * 0.625);LVector canvasOffset = n..

效果图填充的效果不填充的效果稍加修改后的效果完整代码和详细注释主流程 main.pdeimport megamu.mesh.*;ArrayList<Particle> allParticles = new ArrayList<Particle>();int maxLevel = 5;boolean useFill = true;class Particle{ int level; ...

效果图完整代码和详细注释主流程 main.pdeimport geomerative.*;String word = "ShaderJoy";//String word = "潘醒迟";//String word = "ProcessingJoy"; int fontSize = 90;RShape grp;RPoint[][] pointsInPath;ArrayList<Particle> particles = new Arr...