I am drawing some rotating rectangles in p5.js, and it is all working fine. Then I need some text to be displayed on top of rectangles and I want it to be motionless. However, the text is spinning as well. I have tried some solutions like setting rotate(0) or value negative to the rotation of last drawn rectangle, but nothing works.
class Rectangle {
constructor(size, colorR, colorG, colorB, angle) {
this.size = size;
this.colorR = colorR;
this.colorG = colorG;
this.colorB = colorB;
this.angle = angle;
this.actualAngle = this.angle;
}
draw() {
stroke(0);
strokeWeight(2);
fill(this.colorR, this.colorG, this.colorB);
rotate(this.actualAngle);
rect(0, 0, this.size, this.size);
}
increaseAngle() {
this.actualAngle += this.angle;
}
getActualAngle(){
return this.actualAngle;
}
}
var rectangles = [];
function setup() {
var canvas1 = createCanvas(800, 700);
canvas1.parent("regLog");
var size = 12;
for (var i = 0; i < 10; i++) {
let ranR = random(150);
let ranG = random(150);
let ranB = random(150);
let angle = random(-0.005, 0.005);
rectangles.push(new Rectangle(size, ranR, ranG, ranB, angle));
size += 50;
}
}
function draw() {
background(255);
rectMode(CENTER);
translate(width / 2, height / 2);
for (var i = rectangles.length - 1; i > 0; i--) {
rectangles[i].draw();
}
if (second() % 1 == 0) {
for (let i = 0; i < rectangles.length; i++) {
rectangles[i].increaseAngle();
}
}
rotate(0);
noStroke();
fill(255, 255, 255, 0);
rect(0, 0, 50, 50);
textAlign(CENTER);
fill(255);
textSize(60);
text("Coming soon!", 0, 0);
}
I used push() to "save" the current rotation settings and then pop() to restore them after each time you draw a rectangle. When you use rotate(), it rotates the all of the future shapes you draw, so the changes are "permanent" unless you're very careful to reset.
You can see it work in this jsfiddle -> https://jsfiddle.net/ozsLtxhb/237/
i commented out the part where you assign a parent just for the jsfiddle to work so uncomment it before you copy-paste it into anything
class Rectangle {
constructor(size, colorR, colorG, colorB, angle) {
this.size = size;
this.colorR = colorR;
this.colorG = colorG;
this.colorB = colorB;
this.angle = angle;
this.actualAngle = this.angle;
}
draw() {
/*push here*/
push();
stroke(0);
strokeWeight(2);
fill(this.colorR, this.colorG, this.colorB);
rotate(this.actualAngle);
rect(0, 0, this.size, this.size);
/*pop here*/
pop();
}
increaseAngle() {
this.actualAngle += this.angle;
}
getActualAngle(){
return this.actualAngle;
}
}
var rectangles = [];
function setup() {
var canvas1 = createCanvas(800, 700);
/* canvas1.parent("regLog"); */
var size = 12;
for (var i = 0; i < 10; i++) {
let ranR = random(150);
let ranG = random(150);
let ranB = random(150);
let angle = random(-0.005, 0.005);
rectangles.push(new Rectangle(size, ranR, ranG, ranB, angle));
size += 50;
}
}
function draw() {
background(255);
rectMode(CENTER);
translate(width / 2, height / 2);
for (var i = rectangles.length - 1; i > 0; i--) {
rectangles[i].draw();
}
if (second() % 1 == 0) {
for (let i = 0; i < rectangles.length; i++) {
rectangles[i].increaseAngle();
}
}
rotate(0);
noStroke();
fill(255, 255, 255, 0);
rect(0, 0, 50, 50);
textAlign(CENTER);
fill(255);
textSize(60);
text("Coming soon!", 0, 0);
}
Related
I have read a good number of related posts, but I feel they are not exactly giving me the required solution.
I want to implement in React, the following p5.js JavaScript code that I have written following this tutorial on YouTube => https://www.youtube.com/watch?v=uk96O7N1Yo0:
let sound;
let fft;
let image;
let particles = [];
function preload() {
sound = loadSound("sound-path.mp3");
image = loadImage("image-path.jpg");
}
function setup() {
createCanvas(windowWidth, windowHeigh);
angleMode(DEGREES);
imageMode(CENTER);
rectMode(CENTER);
fft = new p5.FFT(0.3);
image.filter(BLUR, 12);
noLoop();
}
function draw() {
background(0);
stroke(255);
strokeWeight(3);
noFill();
translate(width / 2, height / 2);
fft.analyze();
amp = fft.getEnergy(20, 200);
push();
if (amp > 230) {
rotate(random(-0.5, 0.5));
}
image(image, 0, 0, width + 100, height + 100);
pop();
let alpha = map(amp, 0, 255, 180, 150);
fill(0, alpha);
noStroke();
rect(0, 0, width, height);
stroke(255);
strokeWeight(3);
noFill();
let wave = fft.waveform();
for (let t = -1; t <= 1; t += 2) {
beginShape();
for (let i = 0; i <= 180; i += 0.5) {
let index = floor(map(i, 0, 180, 0, wave.length - 1));
let radius = map(wave[index], -1, 1, 150, 350);
let x = radius * sin(i) * t;
let y = radius * cos(i);
vertex(x, y);
}
endShape();
}
let particle = new Particle();
particles.push(particle);
for (let i = particles.length - 1; i >= 0; i--) {
if (!particles[i].edges()) {
particles[i].update(amp > 230);
particles[i].show();
} else particles.splice(i, 1);
}
}
function mouseClicked() {
if (sound.isPlaying()) {
sound.pause();
noLoop();
} else {
sound.play();
loop();
}
}
// Particles around the Wave
class Particle {
constructor() {
this.position = p5.Vector.random2D().mult(250);
this.velocity = createVector(0, 0);
this.acceleration = this.position.copy().mult(random(0.0001, 0.00001));
this.width = random(3, 5);
this.color = [random(200, 255), random(200, 255), random(200, 255)];
}
update(condition) {
this.velocity.add(this.acceleration);
this.position.add(this.velocity);
if (condition) {
this.position.add(this.velocity);
this.position.add(this.velocity);
this.position.add(this.velocity);
}
}
edges() {
if (
this.position.x < -width / 2 ||
this.position.x > width / 2 ||
this.position.y < -height / 2 ||
this.position.y > height / 2
)
return true;
else return false;
}
show() {
noStroke();
fill(this.color);
ellipse(this.position.x, this.position.y, this.width);
}
}
I have the following component in which I want that implementation of this sound visualization to happen:
import React from "react";
import { FormInput } from "../Forms/Form";
import "./Visualization.css";
const Visualization = () => {
// TODO: Implement p5.js to create visualization as in the linked video
const handleChange = () => {
// Play the selected audio file in that input
};
return (
<div className="visualizer-canvas-container">
<canvas id="landing-visualizer-canvas"></canvas>
<audio id="landing-audio-controls" controls />
<FormInput
accept="audio/*"
id="file-upload"
onChange={handleChange}
type="file"
/>
</div>
);
};
export default Visualization;
I have some spheres that I want to move straight on the x axis with only their y-axis changing based on the sine wave (you know the up and down yo-yo pattern). It is pretty simple in 2d but for some reason, in WEBGL, the angle changes in the sin function is not working for this.y.
let particles = [];
let quantity = 20;
function setup() {
createCanvas(300, 300, WEBGL);
for (let i = 0; i < quantity; i++) {
let particle = new Particle();
particles.push(particle);
}
}
function draw() {
background(15);
orbitControl();
directionalLight([255], createVector(0, 0, -1));
translate(-width / 2, 0);
particles.forEach(particle => {
particle.update();
particle.edges();
particle.show();
});
};
// particle.js
function Particle() {
this.angle = 0;
this.r = 10;
this.x = random(width);
this.y = sin(this.angle) * 200; // I am changing this angle later but it's not working
this.z = random(-50, 50);
this.pos = createVector(this.x, 0, 0);
this.vel = createVector(2, this.y, 0);
this.update = function() {
this.pos.add(this.vel);
this.vel.limit(4);
this.angle += 3;
// print(this.pos);
}
this.edges = function() {
if (this.pos.x >= width) {
this.pos.x = 0;
}
}
this.show = function() {
noStroke();
push();
translate(this.pos.x, this.pos.y, 0);
sphere(this.r);
pop();
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.js"></script>
You only call sin one time in the construtor. You probably meant to apply it to this.y on every frame based on this.angle, or some other incrementing value. Also, there are duplicate vectors; pick either an x/y pair or use a vector x/y, but not both.
let particles = [];
let quantity = 20;
function setup() {
createCanvas(300, 300, WEBGL);
for (let i = 0; i < quantity; i++) {
let particle = new Particle();
particles.push(particle);
}
}
function draw() {
background(15);
orbitControl();
directionalLight([255], createVector(0, 0, -1));
translate(-width / 2, 0);
particles.forEach(particle => {
particle.update();
particle.edges();
particle.show();
});
};
// particle.js
function Particle() {
this.angle = 0;
this.r = 10;
this.x = random(width);
this.y = 0;
this.update = function() {
this.angle += 0.05;
this.y = sin(this.angle) * 100;
}
this.edges = function() {
if (this.x >= width) {
this.x = 0;
}
}
this.show = function() {
noStroke();
push();
translate(this.x, this.y, 0);
sphere(this.r);
pop();
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script>
When I was writing the code I saw that the code would not reset the canvas to (400, 400) after being changed to (600, 600). It would disorientate the canvas and stretch all the shapes with it in evaporation(). When going through all the screens and trying to go back to reset back.
//Variables
let screen = 0;
let bugs = [];
let amt = 1000;
let xpos=0;
function setup() {
colorMode(HSB);
//Changes Colormode to HSB(Hue-Saturation-Brightness)
//Creates the particles for the evaporation screen
//For loop with increasement that states more of the smoke is created
for (let i = 0; i < amt; i++) {
let x = 200;
let y = 300;
let rad = random(10, 50);
let b = new Bug(x, y, rad);
bugs[i] = b;
}
}
//Says if the value of screen changes so does the screen
function draw() {
if(screen == 0) {
evaporationscreen();
} else if(screen == 1) {
condensation();
} else if(screen == 2) {
presipitation();
}
}
//Evaporation
function evaporationscreen() {
background('#d2b48c');
createCanvas(400, 400);
//NOT RGB, HSB COLOR PALLETE(DO NOT MIX UP);
//HTML Color pallete('e928320');
noStroke();
fill('#3895d3') //Lake
circle(400, 400, 600)
fill('#18bdf0') //Sky
rect(0, 0, 400, 200);
fill('#ffff00'); //Sun
circle(300, 60, 70);
fill('#e9bd15'); //Darkspots on Sun
circle(315, 75, 10);//Forms the Sun and Darkspots
circle(280, 52, 8);//Forms the Sun and Darkspots
circle(299, 60, 13);//Forms the Sun and Darkspots
circle(320, 48, 9);//Forms the Sun and Darkspots
circle(295, 30, 6);//Forms the Sun and Darkspots
circle(284, 79, 9);//Forms the Sun and Darkspots
fill(240, 100, 50);//Forms the Sun and Darkspots
rect(0, 200, 400, 400); //Beach
console.log("EVAPORATION");
//Lots of variables
let stoprip = 45;
let lake = int(dist(400, 400, mouseX, mouseY));
var starx = random(0, 400);
var stary = random (10, 190);
var sun = int(dist(300, 60, mouseX, mouseY));
//If Statement that creates ripples
if (mouseIsPressed && lake < 300) {
if (mouseY >= 200) {
noFill();
stroke('#3895d3');
strokeWeight(4);
circle(mouseX, mouseY, ripple);
ripple = ripple + 5;
console.log('lake rippling');
if (ripple >= stoprip) {
ripple = 10
}
} else {
ripple = 10
}
} else if (mouseIsPressed && sun <=35) {
fill('#fee12b');
circle(starx, stary, 10);
console.log('stars');
}
background(50, 0.25);
//For loop that creates the smoke effect with an increasement
for (let i = 0; i < bugs.length; i++) {
bugs[i].show();
bugs[i].move();
if( bugs[i].radius > 100 ) {
bugs.splice(i, 1);
}
}
let x = 200;
let y = 300;
let rad = random(10, 50);
let b = new Bug(x, y, rad);
bugs.push(b);
}
//Particles for evaporation
class Bug {
constructor(tempX, tempY, tempRadius) {
this.x = tempX;
this.y = tempY;
this.radius = tempRadius;
this.color = color(random(80,100), 0.05);
}
//Creates the sketch for it
show() {
noStroke();
fill(this.color);
ellipse(this.x, this.y, this.radius);
}
//Moves it up at a random pace
move() {
this.x = this.x + random(-5, 5);
this.y = this.y - random(2);
this.radius = this.radius + 0.4;
}
}
function condensation() {
//Changes the canvas from 400,400 to 600,600
createCanvas(600, 600);
//Changes background to grey to imitate storm,
background(50);
console.log("CONDENSATION");
//Colors the cloud and fills it with white
noStroke();
fill(255);
//States where cloud spawns
cloud(xpos,50,1);
cloud(xpos,50,2);
cloud(xpos,80,0.75);
xpos++;
//Has cloud with an increasement
if (xpos>600) {
xpos=0;
}
}
function presipitation() {
createCanvas(600, 600);
ellipseMode(RADIUS);
noFill();
background(211, 69, 93);
console.log("PRESIPITATION")
//If statement that create a for loop that spawns new particles(rain)
if (particles.length < 200) particles.push(new Particle());
for (var i = 0; i < particles.length; i++) {
particles[i].update();
particles[i].display();
}
}
var particles = [];
//Variable
//Rain drop / Particle
class Particle {
constructor() {
this.reset();
}
//Resets Particle after update
reset() {
this.x = random(width);
this.y = random(-150, 0);
this.vy = random(0.1, 2);
this.maxy = this.y + height;
this.r = 0;
this.tr = 50;
this.w = random(0.1, 2);
}
//If statement that creates the gravity for the particle
update() {
if (this.y < this.maxy) {
this.y += this.vy;
} else {
this.r++;
}
if (this.r > this.tr) this.reset();
}
//If statement(says it will remain the raindrop form or change into the puddle
display() {
strokeWeight(this.w);
if (this.y < this.maxy) {
stroke(255);
push();
translate(this.x,this.y);
beginShape();
strokeWeight(1);
vertex(0,-5);
quadraticVertex(3, 0, 0, 1);
quadraticVertex(-3,0, 0, -5);
endShape(CLOSE);
pop();
} else {
stroke(255, map(this.r, 0, this.tr, 255, 0));
ellipse(this.x, this.y, this.r, this.r*.5);
}
}
}
//Changes Screen from evaporation, condensation, precipitation
function mousePressed(){
if(screen==0){
screen=1;
}else if(screen==1){
screen = 2;
} else if(screen == 2) {
screen = 0;
}
}
//Makes cloud
function cloud(x,y,sc){
push()
scale(sc);
ellipse(x,y,50,30);
ellipse(x,y+20,80,30);
ellipse(x+20,y,40,30);
ellipse(x+30,y+10,70,40);
pop()
}
html, body {
margin: 0;
padding: 0;
}
canvas {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sketch</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="libraries/p5.min.js"></script>
<script src="libraries/p5.sound.min.js"></script>
</head>
<body>
<script src="sketch.js"></script>
</body>
</html>
From the documentation for createCanvas:
Creates a canvas element in the document, and sets the dimensions of it in pixels. This method should be called only once at the start of setup. Calling createCanvas more than once in a sketch will result in very unpredictable behavior.
Instead of calling createCanvas repeatedly in your drawing functions, you should use resizeCanvas once when transitioning from one screen to another.
I couldn't actually reproduce whatever issue you were describing (partly because I could not make sense of your description). However I did also notice an issue with the variable ripple not being declared anywhere, so I fixed that, and now the sketch appears to be working correctly.
//Variables
let previousScreen = 0;
let screen = 0;
let bugs = [];
let amt = 1000;
let xpos = 0;
let ripple = 0;
function setup() {
createCanvas(400, 400);
colorMode(HSB);
//Changes Colormode to HSB(Hue-Saturation-Brightness)
//Creates the particles for the evaporation screen
//For loop with increasement that states more of the smoke is created
for (let i = 0; i < amt; i++) {
let x = 200;
let y = 300;
let rad = random(10, 50);
let b = new Bug(x, y, rad);
bugs[i] = b;
}
}
//Says if the value of screen changes so does the screen
function draw() {
if (screen == 0) {
if (previousScreen !== screen) {
resizeCanvas(400, 400);
previousScreen = screen;
}
evaporationscreen();
} else if (screen == 1) {
if (previousScreen !== screen) {
resizeCanvas(600, 600);
previousScreen = screen;
}
condensation();
} else if (screen == 2) {
if (previousScreen !== screen) {
resizeCanvas(600, 600);
previousScreen = screen;
}
presipitation();
}
}
//Evaporation
function evaporationscreen() {
background('#d2b48c');
//NOT RGB, HSB COLOR PALLETE(DO NOT MIX UP);
//HTML Color pallete('e928320');
noStroke();
fill('#3895d3') //Lake
circle(400, 400, 600)
fill('#18bdf0') //Sky
rect(0, 0, 400, 200);
fill('#ffff00'); //Sun
circle(300, 60, 70);
fill('#e9bd15'); //Darkspots on Sun
circle(315, 75, 10); //Forms the Sun and Darkspots
circle(280, 52, 8); //Forms the Sun and Darkspots
circle(299, 60, 13); //Forms the Sun and Darkspots
circle(320, 48, 9); //Forms the Sun and Darkspots
circle(295, 30, 6); //Forms the Sun and Darkspots
circle(284, 79, 9); //Forms the Sun and Darkspots
fill(240, 100, 50); //Forms the Sun and Darkspots
rect(0, 200, 400, 400); //Beach
console.log("EVAPORATION");
//Lots of variables
let stoprip = 45;
let lake = int(dist(400, 400, mouseX, mouseY));
var starx = random(0, 400);
var stary = random(10, 190);
var sun = int(dist(300, 60, mouseX, mouseY));
//If Statement that creates ripples
if (mouseIsPressed && lake < 300) {
if (mouseY >= 200) {
noFill();
stroke('#3895d3');
strokeWeight(4);
circle(mouseX, mouseY, ripple);
ripple = ripple + 5;
console.log('lake rippling');
if (ripple >= stoprip) {
ripple = 10
}
} else {
ripple = 10
}
} else if (mouseIsPressed && sun <= 35) {
fill('#fee12b');
circle(starx, stary, 10);
console.log('stars');
}
background(50, 0.25);
//For loop that creates the smoke effect with an increasement
for (let i = 0; i < bugs.length; i++) {
bugs[i].show();
bugs[i].move();
if (bugs[i].radius > 100) {
bugs.splice(i, 1);
}
}
let x = 200;
let y = 300;
let rad = random(10, 50);
let b = new Bug(x, y, rad);
bugs.push(b);
}
//Particles for evaporation
class Bug {
constructor(tempX, tempY, tempRadius) {
this.x = tempX;
this.y = tempY;
this.radius = tempRadius;
this.color = color(random(80, 100), 0.05);
}
//Creates the sketch for it
show() {
noStroke();
fill(this.color);
ellipse(this.x, this.y, this.radius);
}
//Moves it up at a random pace
move() {
this.x = this.x + random(-5, 5);
this.y = this.y - random(2);
this.radius = this.radius + 0.4;
}
}
function condensation() {
//Changes background to grey to imitate storm,
background(50);
console.log("CONDENSATION");
//Colors the cloud and fills it with white
noStroke();
fill(255);
//States where cloud spawns
cloud(xpos, 50, 1);
cloud(xpos, 50, 2);
cloud(xpos, 80, 0.75);
xpos++;
//Has cloud with an increasement
if (xpos > 600) {
xpos = 0;
}
}
function presipitation() {
ellipseMode(RADIUS);
noFill();
background(211, 69, 93);
console.log("PRESIPITATION")
//If statement that create a for loop that spawns new particles(rain)
if (particles.length < 200) particles.push(new Particle());
for (var i = 0; i < particles.length; i++) {
particles[i].update();
particles[i].display();
}
}
var particles = [];
//Variable
//Rain drop / Particle
class Particle {
constructor() {
this.reset();
}
//Resets Particle after update
reset() {
this.x = random(width);
this.y = random(-150, 0);
this.vy = random(0.1, 2);
this.maxy = this.y + height;
this.r = 0;
this.tr = 50;
this.w = random(0.1, 2);
}
//If statement that creates the gravity for the particle
update() {
if (this.y < this.maxy) {
this.y += this.vy;
} else {
this.r++;
}
if (this.r > this.tr) this.reset();
}
//If statement(says it will remain the raindrop form or change into the puddle
display() {
strokeWeight(this.w);
if (this.y < this.maxy) {
stroke(255);
push();
translate(this.x, this.y);
beginShape();
strokeWeight(1);
vertex(0, -5);
quadraticVertex(3, 0, 0, 1);
quadraticVertex(-3, 0, 0, -5);
endShape(CLOSE);
pop();
} else {
stroke(255, map(this.r, 0, this.tr, 255, 0));
ellipse(this.x, this.y, this.r, this.r * .5);
}
}
}
//Changes Screen from evaporation, condensation, precipitation
function mousePressed() {
if (screen == 0) {
screen = 1;
} else if (screen == 1) {
screen = 2;
} else if (screen == 2) {
screen = 0;
}
}
//Makes cloud
function cloud(x, y, sc) {
push();
scale(sc);
ellipse(x, y, 50, 30);
ellipse(x, y + 20, 80, 30);
ellipse(x + 20, y, 40, 30);
ellipse(x + 30, y + 10, 70, 40);
pop();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js"></script>
I am not sure why but the "invisible circle" is not align with the mouseX and Y and i ended up hard coding it. Anyone know why this happens?
If i just wrote (mouseX,mouseY) the ellipse will be around 300 units away from the cusor.
Is there any way fix it/ improve it?
Without setting exact value such as mouseX-300?
Thanks
*not much details i can think of for now.not much details i can think of for now.not much details i can think of for now.
let cubes = [];
function setup() {
createCanvas(windowWidth, windowHeight, WEBGL);
backCol = color(243, 243, 243);
//background(backCol);
for (let i = 0; i < 10; i++) {
for (let j = 0; j < 10; j++) {
let xPos = map(i, 0, 9, 50, width - 50);
let yPos = map(j, 0, 9, 50, height - 50);
cubes.push(new Cubes(xPos, yPos));
}
}
}
function draw() {
background(backCol);
noFill();
for (let a = 0; a < cubes.length; a++) {
cubes[a].update();
}
}
class Cubes {
constructor(x, y) {
this.x = x;
this.y = y;
this.size = 30;
this.stroke = 70;
this.shift1 = color(96);
this.shift2 = color(244);
}
update() {
this.shape();
this.shift_Color();
this.Invisible_Circle();
}
Invisible_Circle () {
push();
stroke(10);
//noFill();
// translate(mouseX,mouseY);
ellipse(mouseX - 280,mouseY - 280,200);
pop();
}
shape() {
push();
stroke(this.stroke);
translate(this.x - width / 2, this.y - height / 2, 0);
this.magnetic()
box(this.size);
pop();
}
shift_Color() {
let distance = dist(mouseX, mouseY, this.x, this.y);
let shiftX = map(mouseX, 0, this.a, 0, 1.0);
let change = lerpColor(this.shift1, this.shift2, shiftX);
if (distance < this.a) {
fill(change);
} else {
noFill();
}
}
magnetic() {
let distance = dist(mouseX, mouseY, this.x, this.y);
if (distance < this.size * 3) {
this.a = atan2(mouseY - this.y, mouseX - this.x);
rotateX(this.a);
rotateY(this.a);
} else {
rotateX(millis() / 1000);
rotateY(millis() / 1000);
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>
In WEBGL mode (createCanvas()) the center of the screen is by default (0, 0). Anyway, the top left coordinate of the window is still (0, 0). Hence you have to translate the mouse position, by (-width/2, -height/2):
ellipse(mouseX - width/2, mouseY - height/2, 200);
Furthermore Invisible_Circle should not a method of Cubes:
function Invisible_Circle () {
stroke(10);
//noFill();
ellipse(mouseX - width/2, mouseY - height/2, 200);
}
class Cubes {
constructor(x, y) {
// [...]
And has to be called after drawing the boxes:
function draw() {
background(backCol);
Invisible_Circle();
noFill();
for (let a = 0; a < cubes.length; a++) {
cubes[a].update();
}
Invisible_Circle();
}
See the example:
let cubes = [];
function setup() {
createCanvas(windowWidth, windowHeight, WEBGL);
backCol = color(243, 243, 243);
//background(backCol);
for (let i = 0; i < 10; i++) {
for (let j = 0; j < 10; j++) {
let xPos = map(i, 0, 9, 50, width - 50);
let yPos = map(j, 0, 9, 50, height - 50);
cubes.push(new Cubes(xPos, yPos));
}
}
}
function draw() {
background(backCol);
Invisible_Circle();
noFill();
for (let a = 0; a < cubes.length; a++) {
cubes[a].update();
}
Invisible_Circle();
}
function Invisible_Circle () {
stroke(10);
//noFill();
ellipse(mouseX - width/2, mouseY - height/2, 200);
}
class Cubes {
constructor(x, y) {
this.x = x;
this.y = y;
this.size = 30;
this.stroke = 70;
this.shift1 = color(96);
this.shift2 = color(244);
}
update() {
this.shape();
this.shift_Color();
}
shape() {
push();
stroke(this.stroke);
translate(this.x - width / 2, this.y - height / 2, 0);
this.magnetic()
box(this.size);
pop();
}
shift_Color() {
let distance = dist(mouseX, mouseY, this.x, this.y);
let shiftX = map(mouseX, 0, this.a, 0, 1.0);
let change = lerpColor(this.shift1, this.shift2, shiftX);
if (distance < this.a) {
fill(change);
} else {
noFill();
}
}
magnetic() {
let distance = dist(mouseX, mouseY, this.x, this.y);
if (distance < this.size * 3) {
this.a = atan2(mouseY - this.y, mouseX - this.x);
rotateX(this.a);
rotateY(this.a);
} else {
rotateX(millis() / 1000);
rotateY(millis() / 1000);
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>
I have been working on an internship. The application I need to make needs to have different colors in the intersecting areas. I made a global variable of color. I am changing its values in the buttons I have created. But whenever I press the button it changes color of each intersecting area even though I have pushed it in array with its own color. How can I solve this issue
let squares = [];
let overlappingsquares = []; //variable to hold squares drawn in intersecting area
let dragObject = null; // variable to hold the object being dragged
var myColour = (255);
function setup() {
createCanvas(600, 520);
button1 = createButton("Alpha");
button2 = createButton("Bravo");
button3 = createButton("Charlie");
button4 = createButton("Delta");
button5 = createButton("Echo");
button6 = createButton("Foxtrot");
button7 = createButton("Golf");
button8 = createButton("Hotel");
button9 = createButton("India");
button10 = createButton("Juliet");
button1.mousePressed(fun1);
button2.mousePressed(fun2);
button3.mousePressed(fun3);
button4.mousePressed(fun4);
button5.mousePressed(fun5);
button6.mousePressed(fun6);
button7.mousePressed(fun7);
button8.mousePressed(fun8);
button9.mousePressed(fun9);
button10.mousePressed(fun10);
//frameRate(1);
}
function draw() {
background(135,206,250);
//myColour = (255);
// if a square is being dragged, update its position
if (this.dragObject != null) {
this.dragObject.position.x = mouseX;
this.dragObject.position.y = mouseY;
}
//draw all squares
for (let i = 0; i < squares.length; i++) {
let s = squares[i];
s.show();
}
for (let i = 0; i < squares.length; i++) {
for (let j = i + 1; j < squares.length; j++) {
//block checking collision
if (i != j && squares[i].collides(squares[j])) {
squares[i].changecolor();
//set intersection color
//fill(myColour);
//calculate parameters
newX = Math.max(squares[i].position.x, squares[j].position.x);
newY = Math.max(squares[i].position.y, squares[j].position.y);
newW = Math.min(squares[i].position.x + squares[i].w, squares[j].position.x + squares[j].w) - newX;
newH = Math.min(squares[i].position.y + squares[i].h, squares[j].position.y + squares[j].h) - newY;
//draw rectangle
let col = myColour
let Osquare = new OverlappingSquares(newX, newY, newW, newH, col);
overlappingsquares.push(Osquare);
}
}
}
}
function mousePressed() {
if (this.dragObject == null) {
//ask every square if they are being "hit"
for (let i = 0; i < squares.length; i++) {
let s = squares[i];
if (s.hitTest()) {
//if so, set the drag object as this square and return
this.dragObject = s;
return;
}
}
//no squares are hit, create a new square.
let square = new Square(mouseX, mouseY);
squares.push(square);
}
}
//mouse is released, release the current dragged object if there is one
function mouseReleased() {
this.dragObject = null;
}
class Square {
constructor(InitialX, InitialY) {
this.w = 60;
this.h = 60;
this.position = {
x: InitialX,
y: InitialY
};
}
//basic test of mouse position against square position and if its inside the rectangle
hitTest() {
let x = mouseX - this.position.x;
let y = mouseY - this.position.y;
return (x > 0 && x < this.w) && (y > 0 && y < this.h);
}
show() {
fill(50);
rect(this.position.x, this.position.y, this.w, this.h);
}
collides(sqr) {
if (this.position.x < sqr.position.x + sqr.w &&
this.position.x + this.w > sqr.position.x &&
this.position.y < sqr.position.y + sqr.h &&
this.position.y + this.h > sqr.position.y) {
return true;
}
return false;
}
changecolor() {
for (let i = 0; i < squares.length; i++) {
let s = squares[i];
s.show();
}
for (let i = 0; i < overlappingsquares.length; i++) {
let s = overlappingsquares[i];
s.show();
}
}
}
//Overlapping sqaures class
class OverlappingSquares {
constructor(X, Y, W, H, C) {
this.w = W;
this.h = H;
this.col = C
this.position = {
x: X,
y: Y
};
}
show() {
fill(this.col)
rect(this.position.x, this.position.y, this.w, this.h);
}
}
function fun1() {
myColour = color(0,255, 0); //green
}
function fun2() {
myColour = color(255, 0, 0); //red
}
function fun3() {
myColour = color(0, 0, 200); //blue
}
function fun4() {
myColour = color(250, 0, 150); //pink
}
function fun5() {
myColour = color(128, 0, 128); //purple
}
function fun6() {
myColour = color(255, 255, 0); //yellow
}
function fun7() {
myColour = color(128, 0, 0); //marroon
}
function fun8() {
myColour = color(255, 128, 0); //orange
}
function fun9() {
myColour = color(192, 105, 50); //brown
}
function fun10() {
myColour = color(255,228,196); //bisque
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.js"></script>
I went through your code and spotted this snippet
//draw rectangle
let col = myColour
let Osquare = new OverlappingSquares(newX, newY, newW, newH, col);
overlappingsquares.push(Osquare);
It's within the loop that you are calling on every single cycle. When ever you select a button, it sets the new value for 'myColour', and within the next loop it will color all overlapping elements. You don't really tell in detail what's your goal. But some how you will need to add another color variable and identify which button intersection you want to color which way...
I think it would be better to solve this in a different way. Looping over all elements will make your program lag.