Day2 - P5基本操作 - 基本设定跟操作

其实为什麽P5这麽多人喜爱

阅读性真的很高,举例来讲好了

一个基本的设定

首先你先设定 setup 跟 draw

function setup() {
	//设定的动作 可以想像执行的时候要开始跑的区块
	createCanvas(1000, 1000);
	 background(244, 248, 252);
  // frameRate(10);
	fill(0);
}

function draw() {
	// 依照这边的设定 每次你的event会让整段在跑一次
  background(255,20)
	rect(mouseX,mouseY,50,50)
}

Storke - 可以让你的形状的边边宽密度调整

FrameCount - 可以计算每一次被渲染的次数

MouseX ,MouseY 大多数元件pos 可以透过这个方式去移动

windowWidth,widthHeight 可以设定画布的大小

这些参数设定就可以想一下 他是多少 你可以用print() 请显示你要的console.log

background- 背景颜色设定

我们可以利用这些参数 可以去跟形状一起做一些颜色的切换

function setup() {
  //slow down the frameRate to make it more visible
	createCanvas(1000, 1000);  // 开一个画布
	 background(244, 248, 252); // 设定背景色
  // frameRate(10);
}

function draw() {
 background(100,20) // 画布背景色再画一次
	fill(mouseX,mouseY,frameCount)// 填满色彩 
	rect(mouseX,mouseY,50,50) // 制造一个方块
  // print(pmouseX + ' -> ' + mouseX);
}

chrome-capture.gif

接下来设定一些event 设定 假设滑鼠想要按下去呈现另外一个状态 这边就设定一个if else的判定

function setup() {
  //slow down the frameRate to make it more visible
	createCanvas(1000,1000)
	background(0,0,0)
}

function draw() {
  background(100,10);
	fill(mouseX, mouseY,frameCount);
	if(mouseIsPressed){
		fill(0)
		rect(mouseX,mouseY,100,100);
	}else{
		
	ellipse(mouseX,mouseY,100,100)
	}
  // print(pmouseX + ' -> ' + mouseX);
}

chrome-capture2.gif
你就可以做出一个类似这样滑鼠移动就会有不同方框连着你的箭头走了

这如果是一个javascript 的话我们大概要画到天荒地老了吧?

大家快试试看吧~

参考网址

https://openprocessing.org/sketch/869432


<<:  [Day 02] 在表情资料寻找邂逅是否搞错了甚麽 (Facial Expression Recognition)

>>:  第2天~就是要写出HELLO

提高广告单价的方式

广告的季节性 去年日本第一次开始封城时,刚好遇到三四月之间。 日本公司的会计年度很多是四月开始,三月...

[Day 6] SRE - 起身对抗活在警报中的恶魔

警报疲乏 相信大家都听过「放羊的孩子」的伊索寓言故事。 今天我们探讨的问题是当团队中的警报器常常发生...

Vue出一个展开 / 隐藏 功能

今天练习的主题是用Vue实现列表的展开与隐藏功能 会分为两个范例让大家做演练 范例一 先将isSho...

props

昨天介绍了component,也知道要使用component要先注册才能使用,而今天我们要介绍的是p...

Day10 Overlapping Example

昨天已经看过我们在实务上可能会遇到的需求,利用多个可能重复范围的配对池,当作匹配搜寻条件,今天让我们...