Size of frame gets larger when arrow keys (+,-) are pressed while T is pressed simultaneously, the entire frame gets larger (Black Borders Increase) while the "picture" gets smaller.
color c=color(0);
int strokeW=1,flag=0;
void setup() {
size(600, 600);
background(255);
}
void draw() {
fill(c);
stroke(c);
strokeWeight(strokeW);
if(flag==1) line(mouseX, mouseY, pmouseX, pmouseY);
}
void mouseDragged() {
flag=1;
}
void mouseReleased(){
flag=0;
}
void keyPressed() {
if (keyCode == UP) strokeW++;
if (keyCode == DOWN) strokeW--;
if (key == 'c')
background(255);
if (key == 't') {
fill(255,10); // semi-transparent white
rect(0,0,width,height);
fill(0);
//line(mouseX, mouseY, , 100);
}
if (strokeW<0)strokeW=1;
if(key== 'b')
c = color(random(0,255),random(0,255),random(0,255));
}
You have to change this fragment (1):
if (key == 't') {
fill(255,10); // semi-transparent white
rect(0,0,width,height);
fill(0);
}
into (2):
if (key == 't') {
fill(255,10); // semi-transparent white
stroke(255);
strokeWeight(0);
rect(0,0,width,height);
fill(0);
}
In (1) you draw rect with current stroke and strokeWeight values. In each animation frame, inside draw() method, there is:
stroke(c);
strokeWeight(strokeW);
which set stroke weight to strokeW. When you press 't' letter - this current strokeW is used for as yourrect(0,0,width,height) border ...
Related
I am learning how to code in Processing 4.
I am trying to make a code where when keyPressed() is clicked, one circle is drawn then when the button is pressed again, the first circle remains and then a second circle is drawn but with extent increased by 10, then the key pressed for a final time (3) and the third circle is drawn with the extent increased by 3 then it stops producing more circles.
This is the code I have so far but I am confused on how to approach it. Right now, the first circle just increases in size and it doesn't draw a second one. How do I draw 3 circles, one once keyPressed()?
int sizeIncrease = 10;
int initialSize = 70;
void setup() {
size(500, 500);
}
void draw() {
background(0);
stroke(255,0,0);
strokeWeight(25);
fill(255);
pushMatrix();
translate(20, 50);
circle(width/2, height/2, initialSize);
popMatrix();
}
void keyPressed() {
initialSize += sizeIncrease;
}
Add a variable count. Increment the variable when a key is pressed and draw the circles in a for-loop:
int sizeIncrease = 10;
int initialSize = 70;
int count = 1;
void setup() {
size(500, 500);
}
void draw() {
background(0);
noFill();
stroke(255);
pushMatrix();
translate(20, 50);
for (int i = 0; i < count; i++) {
circle(width/2, height/2, initialSize + i*sizeIncrease);
}
popMatrix();
}
void keyPressed() {
count ++;
}
int sizeIncrease = 10;
int initialSize = 70;
int count = 1;
void setup() {
size(500, 500);
}
void draw() {
background(0);
noFill();
stroke(255);
pushMatrix();
translate(20, 50);
for (int i = 0; i < count; i++)
{
circle(width/2, height/2, initialSize + i*sizeIncrease);
**if(i == 1)
{
sizeIncrease = 3;
}**
}
popMatrix();
}
void keyPressed() {
count ++;
}
when i click the region it continually draws instead of when im holding the mouse. also ill figure out how to toggle the pencil when clicked later on. i am very new.
void mousePressed() {
if (mouseX > 772 && mouseX < 864 && mouseY > 1 && mouseY < 74) {
//button 1 was just clicked, show button 2 instead
drawPencil = true;
}
}
}
void draw() {
if (drawPencil) {
stroke(255);
line(mouseX, mouseY, pmouseX, pmouseY);
}
}
I've written a small program which should give you an idea
boolean drawPencil;
void mousePressed() {
drawPencil = true;
}
void mouseReleased()
{
drawPencil = false;
}
void setup(){
size(800,800);
}
void draw() {
if (drawPencil) {
stroke(255);
line(mouseX, mouseY, pmouseX, pmouseY);
}
}
That's not how you do this. Here's a code snippet for you to experiment with. It'll react as follow:
float lastX, lastY;
void setup() {
size(800, 600);
}
void draw() {
background(0);
if (mousePressed) { // is true whenever a mouse button is held down
stroke(255);
line(mouseX, mouseY, lastX, lastY);
}
}
void mousePressed() { // run once every click
lastX = mouseX;
lastY = mouseY;
}
Have fun!
I'm trying to make it so that when the user clicks the pencil icon in the program they are allowed to draw until the pencil has been clicked again. ive not added in a toggle yet but my current problem is that i get the desired behaviour in the mouse region which i specified but nowhere else on the screen, also please excuse my code its devolved a lot while playing with it, however by running it in its currrent state you should see what bug im talking about.
thanks
PImage[] img = new PImage[3];
boolean drawPencil = false;
boolean draw = false;
void setup() {
size(960, 720);
for (int i = 0; i < img.length; i++)
img[i] = loadImage("image"+i+".png");
//an array of images that sorts and load them into our program
image(img[0],0,0);
img[0].resize(width, height);
// set the desired image to screen size
}
void mousePressed() {
if (mouseX > 772 && mouseX < 864 && mouseY > 1 && mouseY < 74) {
drawPencil = true;
draw = true;
// if the user clicks the pencil icon they will begin to draw
}
}
void mouseReleased()
{
draw = false;
}
void draw() {
if (draw) {
stroke(255);
line(mouseX, mouseY, pmouseX, pmouseY);
}
if (key == 'w'||key == 'W') {
image(img[0],0,0);
img[0].resize(width, height);
println(drawPencil);
}
}
Way better post than the last. I think I now get what you want. I coded you a short example so you can get the hang of it. Here's what it will do:
PImage img;
boolean canDraw;
void setup() {
size(960, 720);
background(255);
img = loadImage("pencil.png");
}
void draw() {
if (canDraw) {
fill(color(0, 128, 0));
} else {
fill(color(128, 0, 0));
}
rect(800, 1, 100, 100);
image(img, 800, 1, 100, 100);
if (canDraw && mousePressed) {
stroke(0);
line(mouseX, mouseY, pmouseX, pmouseY);
}
}
void mouseClicked() {
if (mouseX > 800 && mouseX < 800+img.width && mouseY > 1 && mouseY < 1+img.height) {
canDraw = !canDraw;
}
}
I'll hang around in case you want to ask questions about this. Have fun!
I made a simple drawing program to draw lines and increase/decrase the thickness of the line:
float strokeWeight = 2;
void setup() {
size(640, 360);
noSmooth();
fill(126);
background(255);
strokeWeight(strokeWeight);
}
void draw() {
background(0);
ellipse(mouseX, mouseY, strokeWeight/2, strokeWeight/2);
background(255);
if (mousePressed) {
stroke(0);
line(mouseX, mouseY, pmouseX, pmouseY);
}
if (keyPressed) {
if (key == '+') {
strokeWeight = strokeWeight + 0.5;
}
if (key == '-') {
strokeWeight = strokeWeight - 0.5;
}
if (strokeWeight >= 0.5) {
strokeWeight(strokeWeight);
}
}
}
Now I want to move a circle with my cursor that indicates the current thickness of the line. I tried something like this:
ellipse(mouseX, mouseY, strokeWeight/2, strokeWeight/2)
But this way it draws ellipses over and over again. Is there a way to "erase" the circle made before?
I am not 100% sure that I've understood your question, but you probably want to use PGrahics, on one you keep the lines, on the other you draw the circle.
float strokeWeight = 2;
PGraphics canvas;
PGraphics thickness_circle;
void setup() {
size(640, 360);
canvas = createGraphics(width, height);
thickness_circle = createGraphics(width, height);
thickness_circle.beginDraw();
thickness_circle.noFill();
thickness_circle.strokeWeight(1);
thickness_circle.stroke(255, 0, 0);
thickness_circle.endDraw();
}
void draw() {
background(255);
if (keyPressed) {
if (key == '+') {
strokeWeight += 0.5;
}
if (key == '-') {
strokeWeight -= 0.5;
}
strokeWeight = strokeWeight >= 0.5 ? strokeWeight : 0.5;
}
if (mousePressed) {
canvas.beginDraw();
canvas.strokeWeight(strokeWeight);
canvas.line(mouseX, mouseY, pmouseX, pmouseY);
canvas.endDraw();
}
image(canvas, 0, 0);
thickness_circle.beginDraw();
thickness_circle.clear();
thickness_circle.ellipse(mouseX, mouseY, strokeWeight, strokeWeight);
thickness_circle.endDraw();
image(thickness_circle, 0, 0);
}
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.