p5.js基本[一] T型高斯分布的小星星
样例
<script src="./p5/p5.js"></script>
<script>
function setup() {
// 只写一次你想做的事
createCanvas(400, 400);
}
function draw() {
// 写下你要重复的内容
// 每秒约60次速度重复
background(220);
ellipse(50,50,80,80);
}
</script>
createCanvas(width,height)
创建canvasellipse(x,y,cx的直径,cy的直径)
椭圆background()
- 一个参数: 0-255 0表示纯黑色 255白色
- 三个参数 rgb
circle(x,y,直径)
圆
通过查看源码可知
x,y,w,[h],[tl],[tr],[br],[bl]
[] 是可选参数分别是 高,左上圆角,右上,右下,下左
三个参数是圆
react(20,20,width,height)四个参数是长方形或者正方形
react(20,20,width,height,border-radius)五个参数是有圆角的长方形或者正方形
两个圆角就是对角(50,10) 就是上左,下右 50, 上右,下左 10
三个圆角就是(50,30,5) 上左50,上右30, 下右,下左5
line(起点x,起点y,终点x,终点y)
直线square(x,y,边长)
正方形triangle(x1,y1,x2,y2,x3,y3 )
三角形quad( x1, y1, x2,y2,x3,y3,x4,y4 )
四边形fill()
一个参数是亮点(0-255)
一个参数 SVG/CSS
fill('red')
fill('#fae')
fill('#222222')
fill('rgb(0,255,0)')
fill('rgba(0,255,0, 0.25)')
fill('rgb(100%,0%,10%)')
fill('rgba(100%,0%,100%,0.5)')
// p5 color
fill(color(0, 0, 255));
三个参数
RGB
三个参数
HSB
* colorMode(HSB);
* fill(255, 204, 100);
stroke()
- 一个参数亮点(0-255),三个RGB
strokeWeight(number)
noStroke()
noFill()
demo
function setup() {
createCanvas(600, 200);
}
function draw() {
background(220);
fill(230, 128, 255); // 青色
circle(100, 100, 80);
stroke(255, 128, 0);
circle(200, 100, 80);
fill(200)
strokeWeight(10);
circle(300, 100, 80);
noFill();
strokeWeight(5);
stroke(123);
circle(400, 100, 80);
}
结论: 设置填充后,如果没有再次设置这个属性,将一直保持这个设置
noLoop() 功能
setup
设置了一个noLoop()
,只执行一次
如果我们把draw()
函数,里面执行一个noLoop()
就只执行一次
变量的书写
let dia = 60;
function setup() {
createCanvas(400, 200);
background(220);
noLoop();
}
function draw() {
fill(128, 128, 0);
noStroke();
circle(100, 100, dia);
circle(200, 100, dia);
circle(300, 100, dia);
}
应该写在函数的外面
打印函数
print()
或者console.log()
编写一个动画
let dia = 0;
function setup() {
createCanvas(400, 200);
strokeWeight(2);
}
function draw() {
if(dia>400){
noLoop()
}
background(220);
circle(dia,100,50)
dia+=0.5;
}
鼠标事件
按下的按钮mouseIsPressed
返回boolean
按下按钮类型mouseButton
返回鼠标左键,鼠标右键,鼠标中间滚轮'left','right','center'
大写表示直接可以拿到的全局变量LEFT,RIGHT,CENTER
当前指针坐标(mouseX,mouseY
)
demo
function setup() {
createCanvas(500, 500);
background(220);
stroke(220); // 设置边框颜色
}
function draw() {
if (mouseIsPressed) { // 鼠标按下
if (mouseButton == LEFT) { // 按下鼠标左键
fill(256, 128, 0);
circle(mouseX, mouseY, 20); // 拿到坐标画圆
} else if (mouseButton == RIGHT) { // 拿到鼠标右键,画正方形
fill(0, 128, 256);
square(mouseX - 10, mouseY - 10, 20);
}
}
}
左键画圆,右键画框
按键输入
先鼠标按下,在使用键key
拿到对应的字符串
if (mouseIsPressed) { // 鼠标按下
console.log(key);
}
随机数
random(min,max)
就是min,max返回随机
传入一个参数
random([1, 2, 3])
//1,2,3随机
random(10) // 0-10
不过你使用Math.random
也是可以只是他封装啦
point(x,y)
其实可以设置z,用于 webGL
在空间设置一个点
设置stroke()
改变颜色
设置strokeWeight()
改变大小
constranin
将一个值限制一定范围
- 参数一 要约束的数
- 参数二 最低限度
- 参数三 最大值
- 参数四 受限的数量
abs
就是Math.abs()
限制绝对值
abs(-3) // 3
randomGaussian
均值,标准差,作为参数的高斯或正态分布[高斯分布的随机数]
randomGaussian(Mean,StandardDeviation)
没有参数就是均值 0, 标准差为 1
一个参数就是均值, 标准差1
高斯模糊的随机实验
我们设置一个
(width 400,height 500)
的矩形随机放置的点需要在X轴上放置在300px和700px之间,在Y轴上放置在200px和800px之间
function setup() {
createCanvas(1000, 1000);
background(10);
}
function draw() {
stroke(245);
var xloc = random(300, 700);
var yloc = random(200, 800);
point(xloc, yloc);
}
步骤二,我想怎么在梯形做出这个效果
对于Y轴,我们可以设置跟之前相同200,800
之间
对于x轴,就有点棘手,拿出小学学的斜率的公式y=kx+b
我们可以知道b=200
,那么我们可以先算左边两个点,去掉b的距离就是(0,600),(100,0)
那么公式可知
左边的斜率可以算出-6
右边的则为6
带入方程里可以得到x0=(y-200)/6
所以直接带入里面 x的左边的范围坐标就是x1=300-x0
右边就是x2=700+x0
function setup() {
createCanvas(1000, 1000);
background(10);
}
function draw() {
stroke(245);
var yloc = random(200, 800);
var shift = (yloc - 200) /6;
var xloc = random(300 - shift, 700 + shift);
point(xloc, yloc);
}
我们发现上面的不好看,那么如果编写出特定的均值和方差的高斯正态分布随机数
设置 基于均值200,方差180包含的随机数是
a = 180;
b = 200;
y = a*randomGaussian() + b;
记得要限制这个随机数的范围,由于y轴的限制范围为200-800
constrain(yloc, 200, 800);
完整代码为
//方差,平均数, 尽量让粒子发布在顶部
let sd = 180;
let mean = 200;
function setup() {
createCanvas(1000, 1000);
background(16,23,33);
}
function draw() {
let yloc = randomGaussian();
// 对于方差尽量使用正数,这样它的分布会尽量在顶部,所以使用绝对值
yloc = abs(yloc * sd) + mean;
// 限制范围
yloc = constrain(yloc, 200, 800);
let shift = (yloc - 200) /6;
let xloc = random(300 - shift, 700 + shift);
stroke(220)
point(xloc, yloc);
// 让它看上去更加梦幻点
fill(107,202,226,15)
noStroke();
let d=random(6,11);
ellipse(xloc,yloc,d,d)
}
p5.js基本[一] T型高斯分布的小星星的更多相关文章
- js进阶 10-9 -of-type型子元素伪类选择器
js进阶 10-9 -of-type型子元素伪类选择器 一.总结 一句话总结:三种和first.last等有关的选择器. 1.:first和:first-child和:first-of-type的区别 ...
- JS DOM(文档对象模型)与BOM(浏览器对象模型)
在JS中,对DOM(Document Object Model)对象和BOM(Browser Object Model )对象的操作是非常重要的内容.DOM主要包括HTML文档的属性和方法,像对HTM ...
- 《p5.js创意游戏编程》第一课:跳动的小球
准备:Hbuilder/vscode等可以编写网页的编辑器 如果想立刻上手也可以使用在线编译器p5.js官方在线编辑器,如果打不开也可以使用国内的一款在线编辑器jsrun编辑器,(第一课先使用jsru ...
- p5.js
p5.js p5.js是一个用于创意编码的JavaScript库,其重点是使艺术家,设计师,教育者,初学者以及其他任何人都可以访问并包含所有编码! https://p5js.org/ https: ...
- 思索 p5.js 的最佳实践
思索 p5.js 的最佳实践 本文写于 2020 年 12 月 18 日 p5.js 是一个 JavaScript 库,用于为艺术家.设计师提供更容易上手的创意编程. 它有着完整的一套基于 Canva ...
- js字符转换成整型 parseInt()函数规程Number()函数
今天在做一个js加法的时候,忘记将字符转换成整型,导致将加号认为是连接符, 在运算前要先对字符井行类型转换,使用parseInt()函数 使用Number()将字符转换成int型效果更好
- js 鸭式辨型法
无意中看到arr.length === +arr.length;这句代码,然后就去了解了下 这是一种鸭式辨型的判断方法. 鸭式辨型:像鸭子一样走路.游泳和嘎嘎叫的鸟就是鸭子 这句话表示: a.arr有 ...
- js數據類型
js的數據類型有:字符串.數字.布爾型.數組.undfined.null: js擁有動態類型,同樣的變量可以賦值多個類型: 變量賦值可以聲明后賦值,或者聲明時賦值: 字符串: 字符串用單引號或者雙引號 ...
- js,jquery的数字型字符串变量比较大小
转:http://blog.csdn.net/dxnn520/article/details/8267173 var定义的变量应该是字符串,有时没有经过类型转换而进行比较的话,小于十的话还可以,如果大 ...
随机推荐
- JS获取指定月份的天数几种方法
最近看到一个有意思的试题,正好在需求中也碰到类似的问题,即计算某个月的天数问题.碰到类似问题也许大部分会想是不是还要判断闰年.平年,如果这样想的话就复杂了,下面给出具体的计算方法. 获取月份天数方法一 ...
- jenkins:用jenkins通过ssh部署jar包到远程linux机器(jdk 15 / jenkins 2.257)
一,远程linux机器上安装java15(如已安装,跳过此步) 说明:演示用的linux机器ip: 192.168.1.47 1,下载: [root@blog ~]# cd /usr/local/so ...
- 3.QOpenGLWidget-通过着色器来渲染渐变三角形
在上章2.通过QOpenGLWidget绘制三角形,我们学习绘制三角形还是单色的,本章将为三角形每个顶点着色. 1.着色器描述 着色器的开头总是要声明版本,接着是输入和输出变量.uniform和m ...
- Linux运维学习第三周记
日落狐狸眠冢上 夜归儿女笑灯前 人生有酒须当醉 一滴何曾到九泉 愿醉卧沙场可未有匹夫之勇. 第三周学记 第三周主要学习正则表达式和Shell编程 1.正则表达式基本字符 2.扩展正则表达式 3.gre ...
- ServletRequest使用介绍
ServletRequest: 定义将客户端请求信息提供给某个 servlet 的对象:servlet 容器创建 ServletRequest 对象,并将该对象作为参数传递给该servlet的serv ...
- json针对list map set 应用
package JSONtest; import java.util.ArrayList; import java.util.HashMap; import java.util.HashSet; im ...
- WebService安全机制的思考与实践
近来因业务需要,需要研究webservice,于是便有这篇文章:SpringBoot整合Apache-CXF实践 一.WebService是什么? WebService是一个平台独立的.低耦合的.自包 ...
- Spring MVC 9大组件概述
SpringMVC中的Servlet一共有三个层次,分别是HttpServletBean.FrameworkServlet和 DispatcherServlet.HttpServletBean直接继承 ...
- Nacos配置中心和服务的注册发现
在上一篇中,我们已经把Nacos的集群搭建好了,那么既然已经搭建好了,就要在咱们的项目中去使用.Nacos既可以做配置中心,也可以做注册中心.我们先来看看在项目中如何使用Nacos做配置中心. Nac ...
- 思科ASA放行主/被动FTP
实验环境: 设备说明: internet是一台windows10,用于模拟外网客户 ASA是思科ASA防火墙 FTP-SERVER是Centos7,Centos7上安装了vsftpd 实验说明: 本文 ...