I am making rectangles on the sketch board using processing, but I want to make them invisible. How do I do that? I'd appreciate your help.
Amrita
You can either not draw them, either use the forth(alpha/transparency) parameter for the fill function
not drawing:
int numVisible = 0;
for(int i = 0 ; i < 20 ; i++) {
boolean visible = random(1) > .5;
if(visible) {
rect(random(100),random(100),random(10),random(10));
numVisible++;
}
}
println(numVisible+" boxes are visible");
drawing transparent(only strokes are visible):
for(int i = 0 ; i < 20 ; i++) {
boolean visible = random(1) > .5;
fill(255,255,255,visible ? 255 : 0);
rect(random(100),random(100),random(10),random(10));
}
If it helps, here's a longer version of the same:
void setup(){
size(400,400,P2D);
smooth();
noStroke();
background(255);
for(int i = 0; i < 200 ; i++){
Rect r = new Rect(random(width),random(height),random(10,20),random(10,20),color(random(255),random(255),random(255),random(1) > .5 ? 255 : 64));
r.draw();
}
}
class Rect{
color c;
float w,h,x,y;
Rect(float x,float y,float w,float h,color c){
this.c = c;
this.w = w;
this.h = h;
this.x = x;
this.y = y;
}
void draw(){
fill(c);
rect(x,y,w,h);
}
}
Bellow is a snippet you can run:
function setup(){
createCanvas(400,400);
smooth();
noStroke();
background(255);
for(var i = 0; i < 200 ; i++){
var r = new Rect(random(width),random(height),random(10,20),random(10,20),color(random(255),random(255),random(255),random(1) > .5 ? 255 : 64));
r.draw();
}
}
function Rect(x,y,w,h,c){
this.c = c;
this.w = w;
this.h = h;
this.x = x;
this.y = y;
this.draw = function(){
fill(c);
rect(x,y,w,h);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.4/p5.min.js"></script>
You could put in the draw function a var to control if it must show what you want.
void draw()
{
if (showThis)
{
image(image);
}
}
Add noStroke(); and make the color the same as the background color?
Related
I've finished a single rectangle code, but I'd like to know ways to make at least four rectangles change color while hovering the mouse over them. Any advice is much appreciated.
code is below:
int rectX, rectY;
int rectSize = 90;
color rectColor;
color baseColor;
boolean rectOver = false;
void setup() {
size(640, 360);
rectColor = color(0);
baseColor = color(102);
rectX = width/2;
rectY = height/2;
rectMode(CENTER);
}
void draw() {
update(mouseX, mouseY);
noStroke();
if (rectOver) {
rectColor = color(255);
}else
{
rectColor = color(0);
}
stroke(255);
fill(rectColor);
rect(rectX, rectY, rectSize, rectSize);
}
void update(int x, int y) {
if ( overRect(rectX, rectY, rectSize, rectSize) ) {
rectOver = true;}
else{rectOver = false;}
}
boolean overRect(int x, int y, int width, int height) {
if (mouseX >= x-width/2 && mouseX <= x+width/2 &&
mouseY >= y-height/2 && mouseY <= y+height/2) {
return true;
}
else {
return false;
}
}
First of all, you have to fix your overRect function since width and height are built-in variables, secondly what you need to do is to declare a rectangle class that will contain the x,y, width and height of your rectangle, plus two methods: one to check if the mouse if hovering (using your old method) and one to self draw the rectangle. Lastly, you need an array to store your rectangles. Here is the final code:
int rectX, rectY;
int rectSize = 90;
color rectColor;
color baseColor;
ArrayList<rectangle> list;
boolean rectOver = false;
class rectangle {
float x,y,w,h;
rectangle (float y, float x,float w, float h) {
this.x = x;
this.y = y;
this.w = w;
this.h = h;
}
boolean checkInside() {
return overRect(x,y,w,h);
}
void selfDraw(){
if (this.checkInside()) {
rectColor = color(255);
}else
{
rectColor = color(0);
}
stroke(255);
fill(rectColor);
rect(x, y, w, h);
}
}
void setup() {
size(640, 360);
rectMode(CENTER);
list= new ArrayList<rectangle>();
list.add(new rectangle(40,40,50,60));
list.add(new rectangle(20,200,50,20));
list.add(new rectangle(300,200,50,50));
list.add(new rectangle(200,300,80,60));
}
void draw() {
for (int i = 0; i < list.size(); i++) {
list.get(i).selfDraw();
}
}
boolean overRect(float x, float y, float w, float h) {
if (mouseX >= x-w/2 && mouseX <= x+w/2 &&
mouseY >= y-h/2 && mouseY <= y+h/2) {
return true;
}
else {
return false;
}
}
Use inheritence. As in YOUSFI's answer, your nest net would be to build a rectangle class and write it's own mouse over function in there. Then, you can make an instance of that object in your main program and call it's mouseover function.
Instead of blindly copy pasting the code YOUSFI provided, my suggestion would be to read up on Object Oriented Programming or watch this introductory video series: https://www.youtube.com/watch?v=xG2Vbnv0wvg
I am trying to create a vertical carousel in processing with three ellipses.
I am able to get this done with two ellipses – that the carousel repeats itself over and over.
So far so good – it thought I could use the same logic for three but I am wrong. I started to think it works with more variables but wrong again… what am I missing in the logic? I really can not figure out how to set the values to make it seamless repeating itself…
Here is the example with two (this one is "seamless"):
float yspeed = 5;
float circleY;
int d = 720;
void setup() {
size(1080, 1620 );
circleY = 0;
}
void draw() {
background(255);
fill(0);
noStroke();
ellipse(width/2, circleY+height/2, d,d);
ellipse(width/2, circleY-height/2, d,d );
circleY = circleY + yspeed;
if (circleY > height) {
circleY=0;}
}
Here is my WIP with three … (BTW colors are only to see better):
float yspeed1 = 5;
float yspeed2 = 5;
float yspeed3 = 5;
float circleY1;
float circleY2;
float circleY3;
int d = 720;
void setup() {
size(1080, 1620);
circleY1 = 0;
circleY2 = 0;
circleY3 = 0;
}
void draw() {
background(255);
noStroke();
fill(255, 0, 0);
ellipse(width/2, circleY1, d, d);
circleY1= circleY1 + yspeed1;
if (circleY1 > height+d/2 ) {
circleY1=0;
}
fill(0, 255, 0);
ellipse(width/2, circleY2-810, d, d);
circleY2= circleY2 + yspeed2;
if (circleY2 > height+d/2 ) {
circleY2=0 ;
}
fill(0, 0, 255);
ellipse(width/2, circleY2-1620, d, d);
circleY3= circleY3 + yspeed3;
if (circleY3 > height+d/2 ) {
circleY3=0 ;
}
}
The one with three always starts at the intital point for all of them – but I thought that using individual variables would change it?
Thank you for any kind of help!
I found a solution myself! I used a trick – I did it with a loop and used four instead of three – three is in the end the only ones you see anyway!
float yspeed = 1;
float circleY;
int d = 360;
void setup() {
size(540, 810 );
circleY = 0;
}
void draw() {
background(255);
fill(0);
noStroke();
// fill(255,0,0);
translate(0, - height/2);
for (int i = 0; i< 5; i++) {
ellipse(width/2, circleY+height/2*i, d, d);
}
circleY = circleY + yspeed;
if (circleY > 405) {
circleY= 0;
}
}
IDK what just happen, but when the program is still running, the text the after it showed it gone, or it just showed one text.
can u guys help me
sorry for my bad English, I'll be appreciated your help thank you so much
this is my code
int j;
float timeinterval;
float lasttimecheck;
float endY = 0;
int index = 0;
int x2;
int y2;
int x0=150;
int y0=0;
float r = random(1, 20);
float x1 = 1;
float y1 = 1;
String[] words;
void timecapture() {
lasttimecheck = millis();
timeinterval = 0; //2sec
}
void setup() {
size (400, 400);
timecapture();
frameRate(5);
stroke(0);
}
void draw() {
background(255);
textSize(20);
int y2 = 0;
float [] x = new float [j];
float [] y = new float [j];
for (int i = 0; (i<x.length) && (i<y.length); i++ ) {
x[i] = x1;
y[i] = y1;
fill(0);
//text (x[i]+","+y[i], 20, y1);
}
y2 = y2+40;
String[] data = new String[x.length];
for (int ii = 0; ii<x.length; ii++) {
data [ii] = str(x[ii]) + ("\t") + str(y[ii]);
}
if (millis() > lasttimecheck + timeinterval) {
saveStrings("location", data);
lasttimecheck = millis();
}
if (x.length<30 && y.length<30)
j=j+1;
x1=x1+r; y1=y1+r;
}
The issue is that the arrays x and y are recreated in every frame.
void draw() {
background(255);
// [...]
float [] x = new float [j];
float [] y = new float [j];
Add global variables x, y and data. Use append() to add values to the arrays. And draw the text in a loop:
float [] x = new float [0];
float [] y = new float [0];
String[] data = new String[0];
void draw() {
background(255);
textSize(20);
for (int i = 0; (i<x.length) && (i<y.length); i++ ) {
fill(0);
text (x[i]+","+y[i], 20, i*20 + 20);
}
if (x.length <= j) {
x = append(x, x1);
y = append(y, y1);
data = append(data, str(x1) + ("\t") + str(y1));
}
if (millis() > lasttimecheck + timeinterval) {
saveStrings("location", data);
lasttimecheck = millis();
}
if (x.length<30 && y.length<30) {
j=j+1;
}
x1=x1+r; y1=y1+r;
}
I'm new to Processing and want to make the following sketch move images down, rather than up. I have tried adjusting the y to y+= speed in void move(), which does this but the images don't reload, they just do one cycle and the screen goes blank.
Your help would be appreciated :-)
Spot[] sp = new Spot[60];
PImage myImage;
/* #pjs preload="http://mathatelle.appspot.com/imgs/drawing_circle.png"; */
void setup() {
size(800, 400);
imageMode(CENTER);
myImage = loadImage("http://mathatelle.appspot.com/imgs/drawing_circle.png"); //100x100px
for (int i = 0; i < sp.length; i++) {
sp[i] = new Spot(random(width), random(height), random(0.2,1.0), random(0.1,1.0));
}
}
void draw() {
background(0);
for (int i = 0; i < sp.length; i++) {
sp[i].move();
sp[i].display();
}
}
class Spot {
float x, y, diameter, speed; // x座標, y座標, 直径, 速さ
Spot(float _x, float _y, float _diameter, float _speed) {
x = _x;
y = _y;
diameter = _diameter;
speed = _speed;
}
void move() {
speed *= 1.01;
y -= speed;
if (y < - myImage.width*diameter/2) {
x = random(width);
y = height + myImage.width*diameter/2;
speed = random(0.5,3);
}
}
void display() {
pushMatrix();
translate(x, y);
rotate(TWO_PI*diameter);
scale(diameter);
//tint(255, 255, 255, 153);
image(myImage, 0, 0);
popMatrix();
}
}
The logical is kind of inverted already,but just invert it again :)
here there are comments in the code:
Spot[] sp = new Spot[60];
PImage myImage;
/* #pjs preload="http://mathatelle.appspot.com/imgs/drawing_circle.png"; */
void setup() {
size(800, 400);
imageMode(CENTER);
myImage = loadImage("http://mathatelle.appspot.com/imgs/drawing_circle.png"); //100x100px
for (int i = 0; i < sp.length; i++) {
// a little change where spots are created...
sp[i] = new Spot(random(width), random(-myImage.height, height - 100), random(0.2, 1.0), random(0.1, 1.0));
}
}
void draw() {
background(0);
for (int i = 0; i < sp.length; i++) {
sp[i].move();
sp[i].display();
}
}
class Spot {
float x, y, diameter, speed; // x座標, y座標, 直径, 速さ
Spot(float _x, float _y, float _diameter, float _speed) {
x = _x;
y = _y;
diameter = _diameter;
speed = _speed;
}
void move() {
speed *= 1.01;
// invert movement direction
y += speed;
// also invert the test...
if (y > height + myImage.width*diameter/2) {
x = random(width);
y = height + myImage.width*diameter/2;
speed = random(0.5, 3);
}
}
void display() {
pushMatrix();
translate(x, y);
rotate(TWO_PI*diameter);
scale(diameter);
//tint(255, 255, 255, 153);
image(myImage, 0, 0);
popMatrix();
}
}
A friend helped me out, this is the solution to my problem :-)
Spot[] sp = new Spot[60];
PImage myImage;
/* #pjs preload="http://mathatelle.appspot.com/imgs/drawing_circle.png"; */
void setup() {
size(800, 400);
imageMode(CENTER);
myImage = loadImage("http://mathatelle.appspot.com/imgs/drawing_circle.png"); //100x100px
for (int i = 0; i < sp.length; i++) {
// a little change where spots are created...
sp[i] = new Spot(random(width), random(-myImage.height, height - 100), random(0.2, 1.0), random(0.1, 1.0));
}
}
void draw() {
background(0);
for (int i = 0; i < sp.length; i++) {
sp[i].move();
sp[i].display();
}
}
class Spot {
float x, y, diameter, speed; // x座標, y座標, 直径, 速さ
Spot(float _x, float _y, float _diameter, float _speed) {
x = _x;
y = _y;
diameter = _diameter;
speed = _speed;
}
void move() {
speed *= 1.01;
y += speed;
// change y = 0 - ...
if (y > height + myImage.width*diameter/2) {
x = random(width);
y = 0 - myImage.width*diameter/2;
speed = random(0.5, 3);
}
}
void display() {
pushMatrix();
translate(x, y);
rotate(TWO_PI*diameter);
scale(diameter);
//tint(255, 255, 255, 153);
image(myImage, 0, 0);
popMatrix();
}
}
How can I use the code I have now with an object where I can store the number of times the ball bounces and the color (when i add random color) and speed. Any pointers or tips would be greatful. I am new to OOP and it can get confusing for me. Thanks in advance
float x;
float y;
float yspeed = 0;
float xspeed = 0;
float balldiameter = 10;
float ballradius = balldiameter/2;
void setup() {
size (400,400);
background (255);
fill (0);
ellipseMode(CENTER);
smooth();
noStroke();
x = random(400);
y = 0;
}
void draw() {
mouseChecks();
boundaryChecks();
ballFunctions();
keyFunctions();
}
void mouseChecks() {
if (mousePressed == true) {
x = mouseX;
y = mouseY;
yspeed = mouseY - pmouseY;
xspeed = mouseX - pmouseX;
}
}
void boundaryChecks() {
if (y >= height - ballradius) {
y = height - ballradius;
yspeed = -yspeed/1.15;
}
if (y <= ballradius) {
y = ballradius;
yspeed = -yspeed/1.35;
}
if (x >= width -ballradius) {
x = width -ballradius;
xspeed = -xspeed/1.10;
}
if (x <= ballradius) {
x = ballradius;
xspeed = -xspeed/1.10;
}
}
void ballFunctions() {
if (balldiameter < 2) {
balldiameter = 2;
}
if (balldiameter > 400) {
balldiameter = 400;
}
ballradius = balldiameter/2;
background(255); //should this be in here?
ellipse (x,y,balldiameter,balldiameter);
yspeed = yspeed += 1.63;
// xspeed = xspeed+=1.63;
y = y + yspeed;
x = x + xspeed;
}
void keyFunctions() {
if (keyPressed) {
if(keyCode == UP) {
balldiameter +=1;
}
if (keyCode == DOWN) {
balldiameter -=1;
}
}
}
you will probably want to do the following:
create a new file called Ball.pde
In that file write:
public class Ball {
public float x;
public float y;
public float yspeed;
public float xspeed;
public float diameter;
public float radius;
public Ball(float initial_x, float initial_y, float diam) {
this.x = initial_x;
this.y = initial_y;
this.xspeed = 0;
this.yspeed = 0;
this.diameter = diam;
this.radius = diam/2;
}
public void move() {
// movement stuff here
}
}
This will give you a very basic Ball class. You can now use this class in your main sketch file like so:
Ball my_ball = new Ball(50, 50, 10);
you can access the balls members using:
my_ball.xspeed;
my_ball.yspeed;
my_ball.anything_you_defined_in_ball;
This will allow you yo store all relevent variables for the ball within its own class. you can even create more than 1.
Ball my_ball1 = new Ball(50, 50, 10);
Ball my_ball2 = new Ball(20, 20, 5);
Just to note that in Proccesing you don't need to create a new file for that, the code can go either in the same file (very bad practice as pointed below) or in a new tab of the IDE. If you are using the Processing IDE you can choose "new tab" from the arrow menu in the right and it will create the file for you. It will have ".pde" extension.