【代码】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

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

在这里插入图片描述

代码

/*
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

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

在这里插入图片描述

/*
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

特点:越慢越粗,有墨水晕染,线条有割裂,适合写毛笔字。
在这里插入图片描述

/*** 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;}
}
/**/

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/255997.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

sheng的学习笔记-网络爬虫scrapy框架

基础知识&#xff1a; scrapy介绍 何为框架&#xff0c;就相当于一个封装了很多功能的结构体&#xff0c;它帮我们把主要的结构给搭建好了&#xff0c;我们只需往骨架里添加内容就行。scrapy框架是一个为了爬取网站数据&#xff0c;提取数据的框架&#xff0c;我们熟知爬虫总…

TI毫米波雷达开发——High Accuracy Demo 串口数据接收及TLV协议解析 matlab 源码

TI毫米波雷达开发——串口数据接收及TLV协议解析 matlab 源码 前置基础源代码功能说明功能演示视频文件结构01.bin / 02.binParseData.mread_file_and_plot_object_location.mread_serial_port_and_plot_object_location.m函数解析configureSport(comportSnum)readUartCallback…

LMDeploy 大模型量化部署实践

在浦语的MDeploy大模型量化部署实践课程中&#xff0c;可能需要完成的任务包括&#xff1a; 大模型部署背景 2、LMDeploy简介 环境配置&#xff1a;这个部分你需要安装并设置相关的开发工具和库。这可能包括Python环境、LMDeploy库等等。你需要明确写出你使用的操作系统以及安装…

UML 2.5图形库

UML 2.5图形库 drawio是一款强大的图表绘制软件&#xff0c;支持在线云端版本以及windows, macOS, linux安装版。 如果想在线直接使用&#xff0c;则直接输入网址drawon.cn或者使用drawon(桌案), drawon.cn内部完整的集成了drawio的所有功能&#xff0c;并实现了云端存储&#…

Java编程练习之类的继承

1.创建银行卡类&#xff0c;并分别设计两个储蓄卡和信用卡子类。 import javax.swing.plaf.BorderUIResource;import java.util.Scanner;class Card {int Id; //银行卡&#xff1b;int password; //密码&#xff1b;double balance2000; //账户存款金额&#xff1b;String A…

【SpringBootStarter】自定义全局加解密组件

【SpringBootStarter】 目的 了解SpringBoot Starter相关概念以及开发流程实现自定义SpringBoot Starter(全局加解密)了解测试流程优化 最终引用的效果&#xff1a; <dependency><groupId>com.xbhog</groupId><artifactId>globalValidation-spring…

《MySQL 简易速速上手小册》第3章:性能优化策略(2024 最新版)

文章目录 3.1 查询优化技巧3.1.1 基础知识3.1.2 重点案例&#xff1a;电商平台商品搜索3.1.3 拓展案例 1&#xff1a;博客平台的文章检索3.1.4 拓展案例 2&#xff1a;用户登录查询优化 3.2 索引和查询性能3.2.1 基础知识3.2.2 重点案例&#xff1a;电商平台的订单历史查询3.2.…

Java中“==”和equals方法的区别

目录 一、“”举例 二、equals举例 区别如下&#xff1a; &#xff08;1&#xff09;“”既可以用在基本数据类型&#xff0c;也可以用在引用数据类型&#xff1b;如果用在基本数据类型上&#xff0c;那么比较时比较的是具体的值&#xff0c;如果用在引用数据类型&#xff0c…

React+Antd实现省、市区级联下拉多选组件(支持只选省不选市)

1、效果 是你要的效果&#xff0c;咱们继续往下看&#xff0c;搜索面板实现省市区下拉&#xff0c;原本有antd的Cascader组件&#xff0c;但是级联组件必须选到子节点&#xff0c;不能只选省&#xff0c;满足不了页面的需求 2、环境准备 1、react18 2、antd 4 3、功能实现 …

创建一个VUE项目(vue2和vue3)

背景&#xff1a;电脑已经安装完vue2和vue3环境 一台Mac同时安装vue2和vue3 https://blog.csdn.net/c103363/article/details/136059783 创建vue2项目 vue init webpack "项目名称"创建vue3项目 vue create "项目名称"

