var color1 ='red';
var r1 = 50;
var colorList = ["#bce784","#5dd39e","#348aa7","#525174","#513b56"]
var positionListX = [300,600,500];
var positionListY = [160,400,200];
function draw() {
print(mouseX+','+mouseY); //确认自己想要的排列位置
// ellipse(mouseX, mouseY, 20, 20);
background(0)
for(let i=0;i<positionListX.length;i++){
let xx = positionListX[i];
let yy = positionListY[i];
push();
translate(xx,yy);
drawFlower(colorList[i])
pop();
}
}
加上一些position的参数之後我们可以呈现出一个排列的花
!
那我们可以透过一些mousePressed设定 可以做出花掉落的效果
function setup() {
createCanvas(windowWidth, windowHeight);
background(100);
}
function generateRandomFlower(mouseX,mouseY){
size.push(random(0,1));
positionListX.push(mouseX || random(width)) // mouseX 没有 就用 random在画面放置
positionListY.push( mouseY || rabdin(height));
vYList.push(abs(random(0,3)));
colorList.push(random(colorList));
}
function drawFlower(clr,size=1){
push(); // 回到这里
fill(255,210,33)
ellipse(0,0,50)
ellipseMode(CORNER); //设定排列模式
fill(255,90,61) // 变成预设颜色
if(clr){
fill(clr);} //如果有别的颜色就可以放在这
for(let i=0;i<16;i++){
ellipse(30,-20,120*size,40); // 增加花瓣
line(30,0,150*size,-10) //花瓣线
rotate(PI/8);
}
pop(); //推到push
}
var color1 ='red';
var r1 = 50;
var size=[1,0,0,5,0.4,0.8]
var colorList = ["#bce784","#5dd39e","#348aa7","#525174","#513b56"]
var positionListX = [300,600,500];
var positionListY = [160,400,200];
var vYList = [1,2,3] // 掉落数度
function mousePressed(){
generateRandomFlower(mouseX,mouseY) // 制造一个点击掉落
}
function draw() {
// ellipse(mouseX, mouseY, 20, 20);
background(0)
for(let i=0;i<positionListX.length;i++){
let xx = positionListX[i];
let yy = positionListY[i];
push();
translate(xx,yy);
drawFlower(colorList[i])
pop();
positionListY[i] += vYList[i]; // 把postionY 再加上掉落的数
if(yy>height){
positionListX.splice(i,1); // 记得pos超过要把array删除
positionListY.splice(i,1);
colorList.splice(i,1);
vYList.splice(i,1);
}
}
}
我们就可以做出那种无限可以掉落花瓣的功能了
https://openprocessing.org/sketch/1259915
这边纪录了一下 JSON 栏位的操作方式, 有任何错误或是更好的写法,欢迎留言讨论喔~ 一、建立资料...
Livewire 是 Laravel 的全端框架,能建立像 Vue 一样的动态页面的同时又能保有 L...
总结:通过对features进行归类和操作,让features更加符合traindata的需求; 1...
DAY9 MongoDB 文件与嵌入式(巢状)文件查询(Find) Find 把 MongoDB 的...
URL : https://app.hackthebox.eu/machines/144 IP :...