Having drawn multiple lines using the sin function, I wondered how you would fill in the gap between each of the two lines
float a = 0.0;
float inc = TWO_PI/25.0;
for(int i=0; i<100; i=i+4) {
line(i, 50, i, 50+sin(a)*40.0);
a = a + inc;
}
#maskacovnik's solution will work.
You can also be a bit cheeky and simply draw a shape:
float a = 0.0;
float inc = TWO_PI/25.0;
beginShape();
for(int i=0; i<=100; i=i+4) {
vertex(i, 50+sin(a)*40.0);
a = a + inc;
}
endShape();
Here's a preview you can run(using js):
function setup() {
createCanvas(100,100);
background(192);
var a = 0.0;
var inc = TWO_PI/25.0;
beginShape();
for(var i=0; i<=100; i=i+4) {
vertex(i, 50+sin(a)*40.0);
a = a + inc;
}
endShape();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.6/p5.min.js"></script>
I would fill it like this:
(It is a pseudocode, You haven't specified the language)
EDIT as #GeorgeProfenza noticed in comment below, you have specified the language
float a = 0.0;
float inc = TWO_PI/100.0; //4x decreased inc
for(int i=0; i<100; i=i+1) { //4x increased count of looping
if(i%4==0){
stroke(0);
}else{
stroke(255,0,0);
}
line(i, 50, i, 50+sin(a)*40.0);
a = a + inc;
}
I would paint lines close together and every fourth will be black
Related
I'm very new to Processing and coding in general and trying to program a row of falling Domino bricks activated by an ellipse.
I have programmed a function for the bricks standing upright and one for the fallen bricks, but I can only get the bricks to fall all at the same time.
I'm looking for a way to make them fall one after the other. It would be great if someone could help me out.
This is my Code so far -
First tab:
Dom[] dominos = new Dom[20];
int m;
float x = 100;
void setup() {
size (600, 600);
for (int i=0; i < dominos.length; i++) {
dominos[i] = new Dom();
}
}
void draw() {
background(0);
if (m<91) {
m = m + 1;
}
fill(0);
ellipse(m, height/2 + 15, 20, 20);
fill(255, 80, 0);
ellipse (m, height/2 + 15, 20, 20);
for (int i=0; i < dominos.length; i++) {
if (m < 90)
dominos[1].show();
if (m >= 90)
dominos[i].fall();
}
}
Second tab:
class Dom {
float x = 100;
float y = height/2 - 22.5;
void fall() {
push();
stroke(255);
strokeWeight(10);
strokeCap(SQUARE);
for (int i = 0; i<15; i++) {
line (x + i*30 + 45, y+40, x + i *30, y+50);
}
pop();
}
void show() {
push();
stroke(255);
strokeWeight(10);
strokeCap(SQUARE);
for (int i = 0; i<15; i++) {
line (x + i*30, y, x + i *30, y+45);
}
pop();
}
}``
First of all, look what Your Dom.fall(), and Dom.show() is doing.
Each method draws 15 rectangles.
Next, look what Are You doing with dominos. It's an Array of 20 elements.
So, in draw() You are drawing 15 rectangles, 20 times with every frame refresh.
Basically You need an Array of 15 objects each drawing one rectangle. Or one object drawing 15 rectangles. But not 20 objects drawing 15 rectangles.
So, here is the simpler solution of Your problem:
Dom dominos;
int m;
void setup() {
size (600, 600);
dominos = new Dom();
}
void draw() {
background(0);
if (m<91) {
m++;
}
fill(255, 80, 0);
ellipse(m, height/2 + 15, 20, 20);
if (m>=90) {
dominos.fallenNumber++;
}
dominos.draw();
}
class Dom {
float x = 100;
float y = height/2 - 22.5;
int fallenNumber = 0;
void draw() {
push();
stroke(255);
strokeWeight(10);
strokeCap(SQUARE);
for (int i=0; i<15; i++) {
if (i<fallenNumber){
line (x + i*30 + 45, y+40, x + i *30, y+50);
} else {
line (x + i*30, y, x + i *30, y+45);
}
}
pop();
}
}
I'm trying to create a program, wherein the ellipses revolve around the center screen and add a trailing pattern to it. I'm using ArrayList in processing to store the old vector then draw it, but it's not rendering. Or am I doing things wrong? The part where I wrote it is on the bottom part, thank you.
Particle[] part = new Particle[10];
int len = 10;
void setup(){
size(1000,1000,P2D);
//fullScreen();
for(int i = 0; i < len; i++){
part[i] = new Particle();
}
}
void draw(){
background(255);
for(int i = 0; i < len; i++){
part[i].show();
part[i].update();
part[i].trail();
}
}
class Particle{
float r,angle,d;
PVector pos = new PVector();
ArrayList<PVector> history = new ArrayList<PVector>();
Particle(){
angle = random(20,360);
r = random(20,300);
pos.x = width/2 + cos(angle) * r;
pos.y = height/2 + sin(angle) * r;
}
void show(){
stroke(0,0,255);
ellipse(pos.x,pos.y,5,5);
//line(x,y,width/2,height/2);
}
void update(){
pos.x = width/2 + cos(angle) * r;
pos.y = height/2 + sin(angle) * r;
angle += random(0.001,0.01);
}
void trail(){
history.add(pos);
if(history.size() > 50){
history.remove(0);
}
for(int i = 0; i < history.size(); i++){
PVector prev = history.get(i);
ellipse(prev.x,prev.y,5,5);
}
}
}
When you do
history.add(pos);
then you do not create a new PVector object. You just add a reference to the attribute pos to the array list history. When pos is changed, then still all elements of history refer to pos. There exist just one PVecor object for each Particle.
Create a copy of pos when you add it to history, to solve the issue:
history.add(pos.copy());
I need to create a loop which will space circles equally around a circle in Processing.
I know I can somehow implement a FOR loop.
I need to be able to increase or decrease the number of circles around this circle (with button presses) but keep them equally spaced.
I know the formula's I need to include in the FOR loop to get the X and Y axis. The formulas:
being
X = R*cos(angle-90)+Y0
Y = R*sin(angle-90)+X0
I understand the three parameters of the FOR loop; when does it start, when does it finish, what changes when it runs.
What I can't see is how to implement the formulas into the FOR loop.
Many thanks
Here is the code I do have
void setup () {
size (600, 600);
background (255, 255, 255);
smooth ();
ellipse (width/2, height/2, 200, 200); // the guide circle. Not needed in final code.
}
void draw() {
for (int i = 0; i < 20; i ++) {
for (int j = 0; j < 20; j ++) {
ellipse (i *20, j * 20, 20, 20);
}
}
}
This code should do the trick:
float incrementalAngle = 0.0;
void setup(){
size(600, 600);
smooth();
background(0);
ellipse(width/2, height/2, 200, 200);
drawCircles(20, 200);
}
void draw(){
}
void drawCircles(int circlesNumber, int bigCircleNumber){
float angle = incrementalAngle;
for(int i = 0; i < circlesNumber; i++){
ellipse(bigCircleNumber * cos(incrementalAngle) + height/2,
bigCircleNumber * sin(incrementalAngle) + width/2,
circlesNumber, circlesNumber);
incrementalAngle += TWO_PI / circlesNumber;
}
}
So the second loop wasn't needed, and the formula you were trying to introduce would go in the X and Y position of your ellipse, there by playing whit the angle and the cos and sin you can get the result you were looking for.
What's left now is for you to get the number of circles you want by the clicking inside a mousePressed() method and drawing that amount.
Hope this comes useful and call me if you need more help
Regards
Jose.
Thank you to everyone who helped.
I managed to do it (slightly differently to you #Jose Gonzalez
int nbr_circles = 2;
void setup() {
size(600, 600);
smooth();
background(255);
}
void draw() {
background(255);
float cx = width/2.0;
float cy = height/2.0;
fill(0);
//float x, y; //
for (int i = 0; i < nbr_circles; i++)
{
float angle = i * TWO_PI / nbr_circles;
float x = cx + 110.0 * cos(angle);
float y = cy + 110.0 * sin(angle);
ellipse(x, y, 20, 20);
}
}
void mousePressed() {
if (mouseButton == LEFT) {
if (nbr_circles < 20)
nbr_circles = nbr_circles + 1;
} else if (mouseButton == RIGHT) {
if (nbr_circles > 2)
nbr_circles = nbr_circles - 1;
}
}
I am trying to create a visualization where the nodes of my network change size in a loop as the visualization progresses (I have stripped out the interactions between the nodes for simplicity here). I have the array sizes that is looped over in the draw function with index j. I am not sure why the nodes are not changing size. Any insight into this problem would be appreciated.
int numBalls = 5;
Ball[] balls = new Ball[numBalls];
float[] sizes = {15,25,35,45,55,65};
void setup() {
size(800, 400);
int l = 0 ;
for (int i = 0; i < numBalls; i++) {
balls[i] = new Ball(random(width),random(height), random(30, 50), i, balls);
}
noStroke();
fill(255, 204);
}
void draw() {
background(0);
for (int j = 0; j < 6; j++){
for (int i = 0; i < numBalls; i++) {
print("\nNEW ID\n");
print(i);
print("\n");
print("Diameter in balls\n");
print(balls[i].diameter);
print("\n");
balls[i].diameter = sizes[j];
print("Diameter in balls after fix\n");
print(balls[i].diameter);
balls[i].display();
}
}
}
class Ball {
float x, y;
float diameter;
float mass;
float vx = 0;
float vy = 0;
int id;
Ball[] others;
Ball(float xin, float yin, float din, int idin, Ball[] oin) {
x = xin;
y = yin;
diameter = din;
mass = 50;
id = idin;
others = oin;
}
void display() {
textSize(32);
fill(0,255,0,255);
print("\nDiameter in display\n");
print(diameter);
print("\n");
ellipse(x, y, diameter, diameter);
print("\nDiameter in display\n");
print(diameter);
print("\n");
fill(255, 0, 0, 255);
text(id,x,y);
}
}
The thing is, in your draw() function you are running over the array of sizes with the first for-loop and assigning the value of that size to the balls. This way in each draw() you subsequently attach each size on each ball, and every time the size you attach overwrites the previous one... Remember, the window of Processing only refreshes after the draw() has finished! Instead of looping over all the sizes in each draw() you probably want a different size in each draw(). So a way to do that would be:
int numBalls = 5;
int sizeCounter = 0;
int everySoManyFramesChange = 3;
Ball[] balls = new Ball[numBalls];
float[] sizes = {
15, 25, 35, 45, 55, 65
};
void setup() {
size(800, 400);
int l = 0 ;
for (int i = 0; i < numBalls; i++) {
balls[i] = new Ball(random(width), random(height), random(30, 50), i, balls);
}
noStroke();
fill(255, 204);
}
void draw() {
background(0);
for (int i = 0; i < numBalls; i++) {
balls[i].diameter = sizes[sizeCounter];
balls[i].display();
}
if (frameCount%everySoManyFramesChange == 0) sizeCounter=(sizeCounter+1)%sizes.length;
}
class Ball {
float x, y;
float diameter;
float mass;
float vx = 0;
float vy = 0;
int id;
Ball[] others;
Ball(float xin, float yin, float din, int idin, Ball[] oin) {
x = xin;
y = yin;
diameter = din;
mass = 50;
id = idin;
others = oin;
}
void display() {
textSize(32);
fill(0, 255, 0, 255);
ellipse(x, y, diameter, diameter);
fill(255, 0, 0, 255);
text(id, x, y);
}
}
By the way I removed all those print statements because they are making the sketch horribly slow, but be my guest and re-introduce them!
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?