没更新的日子也在努力呀,布局2024!

文章目录 ⭐ 没更新的日子也在努力呀⭐ 近期的一个状态 - 已圆满⭐ 又到了2024的许愿时间了⭐ 开发者要如何去 "创富" ⭐ 没更新的日子也在努力呀 感觉很久没有更新视频了&#xff0c;好吧&#xff0c;其实真的很久没有更新短视频了。最近的一两个月真的太忙了&#…

Linux(Ubuntu) 环境搭建:Nginx

注&#xff1a;服务器默认以root用户登录 NGINX 官方网站地址&#xff1a;https://nginx.org/en/NGINX 官方安装文档地址&#xff1a;https://nginx.org/en/docs/install.html服务器的终端中输入以下指令&#xff1a; # 安装 Nginx apt-get install nginx # 查看版本信息 ngi…

Java:字符集、IO流 --黑马笔记

一、字符集 1.1 字符集的来历 我们知道计算机是美国人发明的&#xff0c;由于计算机能够处理的数据只能是0和1组成的二进制数据&#xff0c;为了让计算机能够处理字符&#xff0c;于是美国人就把他们会用到的每一个字符进行了编码&#xff08;所谓编码&#xff0c;就是为一个…

【Java数据结构】单向 不带头 非循环 链表实现

模拟实现LinkedList&#xff1a;下一篇文章 LinkedList底层是双向、不带头结点、非循环的链表 /*** LinkedList的模拟实现*单向 不带头 非循环链表实现*/ class SingleLinkedList {class ListNode {public int val;public ListNode next;public ListNode(int val) {this.val …

单片机学习笔记---AT24C02(I2C总线)

目录 有关储存器的介绍 存储器的简介 存储器简化模型 AT24C02介绍 AT24C02引脚及应用电路 I2C总线介绍 I2C电路规范 开漏输出模式和弱上拉模式 其中一个设备的内部结构 I2C通信是怎么实现的 I2C时序结构 起始条件和终止条件 发送一个字节 接收一个字节 发送应答…

Mybatis详解

MyBatis是什么 MyBatis是一个持久层框架&#xff0c;用于简化数据库操作的开发。它通过将SQL语句和Java方法进行映射&#xff0c;实现了数据库操作的解耦和简化。以下是MyBatis的优点和缺点&#xff1a; 优点&#xff1a; 1. 灵活性&#xff1a;MyBatis允许开发人员编写原生的…

GPT-4模型中的token和Tokenization概念介绍

Token从字面意思上看是游戏代币&#xff0c;用在深度学习中的自然语言处理领域中时&#xff0c;代表着输入文字序列的“代币化”。那么海量语料中的文字序列&#xff0c;就可以转化为海量的代币&#xff0c;用来训练我们的模型。这样我们就能够理解“用于GPT-4训练的token数量大…

react中hook封装一个table组件 与 useColumns组件

目录 1&#xff1a;react中hook封装一个table组件依赖CommonTable / index.tsx使用组件效果 2&#xff1a;useColumns组件useColumns.tsx使用 1&#xff1a;react中hook封装一个table组件 依赖 cnpm i react-resizable --save cnpm i ahooks cnpm i --save-dev types/react-r…

KingSCADA实现按钮点击效果

哈喽&#xff0c;你好啊&#xff0c;我是雷工&#xff01; 在做SCADA项目的时候&#xff0c;按钮是不可缺少的功能&#xff0c;但软件自带的按钮太丑&#xff0c;已经无法满足现如今客户对界面美观度的要求。 这时候就需要UI小姐姐设计美观大气的SCADA界面&#xff0c;但UI设计…

CoreSight学习笔记

文章目录 1 Components1.1 ROM Table 2 使用场景2.1 Debug Monitor中断2.1.1 参考资料 2.2 Programming the cross halt2.2.1 编程实现2.2.2 参考资料 2.3 CTI中断2.3.1 编程实现2.3.1.1 准备工作2.3.1.2 触发中断2.3.1.3 中断响应 2.3.2 参考资料 1 Components 1.1 ROM Table…