I'm just trying to make circles grow and invert with blendMode(DIFFERENCE); but the radius is unchanged..
int radius = 15;
int radius2 = 15;
size(500, 500);
PGraphics pg = createGraphics(500, 500);
pg.beginDraw();
pg.background(255);
pg.blendMode(DIFFERENCE);
pg.fill(255);
pg.noStroke();
pg.ellipse(width/2, height/2, radius, radius);
pg.ellipse(width/2.25, height/2.25, radius2, radius2);
pg.ellipse(width/2.25, height/1.8, radius2, radius2);
pg.ellipse(width/1.8, height/2.25, radius2, radius2);
pg.ellipse(width/1.8, height/1.8, radius2, radius2);
radius++;
pg.endDraw();
background(255);
image(pg, 0, 0);
From: https://github.com/processing/processing/wiki/Troubleshooting
If your code has methods (it's not just in static mode) or needs to run over time, it must have a draw() method, otherwise nothing will happen. For instance, without a draw(), this code will stop after the setup() method.
That's it. You need to wrap your code in draw() function.
Here a nice "button"
int radius = 15;
int radius2 = 15;
PGraphics pg ;
void setup() {
size(500, 500);
pg = createGraphics(500, 500);
}
void draw() {
pg.beginDraw();
pg.background(255);
pg.blendMode(DIFFERENCE);
pg.fill(255);
pg.noStroke();
pg.ellipse(width/2, height/2, radius, radius);
pg.ellipse(width/2.25, height/2.25, radius2, radius2);
pg.ellipse(width/2.25, height/1.8, radius2, radius2);
pg.ellipse(width/1.8, height/2.25, radius2, radius2);
pg.ellipse(width/1.8, height/1.8, radius2, radius2);
radius++;
pg.endDraw();
background(255);
image(pg, 0, 0);
}
Related
Here is the code, i can get screenshots of everything if need be, but Im just getting one error - "syntax error you might be mixing active and static modes."
Im fairly new to this so any help would be great.
float boxSize = 40;
float margin = boxSize*2;
float depth = 400;
color boxFill;
void setup(){
size(500,500,P3D);
}
void draw(){
translate(width/2, height/2, -depth/2);
rotateY(frameCount*PI/60);
rotateX(frameCount*PI/60);
}
for (float i=-depth/2+margin; i<=depth/2-margin; i+=boxSize){
pushMatrix();
for (float j=-height/2+margin; j<=height/2-margin; j+=boxSize){
pushMatrix();
for (float k=-width/2+margin; k<=width/2-margin; k+=boxSize){
boxFill = color(abs(i), abs(j), abs(k), 50);
pushMatrix();
translate(k, j, i);
fill(boxFill);
box(boxSize, boxSize, boxSize);
popMatrix();
}
popMatrix();
}
popMatrix();
}
}
I recommend formatting your code first: Processing > Edit > Auto Format (CMD+T / Ctrl+T)
This will reveal this error right after the rotateX() call:
Missing left curly bracket "{"
What it actually means is that you have an extra } and it shouldn't be (as the for loop after should be part of the draw() function:
float boxSize = 40;
float margin = boxSize*2;
float depth = 400;
color boxFill;
void setup() {
size(500, 500, P3D);
}
void draw() {
translate(width/2, height/2, -depth/2);
rotateY(frameCount*PI/60);
rotateX(frameCount*PI/60);
for (float i=-depth/2+margin; i<=depth/2-margin; i+=boxSize) {
pushMatrix();
for (float j=-height/2+margin; j<=height/2-margin; j+=boxSize) {
pushMatrix();
for (float k=-width/2+margin; k<=width/2-margin; k+=boxSize) {
boxFill = color(abs(i), abs(j), abs(k), 50);
pushMatrix();
translate(k, j, i);
fill(boxFill);
box(boxSize, boxSize, boxSize);
popMatrix();
}
popMatrix();
}
popMatrix();
}
}
I am trying to make a spinning cube in Processing's P3D with this code:
int sizes = 500;
int rotation = 0;
void setup() {
size(500, 500, P3D);
}
void draw() {
lights();
translate(sizes/2, sizes/2, 0);
rotateY(rotation * (PI/180));
rotateX(rotation * (PI/180));
background(0);
box(sizes/2);
rotation = (rotation + 1);
}
When I run it the cube does spin as I wanted, but there are strange 'artifacts' (for lack of a better name) left behind its edges.
What causes this issue, and can it be solved?
I tried this and it worked. Maybe instead of using backround(0), set every pixel to black like the background function does manually.
int sizes = 500;
int rotation = 0;
void setup() {
size(500, 500, P3D);
}
void draw() {
fill(255);
lights();
translate(sizes/2, sizes/2, 0);
rotateY(rotation * (PI/180));
rotateX(rotation * (PI/180));
loadPixels();
for(int i = 0; i < pixels.length; i++) pixels[i] = color(0);
box(sizes/2);
rotation = (rotation + 1);
}
The rectangle is moving and when I click it needs to be moving at 0.1 instead of 3. I don't know how to code the mousePressed part so that it stays at 0.1 the whole time.
float stripeX = 0;
void setup() {
size(500, 300);
}
void draw() {
background(255);
fill(10, 10, 100);
rect(stripeX, 90, 150, 250);
stripeX = stripeX + 3;
stripeX = stripeX % width;
}
void mousePressed() {
stripeX = stripeX - 2.9;
}
You could just use the mousePressed variable along with an if statement inside the draw() function:
float stripeX = 0;
void setup() {
size(500, 300);
}
void draw() {
background(255);
fill(10, 10, 100);
rect(stripeX, 90, 150, 250);
if(mousePressed){
stripeX = stripeX + .1;
}
else{
stripeX = stripeX + 3;
}
stripeX = stripeX % width;
}
The best way in Your case is to use mouseReleased() method:
float stripeX, deltaX;
void setup() {
size(500, 300);
stripeX = 0f; // init values here, in setup()
deltaX = 3f;
}
void draw() {
background(255);
fill(10, 10, 100);
rect(stripeX, 90, 150, 250);
stripeX += deltaX;
stripeX = stripeX % width;
}
void mousePressed(){
deltaX = 0.1;
}
void mouseReleased(){
deltaX = 3f;
}
This is all a bit dicey. How often is draw() called? On every frame? Generally it's a bad idea to adjust things in a draw function, it should just draw.
To hack it somewhat
float stripeX = 0;
float deltaX = 3.0;
void draw()
{
//omitted some code
stripeX += deltaX;
}
void mousePressed()
{
if(deltaX > 0.1)
deltaX = 0.1;
else
deltaX = 3.0; // let a second press put it back to 3.0
}
However you probably want to put it back to 3.0 on mouse up. You haven't
given enough information to know how to intercept that event.
I am trying to get my gif to do something similar to this gif.
I have been able to get the line to draw, and the 'planets' to orbit, but can't figure out how to keep the line connecting the two circles, like the gif does.
Here's the basic code:
int x = 500;
int y = 500;
int radius = y/2;
int cX = x/2;
int cY = y/2;
String text1;
int lg_xBall;
int lg_yBall;
int sm_xBall;
int sm_yBall;
void setup() {
size(x, y);
smooth();
colorMode(RGB);
}
void draw() {
background(0);
stroke(255);
float t = millis()/1000.0f;
drawSmBallOrbit(100);
drawLgBallOrbit(100);
moveSmBall(t);
moveLgBall(t);
sun();
// showMouse();
connectingLines();
}
void drawCircle() { // This will draw a simple circle
stroke(1);
// x1=a+r*cos t, y1=b+r*sin t
ellipse(x/2, y/2, x/2, y/2);
}
void drawLines() { // This will draw lines from the center of the circle.
stroke(1);
line(x/2, y/2, radius/2, radius); // line from 6 to center
line(x/2, y/2, x/2, y/4); // line from 12 to center
for (int i = 0; i <= 5; i+=2.5) {
float x1 = x/2+radius/2*cos(i);
float y1 = y/2+radius/2*sin(i);
line(x/2, y/2, x1, y1);
}
}
void moveSmBall(float ky) { // This will create, and move, a small 'planet'
pushStyle();
stroke(100);
sm_xBall = (int)(cX+radius*cos(ky));
sm_yBall = (int)(cY+radius*sin(ky));
fill(190, 0, 0);
// background(0);
ellipse(sm_xBall, sm_yBall, 10, 10);
popStyle();
}
void drawSmBallOrbit(float opacity) {
pushStyle();
stroke(255, opacity);
strokeWeight(1);
noFill();
ellipse(x/2, y/2, cX+radius, cY+radius);
popStyle();
}
void moveLgBall(float kx) {
kx = kx/.7;
pushStyle();
lg_xBall = (int)(cX+radius*cos(kx)*.6);
lg_yBall = (int)(cY+radius*sin(kx)*.6);
fill(0, 0, 230);
ellipse(lg_xBall, lg_yBall, 30, 30);
popStyle();
}
void drawLgBallOrbit(float opacity) {
pushStyle();
stroke(255, opacity);
strokeWeight(1);
noFill();
ellipse(x/2, y/2, (cX+radius)*.6, (cY+radius)*.6);
popStyle();
}
void sun() {
pushStyle();
fill(250, 250, 0);
ellipse(cX, cY, 40, 40);
popStyle();
}
void connectingLines() {
line(sm_xBall, sm_yBall, lg_xBall, lg_yBall);
}
void showMouse() {
text("X: " + mouseX, x/2, y/2-30);
text("Y: " + mouseY, x/2, y/2-50);
}
Thanks for any help/advice!
The problem is that you're calling background() during every frame, which will clear away anything you've already drawn.
So you either need to stop calling background(), or you need to redraw the old lines every frame.
If you simply move the call to background() out of your draw() function and into your setup() function, you're about 50% there already:
void setup() {
size(x, y);
smooth();
colorMode(RGB);
background(0);
}
void draw() {
// background(0);
stroke(255);
float t = millis()/1000.0f;
drawSmBallOrbit(100);
drawLgBallOrbit(100);
moveSmBall(t);
moveLgBall(t);
sun();
// showMouse();
connectingLines();
}
However, the original animation does not show the previous positions of the ellipses. So you need to clear away the previous frame by calling the background() function, and then redraw previous line positions. You'd do that by having an ArrayList that holds those previous positions.
Here's a simple example that uses an ArrayList to redraw anywhere the mouse has been:
ArrayList<PVector> points = new ArrayList<PVector>();
void setup() {
size(500, 500);
}
void draw() {
background(0);
stroke(255);
points.add(new PVector(mouseX, mouseY));
for(PVector p : points){
ellipse(p.x, p.y, 10, 10);
}
}
You would need to do something very similar, but you'd have to keep track of two points at a time instead of one, since you're tracking two ellipses and not just the mouse position.
I am trying to rotate a line around in a circle that represents the direction a sensor is facing, while also plotting distance measurements. So I can't use background() in the draw function to clear the screen, because it erases the plotting of the distance readings. I've tried pggraphics and a few others ways, but can't seem to find a way to do it.
This is what I have right now:
void setup() {
background(255,255,255);
size(540, 540);
}
void draw() {
translate(width/2, height/2);
ellipse(0,0,100,100);
newX = x*cos(theta)- y*sin(theta);
newY = x*sin(theta)+ y*cos(theta);
theta = theta + PI/100;
//pushMatrix();
fill(255, 255);
line(0, 0, newX, newY);
rotate(theta);
//popMatrix();
}
I am new to Processing, and coding in general, but can anyone point me in the right direction on how to do this? Thanks
This is what it outputs: http://imgur.com/I825mjE
You can use background(). You just need to redraw the readings on each frame. You could store the readings in an ArrayList, which allows you to add new readings, change them and remove them.
An example:
ArrayList<PVector> readings;
int readingsCount = 15;
void setup() {
size(540, 540);
// create collection of random readings
readings = new ArrayList<PVector>();
for(float angle = 0; angle < TWO_PI; angle += TWO_PI/ readingsCount) {
float distance = random(100, 200);
// the new reading has an angle...
PVector newReading = PVector.fromAngle(angle);
// ... and a distance
newReading.mult(distance);
// Add the new reading to the collection
readings.add(newReading);
}
}
void draw() {
background(255);
// Put (0, 0) in the middle of the screen
translate(width/2, height/2);
float radius = 250;
noFill();
ellipse(0, 0, 2*radius, 2*radius);
// draw spinning line
float angle = frameCount * 0.1;
line(0, 0, radius * cos(angle), radius * sin(angle));
// draw readings
for(PVector p : readings) {
ellipse(p.x, p.y, 20, 20);
}
}