I'm fairly new to processing but I am having trouble shifting the z position on one of my line sets.
The x axis lines look as I need it to, but I am basically trying to bring up the Y set of lines so they arent just going downwards but are more linked up with the first set of lines. I hope I'm making sense, It's kind of hard to explain. Thanks!
Edit: Basically what Im trying to make is a tiled floor.
int grid = 80;
void setup() {
size (1024, 900, P3D);
}
void draw() {
int movement = mouseY-500;
background(0);
strokeWeight(2.5);
stroke(100, 255, 0, 60);
//floorx
for (int i = 0; i < width; i+=grid) {
line (i , height/2 , 0, i , height, 5000);
}
//floory
for (int i = 0; i < height; i+=grid) {
line (0, i + height/2, 0, width, i + height/2,0 );
}
}
I think that you want the grid to appear more geometrically correct. To achieve this you need different distances between the horizontal lines.
Try this in your floory part:
grid = 40;
//floory
for (int i = 0; i < height; i+=grid) {
line (0, i + height/2, 0, width, i + height/2, 0 );
grid += 20;
}
Related
I need some help with a code for an exam in my university.
What I'm trying to do here is a visual representation of a speech between two people. So the code starts when you press "L" and then works a bit like walkie talkie so when the other person speaks need to push "A", when the word goes back to the first person he needs to press "L" again and so on.
I like the result of the code so far but my professor told me to try something and I'm not able to do it.
He would like to see the coloured lines covering all the screen in vertical and not just a portion of it and when they reach the end of the screen on the right split in two so that the first row that just got created becomes half of the screen and the new one creating in the other half. When the second row finishes and the third row is created the screen must split in 3 and so on.
I tried to achieve this but I messed up the code so I will post here the last version of it working.
I hope you can help in any way, all kind of suggestion are appreciated, thank you!
import processing.sound.*;
AudioIn input;
Amplitude amp;
int y;
int x;
int incY = 141;
color bg = color(255, 0);
color high;
color low;
color mid;
void setup() {
size(1440, 846);
background(bg);
pixelDensity(displayDensity());
input = new AudioIn(this, 0);
input.start();
amp = new Amplitude(this);
amp.input(input);
}
void draw() {
textSize(40);
fill(0);
float volume = amp.analyze();
int lncolor = int(map(volume, 0, 0.05, 0, 3));
noFill();
strokeCap(SQUARE);
//strokeWeight(10);
if (lncolor==0) {
stroke(bg);
}
if (lncolor==1) {
stroke(low);
}
if (lncolor==2) {
stroke(mid);
}
if (lncolor==3) {
stroke(high);
}
if (key == 'a') {
x++;
if (x==width) {
x = 0;
y = y + incY;
}
line(x, y, x, y+incY);
high=color(72, 16, 255);
low= color(179, 155, 255);
mid = lerpColor(low, high, .5);
}
if (key == 'l') {
x++;
if (x==width) {
x = 0;
y = y + incY;
}
line(x, y, x, y+incY);
high=color(255, 128, 16);
low= color(255, 203, 156);
mid = lerpColor(low, high, .5);
}
}
The following code won't solve all of your problems, but does show how to keep splitting the screen into proportionate rectangles based on the number of times the graph exceeds the width of the screen. The advancing green bar at the top is where your current signal would be plotted. I'll leave it to you to figure out how to get all the old signal into its respective rectangle. I was unable to run the code that you posted; error message was "Audio Input not configured in start() method". All that I saw was a blank screen.
int x = 0;
int counter = 1;
void rectGrid(int t, int w, int h) {
int top;
for (int k = 0; k < counter; k++) {
top = t + k*h;
stroke(0);
strokeWeight(1);
fill(random(255));
rect( 0, top, w, h);
}
}
void setup() {
size(400, 400);
background(209);
}
void draw() {
fill(0, 255, 0);
rect(0, 0, x++, height/counter);
if (x == width) {
counter++;
println("count = ", counter + " : " + "height = ", height/counter);
x = 0;
background(209);
rectGrid(0, width, height/counter);
}
}
void setup() {
background(0);
fullScreen();
}
void draw() {
int g = 0;
float cCount = map(mouseY, 0, height, 1, 20);
for (int i = 0; i < width; i+=50) {
while(g < cCount) {
circle(i, mouseY, 20);
}
}
}
So what I'm trying to do is change the number of times circles are shown on the screen as I move the mouse. When the mouse moves down, more circles are shown on the screen all with the same Y coordinate but the distance between each circle is 50. As I move the mouse up, less circles are shown. Max circles is 20 and min is 1. I don't know how to set up a way for the number of circles to change as I move the mouse?
I think your approach is correct, but your code has some bugs that are not related to the problem itself.
In your while (g < cCount) loop, neither g nor cCount is updated, resulting in an infinite loop, but you don't really need that while loop anyway.
The following should work (but I haven't checked running the code myself, so it might have some bugs.
void draw() {
int circleCount = round(map(mouseY, 0, height, 1, 20));
for (int i = 0; i < circleCount; i+=1) {
circle(i*50, mouseY, 20);
}
}
I am basically trying to make a animation of vertical bars across the screen which should be equally spaced and continue until some key is pressed etc.. in the processing.org tool for animation.
I was able to get a kind of animation, but with hard coded values and had to write the same code again and again to generate the animation of bars for the whole frame/screen. I need to make it generic, so that changing the screen width or the size of the bars would not make me change the whole code but just the variables which control the parameters. Below is my code. I have written the code for three vertical bars but that needs to be done for the whole screen..
int a;
int i;
int j;
void setup() {
size(640, 360);
a = width/2;
i = 0;
}
void draw() {
background(51);
//need to avoid these repetitions each time for each bar
rect(a , 0, 25, width);
a = a - 1;
if (a < 0) {
a = width;
}
rect(i= a+50, 0, 25, width);
i = i - 1;
if (i < 0) {
i = width + a;
}
rect(j = i + 50, 0, 25, width);
j = j - 1;
if (a < 0) {
j = width + i;
}
}
It sounds like you're looking for an array.
An array is like a variable, only it can hold multiple values in its indexes. You can then use a for loop to iterate over the array and do stuff based on the values in the array.
Here's an example that uses an array to keep track of the line positions:
float[] linePositions = new float[10];
float lineWidth = 25;
float lineSpacing = 25;
float lineSpeed = 1;
void setup() {
size(640, 360);
for (int i = 0; i < linePositions.length; i++) {
linePositions[i] = width/2 + (lineWidth+lineSpacing)*i;
}
}
void draw() {
background(51);
//loop through the lines
for (int i = 0; i < linePositions.length; i++) {
//draw the line
rect(linePositions[i], 0, lineWidth, width);
//move the line
linePositions[i] -= lineSpeed;
//wrap the line
if ( linePositions[i] < 0) {
linePositions[i] = width;
}
}
}
More info on arrays can be found in the Processing reference.
I'm trying to draw bears in processing, (Just simple circles), how can I get the bears equally spaced apart, and have the same space from the edge of the screen to the bears, on either side? As well as vertically.
I know this is vague, but I'm terrible at explaining things
Because you does not provide any code or example I will just tell you how to place circle in the middle of sketch.
For simplicity imagine this set up:
void setup(){
size(400, 400);
}
1) Very basic approach would be to hard code position of this circle into ellipse draw function.
ellipse(200, 200, 50, 50);
Where first two parameters are coordinates for circle center. Simple find out from size 400x400 that mid is on coord 200x200. This is bad approach and you should avoid using it.
2) Better approach would be to calculate center coord using global variables width and height
ellipse(width/2, height/2, 50, 50);
3) When you are drawing or moving more complex objects it is preferred to use some function to draw this objects always with same fixed position in our example
void draw_circle(){
ellipse(0, 0, 50, 50);
}
And just moving center of drawing using transformations so our draw function will looks like this
void draw(){
pushMatrix();
translate(width/2, height/2);
draw_circle();
popMatrix();
}
Using this you could be able to draw bears equally spaced apart and from sides.
It sounds like you want a grid of equally spaced circles. For that you just need to divide your space into a grid in the x and y directions. The simplest way to do this is to wrap the kind of thing Majlik showed inside a double loop to move from cell to cell in your 'virtual' grid. To see this more clearly, in the code below there is an extra little bit so that if you press the 'g' key (for grid) you'll see the grid cells, with a circle centered in each one. You can press any other key to make the grid go away.
You can see that each way gives the same result: inside draw() uncomment the one you want and comment out the other 2.
int nx = 4; // number of circles horizontally
int ny = 5; // number of circles vertically
int divx;
int divy;
int diameter = 40;
void setup() {
size(600, 600);
// calculate width and hegith of each cell of the grid
divx = width/nx;
divy = height/ny;
}
// 3 ways to draw a regular grid of circles
void draw() {
background(200);
// show the cell layout if the g key was typed, otherwise don't
if(key == 'g')
drawGrid();
// 1 way
for(int i = 0; i < nx; i++) {
for(int j = 0; j < ny; j++ ) {
ellipse(i * divx + divx/2, j * divy + divy/2, diameter, diameter);
}
}
// another way
// for(int i = divx/2; i < width; i += divx) {
// for(int j = divy/2; j < height; j += divy ) {
// ellipse(i, j, diameter, diameter);
// }
// }
// yet another way
// for(int i = divx/2; i < width; i += divx) {
// for(int j = divy/2; j < height; j += divy ) {
// pushMatrix();
// translate(i, j);
// ellipse(0, 0, diameter, diameter);
// popMatrix();
// }
// }
}
void drawGrid() {
// draw vertical lines
for(int i = 1; i < nx; i++) {
line(i * divx, 0, i * divx, height);
}
// draw horizontal lines
for(int j = 1; j < ny; j++ ) {
line(0, j * divy, width, j * divy);
}
}
I am new to Processing.js and need a little bit support with this issue. I have made a HTML-Canvas animation where I have lines with a curtain like behavior which can be seen here:
Click
this is made with a canvas plugin called Paper.js
I now want to get similar effect on processing but don't really know how to figure it out. My attempt was:
float x;
float y;
void setup() {
size(1024, 768);
strokeWeight(2);
background(0, 0, 0);
}
void mouseMoved() {
x = mouseX;
y = mouseY;
}
void draw() {
background(0);
line(50, 50, x += x - x/5, y += y - y/5);
stroke(255, 255, 255);
line(50, 700, x += x - x/15, y += y - y/15);
stroke(255, 255, 255);
line(75, 50, x += x - x/25, y += y - y/25);
stroke(255, 255, 255);
line(75, 700, x += x - x/35, y += y - y/35);
// and so on, would create it within a loop
}
So what I am trying to do is basically get the same effect which I have done in HTML and adapt it in Processing.js.
Thanks in advance.
I'd strongly recommend ignoring the paper.js and reimplementing this properly. We're seeing a sequence of lines that connect to a historical line of coordinates, based on mouse position, so let's just implement that:
class Point {
float x, y;
Point(float _x, float _y) { x=_x; y=_y; }}
// our list of historical points
ArrayList<Point> points;
// the horizontal spacing of our lines has fixed interval
float interval;
// how many lines do we want to draw?
int steps = 50;
void setup() {
size(500, 500);
// initialise the "history" as just the midpoint
points = new ArrayList<Point>();
for (int i=0; i<steps; i++) {
points.add(new Point(width/2, height/2));
}
// compute the horizontal interval, because it's
// width-dependent. Never hard code dependent values.
interval = width/(float)steps;
// the lower we set this, the slower it animates.
frameRate(60);
}
void draw() {
// white background, black lines
background(255);
stroke(0);
// for each historic point, draw two
// lines. One from height 0 to the point,
// another from height [max] to the point.
Point p;
for (int i=0; i<steps; i++) {
p = points.get(i);
line(interval/2 + i*interval, 0, p.x, p.y);
line(interval/2 + i*interval, height, p.x, p.y);
}
// when we move the mouse, that counts as a new historic point
points.remove(0);
points.add(new Point(mouseX, mouseY));
}
Sketch running in the browser: http://jsfiddle.net/M2LRy/1/
(You could speed this up by using a round-robin array instead of an ArrayList, but ArrayLists are pretty convenient here)