【代码】Processing笔触手写板笔刷代码合集

代码来源于openprocessing,考虑到国内不是很好访问,我把我找到的比较好的搬运过来!

合集

参考:https://openprocessing.org/sketch/793375
https://github.com/SourceOf0-HTML/processing-p5.js/tree/master

这个可以体验6种笔触,作者介绍如下:

There are multiple pages. Use the "←" "→" buttons below to switch.

The second page explains the UI.

I will explain the sketches I made in the past.

Some variable names have been changed. I wanted to explain in order, so I divided the processing in detail. The UI has been added so the code is getting longer ...

Video of this sketch in action (Twitter)

https://twitter.com/BUN_information/status/1195300719231791104
Gorilla Sun has written an explanation of each part with animations on his blog. Thank you!

https://gorillasun.de/blog/Simulating-brush-strokes-with-Hookes-Law-in-P5JS-and-Processing

其中三种种笔触的代码如下:

笔触4

原笔触代码地址:https://openprocessing.org/sketch/748836

特点:越快越粗,很适合画速写。

代码

java 复制代码
/*
setup=()=>{m=n=x=y=u=v=0,s=0.08,f=0.8;createCanvas(L=500,L);background(C=255)}
draw=()=>{u+=(m-x)*s,v+=(n-y)*s,u*=f,v*=f,a=x,b=y;strokeWeight(abs(u+v)/3+1);line(x+=u,y+=v,a,b)}
mousePressed=()=>{x=m=mouseX,y=n=mouseY}
mouseDragged=()=>{m=mouseX,n=mouseY}
/**/

function setup() {
  mX = mY = x = y = ax = ay = 0;
  spring = 0.08;
  friction = 0.8;
  createCanvas( 500, 500 );
  background( 255 );
}

function draw() {
  ax += ( mX - x ) * spring;
  ay += ( mY - y ) * spring;
  ax *= friction;
  ay *= friction;
  
  oldX = x;
  oldY = y;
  x += ax;
  y += ay;
  strokeWeight( abs( ax + ay ) / 3 + 1 );
  line( x, y, oldX, oldY );
}

function mousePressed() {
  mX = x = mouseX;
  mY = y = mouseY;
}

function mouseDragged() {
  mX = mouseX;
  mY = mouseY;
}

笔触5

原笔触代码地址:https://openprocessing.org/sketch/754815

特点:越慢越粗,墨水有晕染感,适合写字。

java 复制代码
/*
setup=_=>createCanvas(S=500,S),D=10,m=n=x=y=u=v=r=f=0
draw=_=>{R=r;if(mouseIsPressed){m=mouseX;n=mouseY;!f?(f=1,x=m,y=n):0;u+=(m-x)/2;v+=(n-y)/2;u/=2;v/=2;r=25-sqrt(u*u+v*v)*.7;i=D;while(--i)strokeWeight(R+=(r-R)/D),line(x,y,x+=u/D,y+=v/D)}else if(f){u=v=f=0}}
/**/

function setup() {
  createCanvas(S=500,S);
  distance = 10;
  spring = 0.5;
  friction = 0.5;
  mX = mY = x = y = ax = ay = r = f = 0;
}

function draw() {
  oldR = r;
  if(mouseIsPressed) {
    mX = mouseX;
    mY = mouseY;
    if(!f) {
      f = 1;
      x = mX;
      y = mY;
    }
    ax += ( mX - x ) * spring;
    ay += ( mY - y ) * spring;
    ax *= friction;
    ay *= friction;
    r = 25 - sqrt( ax*ax + ay*ay ) * 0.7;
  
    for( i = 0; i < distance; ++i ) {
      oldX = x;
      oldY = y;
      x += ax / distance;
      y += ay / distance;
      oldR += ( r - oldR ) / distance;
      strokeWeight( oldR );
      line( x, y, oldX, oldY );
    }
  } else if(f) {
    ax = ay = f = 0;
  }
}
/**/

笔触6

原笔触代码地址:https://openprocessing.org/sketch/755877

特点:越慢越粗,有墨水晕染,线条有割裂,适合写毛笔字。

java 复制代码
/**
 * Added on October 22, 2020
 * 
 * Hi, I'm BUN.
 * I've been surprised at how many people have forked over this sketch, more than I expected. Thanks.
 * 
 * Here is a sketch that explains this code with multiple codes.
 * Please use it as a reference.
 * https://www.openprocessing.org/sketch/793375
 * 
 * Brief explanation.
 * This code primarily uses "Hook's Law".
 * In other words, it simulates the motion of a spring.
 * 
 * From the mouse position, the position to be drawn is moved like a spring.
 * And the width of the line is changed according to the speed of the movement.
 * 
 ** Added on May 8, 2021 **
 * Gorilla Sun has written an explanation of each part with animations on his blog. Thank you!
 * https://gorillasun.de/blog/Simulating-brush-strokes-with-Hooke's-Law-in-P5JS-and-Processing
 **/
function setup() {
  createCanvas(windowWidth,windowHeight);
  distance = 10;
  spring = 0.5;
  friction = 0.5;
  size = 25;
  diff = size/8;
  x = y = ax = ay = a = r = f = 0;
}

function draw() {
  oldR = r;
  if(mouseIsPressed) {
    mX = mouseX;
    mY = mouseY;
    if(!f) {
      f = 1;
      x = mX;
      y = mY;
    }
    ax += ( mX - x ) * spring;
    ay += ( mY - y ) * spring;
    ax *= friction;
    ay *= friction;
    a += sqrt( ax*ax + ay*ay ) - a;
    a *= 0.6;
    r = size - a;
    
    for( i = 0; i < distance; ++i ) {
      oldX = x;
      oldY = y;
      x += ax / distance;
      y += ay / distance;
      oldR += ( r - oldR ) / distance;
      if(oldR < 1) oldR = 1;
      strokeWeight( oldR+diff );
      line( x, y, oldX, oldY );
      strokeWeight( oldR );
      line( x+diff*2, y+diff*2, oldX+diff*2, oldY+diff*2 );
      line( x-diff, y-diff, oldX-diff, oldY-diff );
    }
  } else if(f) {
    ax = ay = f = 0;
  }
}
/**/
相关推荐
用户37215742613513 小时前
Java 实现 Excel 与 TXT 文本高效互转
java
浮游本尊14 小时前
Java学习第22天 - 云原生与容器化
java
渣哥16 小时前
原来 Java 里线程安全集合有这么多种
java
间彧16 小时前
Spring Boot集成Spring Security完整指南
java
间彧17 小时前
Spring Secutiy基本原理及工作流程
java
Java水解18 小时前
JAVA经典面试题附答案(持续更新版)
java·后端·面试
洛小豆20 小时前
在Java中,Integer.parseInt和Integer.valueOf有什么区别
java·后端·面试
前端小张同学20 小时前
服务器上如何搭建jenkins 服务CI/CD😎😎
java·后端
ytadpole20 小时前
Spring Cloud Gateway:一次不规范 URL 引发的路由转发404问题排查
java·后端
华仔啊20 小时前
基于 RuoYi-Vue 轻松实现单用户登录功能,亲测有效
java·vue.js·后端