您的位置:首页 > Web前端 > JavaScript

今日P5.JS 互动图形 拖来拖去的小圆

youngerlily 2020-06-29 05:04 183 查看 https://blog.csdn.net/youngerl

Lily学P5.JS

设计尸怎么写网页?当然是借助大神写好的代码块来实现创意呀,爱上码绘之旅……
傻乎乎的小圆
这个互动图形是怎么实现的呢?
贴代码为敬

//p5,基于JavaScript的一个绘图库(函数、变量、常量)//自定义的变量let x = 0;  //小圆的横、纵坐标let y = 0;let xSpeed = 3;//小圆的横、纵方向速度let ySpeed = 3;let ballSize = 80; //小圆尺寸let dragState = false; //false是JS的保留字,这里定义了一个变量判断我到底有没有拖小球function setup() {//创建画布createCanvas(windowWidth, windowHeight);fill(random(255), random(255),random(255));//一刷新页面就可以变色}//心跳,用这个词来形容,是因为draw()每秒执行60次甚至更多,你看不见,他的心跳不止function draw() {//填背景色,黑色不必商量background(0);//判断我是否拖动小圆//也可以这样写:if (dragState==false){}//有时候===,三个等号判断值是否相等,某大神说“===是强类型判断”if (!dragState) {//一旦我拖动,x += xSpeed;//放在“心跳”里面,实时更新x、y的值y += ySpeed;}//调用一个函数,撞南墙要不要回头bounceOnEdge();//画圆ellipse(x, y, ballSize);}function bounceOnEdge() {//边缘检测和控制//if条件判断if (x >= width - ballSize / 2) {//不想半身不遂,就记得减它xSpeed *= -1;x = width - ballSize / 2;//fill(random(255), random(255),random(255));//变色百用不腻}if (x <= ballSize / 2) {xSpeed *= -1;x = ballSize / 2;//fill(random(255), random(255),random(255));}if (y >= height - ballSize / 2) {ySpeed *= -1;y = height - ballSize / 2;//fill(random(255), random(255),random(255));}if (y <= ballSize / 2) {ySpeed *= -1;y = ballSize / 2;//fill(random(255), random(255),random(255));}}//判断我是否点中了再拖动,否则会出现,点、拖任何位置都有反映的bugfunction mousePressed() {let d = dist(x, y, mouseX, mouseY);if (d <= ballSize / 2) {dragState = true;}}function mouseDragged() {if (dragState) {x = mouseX;//拖着走,坐标要和我鼠标位置一样y = mouseY;}}//鼠标松开之后,恢复傻乎乎的状态function mouseReleased() {dragState = false;}

里面注释够多了,我就不解释啦,还有不断的更新拓展,客官往下看哦

又是个偏执恋家的家伙,无论往哪里拖,都瞬间回到画布中心,还拖不出去,真是个满足于坐井观天的小可怜
老规矩

let x;let y;let xSpeed = 3;let ySpeed = 3;let ballSize = 80;let dragState = false;function setup() {createCanvas(windowWidth, windowHeight);fill(random(255), random(255),random(255));background(0);noStroke();//不要描边,描边的形状一般都不好看x = width/2;//定位于中心点y = height/2;}function draw() {background(0);if(!dragState){goToCenter();}bounceOnEdge();ellipse(x, y, ballSize);}function bounceOnEdge(){if (x >= width - ballSize / 2) {xSpeed *= -1;x = width - ballSize / 2;}if (x <= ballSize / 2) {xSpeed *= -1;x = ballSize / 2;//fill(random(255), random(255),random(255));}if (y >= height - ballSize / 2) {ySpeed *= -1;y = height - ballSize / 2;//fill(random(255), random(255),random(255));}if (y <= ballSize / 2) {ySpeed *= -1;y = ballSize / 2;//fill(random(255), random(255),random(255));}}function goToCenter(){//基于小球当前的位置,朝着着画布中心点移动(一小段距离)x += (width/2-x)/8;y += (height/2-y)/8;}function mousePressed(){let d = dist(x,y,mouseX,mouseY);if(d<=ballSize/2){dragState = true;}}function mouseDragged(){if(dragState){x = mouseX;y = mouseY;}}function mouseReleased(){dragState = false;}//1.侦测用户输入//2.基于用户输入,给出反馈//3.反馈带有激励机制//4.成功之后,难度增加

只是小小的改变啦,不过可以提供一些思路
那,再看一个吧,希望会好玩点

好像还是没有多少新鲜玩意,但这次,我不用坐标,我要玩向量hhh
接受代码的暴击

let ballSize = 80;let dragState = false;let pos;//准备两个盒子,装我的位置、速度向量let vel;function setup() {createCanvas(windowWidth, windowHeight);fill(random(255), random(255), random(255));background(0);noStroke();pos = createVector(width / 2, height / 2);//给pos向量赋值vel = p5.Vector.random2D();  //生成一个长度为1,方向随机的速度向量vel.setMag(random(3, 8));//设置vel向量的长度}function draw() {background(0);if (!dragState) {let c = createVector(width / 2, height / 2);moveTo(c);//使用vel修正pospos.add(vel);}bounceOnEdge();//画线,线条要描边,白描stroke(255);line(pos.x, pos.y, width / 2, height / 2)//画圆不需要描边noStroke();ellipse(pos.x, pos.y, ballSize);}//回到宇宙中心function moveTo(target) {let force = p5.Vector.sub(target, pos);//考验物理知识的时刻到了force.mult(1 / 6);//过于大了,乘以1/6,以免一步登天vel.add(force);//向量加法vel.mult(0.5);}function bounceOnEdge() {//边缘检测和控制//if条件判断if (pos.x >= width - ballSize / 2) {vel.x *= -1;pos.x = width - ballSize / 2;//fill(random(255), random(255),random(255));}if (pos.x <= ballSize / 2) {vel.x *= -1;pos.x = ballSize / 2;//fill(random(255), random(255),random(255));}if (pos.y >= height - ballSize / 2) {vel.y *= -1;pos.y = height - ballSize / 2;//fill(random(255), random(255),random(255));}if (pos.y <= ballSize / 2) {vel.y *= -1;pos.y = ballSize / 2;//fill(random(255), random(255),random(255));}}function mousePressed() {let d = dist(pos.x, pos.y, mouseX, mouseY);if (d <= ballSize / 2) {dragState = true;}}function mouseDragged() {if (dragState) {pos.x = mouseX;pos.y = mouseY;}}function mouseReleased() {if (dragState) {dragState = false;vel = p5.Vector.random2D();//设置vel向量的长度vel.setMag(random(3, 8));//以下是Lily魔性配色let r = 255 * (1 + sin(frameCount) / 2);let g = 255 * (1 + sin(frameCount) / 2);let b = 255 * (1 + sin(frameCount) / 2);fill(g, random(r), random(b));//别问我为什么RGB顺序不对,我乐意}}

好了,你也累了吧,我就再放最后一个,我保证

曲线救国 回家有没有!

let ballSize = 80;let dragState = false; //JS的保留字//定义位置向量控制小球运动//每个向量都有长度、角度,笛卡尔坐标系let pos ;let vel;//velocity速度,speed速率,定义一个变量,用于保存速度向量function setup() {//创建画布createCanvas(windowWidth, windowHeight);fill(random(255), random(255), random(255));background(0);noStroke();//给pos向量赋值//创建向量pos=createVector(width/2,height/2);//vel=createVector(3,0);//生成长度1,方向随机的向量vel=p5.Vector.random2D();//设置vel向量的长度vel.setMag(random(3,8));}//心跳function draw() {//填背景色background(0,20);//10透明度//更新xy的值//if (dragState==false){//有时候===,三个等号判断值是否相等if (!dragState) {//goToCenter();let c=createVector(width/2,height/2);danceTo(c);// }//怎么不无聊?//使用vel更新pospos.add(vel);}//边缘检测与控制bounceOnEdge();stroke(255);line(pos.x,pos.y,width/2,height/2)noStroke();//画圆ellipse(pos.x,pos.y, ballSize);//pos.x表示保存在pos对象内的那个x的值,人话:pos对象的值}function moveTo(target){let force=p5.Vector.sub(target,pos);force.mult(1/6);//修正力的长度// vel=p5.Vector.sub(target,pos);// vel.mult(1/8);vel.add(force);vel.mult(0.5);}function danceTo(target){//旋转跳跃let force=p5.Vector.sub(target,pos);force.mult(1/6);//为了得到蛇形,需要叠加一个干预力,长度可以固定,方向要旋转let danceForce=createVector(1,0);danceForce.setMag(force.mag()*random(0.5,0.8));danceForce.rotate(frameCount/5)//每次基于danceForce,每次增加1,当frameCount到达2PI,转一周//修正力的长度force.add(danceForce);vel.add(force);// vel=p5.Vector.sub(target,pos);// vel.mult(1/8);vel.mult(0.5);}// function goToCenter() {//   //基于小球当前位置,朝着画布中心移动一小段距离,应该不断执行//   //1.确定vel的值,将(画布中心点)转化为向量//   let c=createVector(width/2,height/2);//   //目标位置减去当前位置得到向量方向,其方向是我们期望的vel的方向//   vel=p5.Vector.sub(c,pos);//这样写不会修改c、vel//   vel.mult(1/8);//修正速度长度,之前太长,不希望一步到位//   //2.使用vel修正pos//   // pos.add(vel);//这样写修改了pos//   // pos.x += (width / 2 - pos.x) / 8; //越往后,步长越小,减速//   // pos.y += (height / 2 - pos.y) / 8;// }function bounceOnEdge() {//边缘检测和控制//if条件判断if (pos.x >= width - ballSize / 2) {vel.x *= -1;pos.x = width - ballSize / 2;//fill(random(255), random(255),random(255));}if (pos.x <= ballSize / 2) {vel.x *= -1;pos.x = ballSize / 2;//fill(random(255), random(255),random(255));}if (pos.y >= height - ballSize / 2) {vel.y *= -1;pos.y = height - ballSize / 2;//fill(random(255), random(255),random(255));}if (pos.y <= ballSize / 2) {vel.y *= -1;pos.y = ballSize / 2;//fill(random(255), random(255),random(255));}}// function mouseClicked(){//    let d =dist(x,y,mouseX,mouseY);//    //判断是否点中//    if (d<=ballSize/2){//       xSpeed*=1.2;//       ySpeed*=1.2;//       ballSize*=0.95;//       console.log("点中了!")//       fill(random(255), random(255),random(255));//    }//}function mousePressed() {let d = dist(pos.x, pos.y, mouseX, mouseY);if (d <= ballSize / 2) {dragState = true;}}function mouseDragged() {if (dragState) {pos.x = mouseX;pos.y = mouseY;}}function mouseReleased() {if (dragState){dragState = false;// vel=p5.Vector.random2D();//设置vel向量的长度vel.setMag(random(3,8));let r=255* ( 1+sin( frameCount)/2);let g=255* (1+sin(frameCount)/2);let b=255* (1+sin(frameCount)/2);fill( random(r), g,random(b));}}`

li言li语请自动忽略,好了,我累了也满足了,还是先去干点别的洗洗脑子

标签: