My projects library #2! - CodeMasterX's gallery megathread

GALERY MEGATHREAD!

Hi! In the previous megathread I reached the max amount of edits. Therefore I started a new one. With the experience I gained from the previous thread, I implemented some changes!

Contents:

  • #20 Sierpiński triangle
  • #21 Vector sum program
  • #22 Chess grid
  • #23 Spiral of theodorus
  • #24 Overlapping rectangles
  • #25 Lerp picture
  • #26 Square spiral
  • #27 Rectangle - Circle interception
  • #28 Micro spirograph
  • #29 Triangle fractal
  • #30 Sin wave sum

Instructions:

  • whenever you want to reference a post, use the #[number] of the post. For example, if you want to reference the “Sibstinski triangle” post, use #20; [comment]. If you want to reference several, just use #20,#21,#22,…

All code will be available in the

Code

Hello!

tag.
If a project is short / I have the patience to do so, I’ll add several sub sections, where I will add things like explained code, shortened code, efficient code,…

If you to suggest a project, use [idea] in the post. So, for example, (text) [idea]: “create tetris!”

link to the previous thread (project library #1)

#20 Sierpiński triangle Java mode

Logic

Create a triangle, and when a function is called, split it into 3 around it. Repeat until satisfied.

Instructions

A triangle is created and when you want to create the next iteration, just press any key. If you press space key, you will erase it all, but the first, effectively restarting the program.

Code
My first attempt
int iter = 0, cx = 300, cy = 350, n=3, r=100;
float off = PI/2/n*(ceil(n/2)), m = 0.5;
ArrayList<t> ts = new ArrayList<t>();
void setup() {
  size(600, 600);
  ts.add(new t(0, cx, cy, r));
}
void draw() {
  background(0);
  stroke(255);
  for (int i = 0; i < ts.size(); i++) {
    ts.get(i).display();
  }
}
class t {
  float x, y, r;
  int it;
  t(int it_, float x_, float y_, float r_) {
    it = it_;
    x = x_;
    y = y_;
    r = r_;
  }
  void display() {
    for (int i = 0; i < n; i++) {
      float a = TWO_PI/n;
      line(cos(a*i-off)*r+x, sin(a*i-off)*r+y, cos(a*(i+1)-off)*r+x, sin(a*(i+1)-off)*r+y);
    }
  }
  void splitT() {
    for (int i = 0; i < n; i++) {
      float a = TWO_PI/n;
      ts.add(new t(it+1, x+cos(a*i+off)*r, y+sin(a*i+off)*r, r*m));
    }
  }
}
void keyPressed() { 
  if (key != ' ') { 
    splitShapes(); 
    iter++;
  } else { 
    iter = 0;
    ts.clear(); 
    ts.add(new t(0, cx, cy, r));
  }
}

void splitShapes() {
  for (int i = 0, s = ts.size(); i < s; i++) {
    if (ts.get(i).it == iter) ts.get(i).splitT();
  }
}

Shortened
float iter = 0, cx = 300, cy = 350, n=3, r=100, off = PI/2/n*(ceil(n/2)), m = 0.5, a = TWO_PI/n;
ArrayList<t> ts = new ArrayList<t>();
void setup() {
  size(600, 600);
  ts.add(new t(0, cx, cy, r));
}
void draw() {
  background(0);
  stroke(255);
  for (int i = 0; i < ts.size(); i++) ts.get(i).display();
}
class t {
  float x, y, r;
  int it;
  t(int it_, float x_, float y_, float r_) {
    it = it_;
    x = x_;
    y = y_;
    r = r_;
  }
  void display() {
    for (int i = 0; i < n; i++) line(cos(a*i-off)*r+x, sin(a*i-off)*r+y, cos(a*(i+1)-off)*r+x, sin(a*(i+1)-off)*r+y);
  }
  void splitT() {
    for (int i = 0; i < n; i++) ts.add(new t(it+1, x+cos(a*i+off)*r, y+sin(a*i+off)*r, r*m));
  }
}
void keyPressed() { 
  if (key != ' ') splitShapes();
  else { 
    iter = 0;
    ts.clear(); 
    ts.add(new t(0, cx, cy, r));
  }
}

void splitShapes() {
  iter++;
  for (int i = 0, s = ts.size(); i < s; i++) if (ts.get(i).it == iter) ts.get(i).splitT();
}

Explained
int iter = 0, cx = 300, cy = 350, n=3, r=100; //iter is used to not repeat the previous actions, n is just a constant for 3, r is the radius
float off = PI/2/n*(ceil(n/2)), m = 0.5; //off is to offset the rotation, m is to decrease the size of triangles
ArrayList<t> ts = new ArrayList<t>(); //array of triangles
void setup() {
  size(600, 600);
  ts.add(new t(0, cx, cy, r)); //adding the original triangle
}
void draw() {
  background(0);
  stroke(255);
  for (int i = 0; i < ts.size(); i++) {
    ts.get(i).display(); //displaying all of the triangles
  }
}
class t { //class t, stands for triangle
  float x, y, r; //center of the triangle, with size r
  int it; //iteration of the triangle
  t(int it_, float x_, float y_, float r_) {
    it = it_;
    x = x_;
    y = y_;
    r = r_;
  }
  void display() { //function which is called in draw, which displays the triangles
    for (int i = 0; i < n; i++) {
      float a = TWO_PI/n;
      line(cos(a*i-off)*r+x, sin(a*i-off)*r+y, cos(a*(i+1)-off)*r+x, sin(a*(i+1)-off)*r+y);
    }
  }
  void splitT() { //splitting the triangle in 3
    for (int i = 0; i < n; i++) {
      float a = TWO_PI/n;
      ts.add(new t(it+1, x+cos(a*i+off)*r, y+sin(a*i+off)*r, r*m));
    }
  }
}
void keyPressed() { 
  if (key != ' ') { //if key != space, it will split the triangles
    splitShapes(); 
    iter++;
  } else {  //clears the triangles and adds the original one
    iter = 0;
    ts.clear(); 
    ts.add(new t(0, cx, cy, r));
  }
}

void splitShapes() { //loops splitT function
  for (int i = 0, s = ts.size(); i < s; i++) {
    if (ts.get(i).it == iter) ts.get(i).splitT();
  }
}

1 Like

#21 Vector sum program Java mode


image

Code
Original + Example
void setup() {} void draw() {
  PVector a = new PVector(1,2), b = new PVector(-1,-2,3), c = new PVector(1,2,-3);
  PVector abc[] = {a, b, c };
  println(vectorSum(a,b,c),vectorSum(abc),vectorSum(vectorSum(abc),a,b,c) );
  
  noLoop();
}


PVector vectorSum(PVector... pv) {
  PVector sum = new PVector(0,0,0);
  for(int i = 0; i < pv.length; i++) sum.add(pv[i]);
  return (sum );
}
Shortened + Example
void setup() {} void draw() {
  PVector a = new PVector(1,2), b = new PVector(-1,-2,3), c = new PVector(1,2,-3);
  PVector abc[] = {a, b, c };
  println(vectorSum(a,b,c),vectorSum(abc),vectorSum(vectorSum(abc),a,b,c) ); 
  noLoop();
}
PVector vectorSum(PVector... pv) {
  PVector sum = new PVector(0,0,0);
  for(int i = 0; i < pv.length; i++) sum.add(pv[i]);
  return (sum );
}
Funcion
PVector vectorSum(PVector... pv) {
  PVector sum = new PVector(0,0,0);
  for(int i = 0; i < pv.length; i++) sum.add(pv[i]);
  return (sum );
}

#22 Chess grid Java mode

Code
original
int w = 8, h = 8, scl = 100;
PImage source;
ArrayList<PImage> sprites = new ArrayList<PImage>();
int grid[][] = new int[w][h];
void setup() {
  size(800, 800);
  loadImg();
}
void loadImg() {
  imageMode(3);
  source = loadImage("chessPieces2.png");
  float m = 1.333, scl = 130*m, xoff = 10*m, yoff = 10*m, xbuffer=20*m, ybuffer=20*m;
  for (int j = 0; j < 2; j++) for (int i = 0; i < 6; i++) sprites.add(source.get(floor(xoff+i*scl+(i*xbuffer)), floor(yoff+j*scl+(j*ybuffer)), floor(scl), floor(scl)));
  for (int i = 0; i < sprites.size(); i++) {
    sprites.set(i, shrink(sprites.get(i), 0.5, 0.5));
  }
  /*displaying images*/ // for (int i = 0; i < 6; i++) for (int j = 0; j < 2; j++) image(sprites.get(i+j*6), floor(xoff+i*scl+(i*xbuffer)), floor(yoff+j*scl+(j*ybuffer)));
}
PImage shrink(PImage input, float sx, float sy) {
  input.resize(floor(input.width*sx), floor(input.height*sy));
  return( input );
}
void displayGrid() {
  for (int i = 0; i < w; i++) for (int j = 0; j < h; j++) {
    if (grid[i][j] > 0) image(sprites.get(grid[i][j]), (i+0.5)*scl, (j+0.5)*scl);
    if (grid[i][j] < 0) image(sprites.get(-grid[i][j]+5), (i+0.5)*scl, (j+0.5)*scl);
  }
}
void draw() {
  background(0);
  noStroke();
  background(#50c878);//#d5fcad);
  for (int j = 0; j < h; j++) for (int i = j % 2; i < w; i+=2) rect(i*scl, j*scl, scl, scl);
  image(sprites.get((int)random(sprites.size())), mouseX, mouseY);
  displayGrid();
}
short
int w = 8, h = 8, scl = 100;
PImage source;
ArrayList<PImage> sprites = new ArrayList<PImage>();
int grid[][] = new int[w][h];
void setup() {
  size(800, 800);
  loadImg();
}
void loadImg() {
  imageMode(3);
  source = loadImage("chessPieces2.png");
  float m = 1.333, scl = 130*m, xoff = 10*m, yoff = 10*m, xbuffer=20*m, ybuffer=20*m;
  for (int j = 0; j < 2; j++) for (int i = 0; i < 6; i++) sprites.add(source.get(floor(xoff+i*scl+(i*xbuffer)), floor(yoff+j*scl+(j*ybuffer)), floor(scl), floor(scl)));
  for (int i = 0; i < sprites.size(); i++) sprites.set(i, shrink(sprites.get(i), 0.5, 0.5));
}
PImage shrink(PImage input, float sx, float sy) {
  input.resize(floor(input.width*sx), floor(input.height*sy));
  return( input );
}
void displayGrid() {
  for (int i = 0; i < w; i++) for (int j = 0; j < h; j++) {
    if (grid[i][j] > 0) image(sprites.get(grid[i][j]), (i+0.5)*scl, (j+0.5)*scl);
    if (grid[i][j] < 0) image(sprites.get(-grid[i][j]+5), (i+0.5)*scl, (j+0.5)*scl);
  }
}
void draw() {
  background(0);
  noStroke();
  background(#50c878);//#d5fcad);
  for (int j = 0; j < h; j++) for (int i = j % 2; i < w; i+=2) rect(i*scl, j*scl, scl, scl);
  image(sprites.get((int)random(sprites.size())), mouseX, mouseY);
  displayGrid();
}
explained
int w = 8, h = 8, scl = 100;
PImage source;
ArrayList<PImage> sprites = new ArrayList<PImage>();
int grid[][] = new int[w][h];
void setup() {
  size(800, 800);
  loadImg(); //loading and splicing images
}
void loadImg() {
  imageMode(3);
  source = loadImage("chessPieces2.png"); //loading from data folder
  float m = 1.333, scl = 130*m, xoff = 10*m, yoff = 10*m, xbuffer=20*m, ybuffer=20*m; //setting variables to fit the image
  for (int j = 0; j < 2; j++) for (int i = 0; i < 6; i++) sprites.add(source.get(floor(xoff+i*scl+(i*xbuffer)), floor(yoff+j*scl+(j*ybuffer)), floor(scl), floor(scl)));
  for (int i = 0; i < sprites.size(); i++) sprites.set(i, shrink(sprites.get(i), 0.5, 0.5)); //shrinking images to half the size
}
PImage shrink(PImage input, float sx, float sy) { //resizing
  input.resize(floor(input.width*sx), floor(input.height*sy));
  return( input );
}
void displayGrid() { //displaying the grid
  noStroke();
  background(#50c878);//#d5fcad);
  for (int j = 0; j < h; j++) for (int i = j % 2; i < w; i+=2) rect(i*scl, j*scl, scl, scl); //drawing the grid []  []  []  []
  for (int i = 0; i < w; i++) for (int j = 0; j < h; j++) {
    if (grid[i][j] > 0) image(sprites.get(grid[i][j]), (i+0.5)*scl, (j+0.5)*scl);
    if (grid[i][j] < 0) image(sprites.get(-grid[i][j]+5), (i+0.5)*scl, (j+0.5)*scl);
  }
}
void draw() {
  background(0);
  displayGrid();
  image(sprites.get((int)random(sprites.size())), mouseX, mouseY);
}

Info

chessPieces2.png:

I am still fixing some bugs but the sprites are there : P

NEWER VERSION!! WITHOUT BUGS!

Code
int w = 8, h =8, scl = 100, sScl = 173, v = 0, sel = -1;
boolean creative = true;
PImage source;
ArrayList<PImage> sprites = new ArrayList<PImage>();
int grid[][] = new int[w][h];
String board = "11,12,0,0,0,0,6,5,10,12,0,0,0,0,6,4,9,12,0,0,0,0,6,3,8,12,0,0,0,0,6,2,7,12,0,0,0,0,6,1,9,12,0,0,0,0,6,3,10,12,0,0,0,0,6,4,11,12,0,0,0,0,6,5";

void setup() {
  loadBoard(board);
  loadImages();
  imageMode(3);
  size(800, 800);
}

void draw() {
  noStroke();
  displayGrid();
}
void displayGrid() {
  background(#50c878);
  fill(255);
  for (int j = 0; j < h; j++) for (int i = j % 2; i < w; i+=2) rect(i*scl, j*scl, scl, scl);
  if(!creative) fill(0, 0, 255);
  else noFill();
  if (!creative && sel != -1) rect((sel % w)*scl, floor(sel/w)*scl,scl,scl);
  for (int i = 0; i < w; i++) for (int j = 0; j < h; j++) if (grid[i][j] != 0) image(sprites.get(grid[i][j]-1), (i+0.5)*scl, (j+0.5)*scl);
  if (creative) image(sprites.get(v), mouseX, mouseY);
}

String saveBoard() {
  String output = "";
  for (int i = 0; i < w; i++) for (int j = 0; j < h; j++) output += grid[i][j]+((( (i == w-1 && j == h-1)? "" : ",")));
  return output;
}
void loadBoard(String input) {
  int info[] = int(split(input, ","));
  for (int i = 0; i < info.length; i++) {
    int y = i % w, x = floor(i/w);
    grid[x][y] = info[i];
  }
}
void mousePressed() {
  int mx = constrain(floor(map(mouseX, 0, w*scl, 0, w)), 0, w-1), my = constrain(floor(map(mouseY, 0, h*scl, 0, h)), 0, h-1);
  if (creative) grid[mx][my] = ((((mouseButton == LEFT)? v+1 : 0)));
  else {
    if(grid[mx][my] == 0) sel = sel;
    else sel = mx+my*w;
  }
}
void mouseWheel(MouseEvent e) {
  v -= e.getCount();
  if (v > sprites.size()-1) v = 0;
  if (v < 0) v = sprites.size()-1;
}

void loadImages() {
  source = loadImage("sprites.png");
  for (int i = 0; i < 12; i++) {
    sprites.add(shrink(source.get(i*sScl, 0, sScl, sScl), 0.5));
  }
  for (int i = 0; i < sprites.size(); i++) {
    image(sprites.get(i), i*sScl, 0);
  }
}
PImage shrink(PImage input, float value) {
  input.resize(floor(input.width*value), floor(input.height*value));
  return(input);
}
void keyPressed() {
  if (key == ' ') println(saveBoard()+"\n");
  else if (key == 'c') {
    creative = !creative;
  }
}

image “sprites.png”

2 Likes

I made a similar Thread with my Sketches but I show them as videos:

1 Like

thank you for showing me that : D

I still have a lot of things to do in P2D before going to 3D.

I am trying to make chess, however I’ll probably wait until I get better after linking movement to sprites.

Don’t know what I was trying to say but yeah.

1 Like

#23 Spiral of theodorus Java mode

Reference image

image

Logic

Create a line, turn 90 degrees, move x pixels, draw a line to the center, turn 90 degrees, draw the line, and repeat

Code
int scl = 50, it = 16;
void setup() {
  size(600,600);
  stroke(255);
}
void draw() {
  background(0);
  if(mousePressed) it++;
  addPart(300,300,300+scl,300,it);
}
void addPart(float cx, float cy, float x, float y, int rep) {
  float dir = atan2(y-cy,x-cx) - PI/2, nx = x + cos(dir)*scl, ny = y + sin(dir)*scl;
  stroke(255);
  line(cx,cy,x,y);
  if(rep != 0) line(nx,ny,x,y);
  if(rep > 0) addPart(cx,cy,nx,ny,rep-1);
}
2 Likes

#24 Overlapping rectangles Java mode

Logic

create a rectangle with halfway points. One is at the center, the second is at the left top corner of the previous square

Code
ArrayList<lineRect> rects = new ArrayList<lineRect>();
void setup() {
  size(600, 600);
  drawRect(300, 300, 300,325,true);
  for(int i = 0; i < 20; i++) rects.get(rects.size()-1).dup();
}
void draw() {
  background(0);
  for (int i = 0, q = rects.size(); i < q; i++) rects.get(i).display();
  noLoop();
}
void nextIt() {
  rects.get(rects.size()-1).dup();
}
void mousePressed() { nextIt(); loop(); }
void drawRect(float x1, float y1, float x2, float y2, boolean save) {
  float r = dist(x1, y1, x2, y2);
  float dir = atan2(y2-y1, x2-x1);
  stroke(255);
  float lx = x1 + cos(dir+PI/2)*r/2, ly = y1 + sin(dir+PI/2)*r/2, rx = x1 + cos(dir-PI/2)*r/2, ry = y1 + sin(dir-PI/2)*r/2;
  float lx2 = x2 + cos(dir+PI/2)*r/2, ly2 = y2 + sin(dir+PI/2)*r/2, rx2 = x2 + cos(dir-PI/2)*r/2, ry2 = y2 + sin(dir-PI/2)*r/2;
  line(lx, ly, rx, ry);
  line(lx2, ly2, rx2, ry2);
  line(lx, ly, lx2, ly2);
  line(rx, ry, rx2, ry2);
  if (save) {
    rects.add(new lineRect(lx, ly, rx, ry, lx2, ly2, rx2, ry2));
  }
}
class lineRect {
  float x1, y1, x2, y2, x3, y3, x4, y4;
  lineRect(float x1_, float y1_, float x2_, float y2_, float x3_, float y3_, float x4_, float y4_) {
    x1 = x1_;
    y1 = y1_;
    x2 = x2_;
    y2 = y2_;
    x3 = x3_;
    y3 = y3_;
    x4 = x4_;
    y4 = y4_;
  }
  void display() {
    line(x1, y1, x2, y2);
    line(x3, y3, x4, y4);
    line(x1, y1, x3, y3);
    line(x2, y2, x4, y4);
  }
  void dup() {
    drawRect(300,300,x4,y4,true);
  }
}
1 Like

#25 Lerp picture Java mode




(the white bar at the bottom gives you the value from 0 to 1 (stretched to fit across the screen) which is used in lerpColor() function
Source image:
image

Code
Original
PImage img, grayScale;
float a = 0;
void setup() {
  println(275*3);
  size(825,190);
  img = loadImage("nature.jpg");
  grayScale = loadImage("nature.jpg");
  grayScale.filter(GRAY);
}
void draw() {
  background(0);
  image(img,0,0);
  image(grayScale,img.width*2,0);
  loadPixels();
  a = map(mouseX,0,width,0,1);
  for(int i = 0; i < width/3; i++) {
    for(int j = 0; j < height; j++) {
      color clr = lrp(img.get(i,j),grayScale.get(i,j),a);
      pixels[i+j*width+img.width] = clr;
      if(i == mouseX && j == mouseY) background(clr);
    }
  }
  updatePixels();
  //println(a);
  rect(0,183,width*a,7);
}
color lrp(color clr1, color clr2,float v) {
  float r = map(v,0,1,red(clr1),red(clr2));
  float g = map(v,0,1,green(clr1),green(clr2));
  float b = map(v,0,1,blue(clr1),blue(clr2));
  //println(red(clr1),green(clr1),blue(clr1),red(clr2),green(clr2),blue(clr2),r,g,b);
  return(color(r,g,b));
}
Function
PImage lerpImg(PImage img1, PImage img2,float v) {
  PGraphics newImg = createGraphics(img1.width,img1.height);
  newImg.beginDraw();
  for(int i = 0; i < img1.width; i++) for(int j = 0; j < img1.height; j++) newImg.set(i,j,lerpColor(img1.get(i,j),img2.get(i,j),v));
  newImg.endDraw();
  return(newImg);
}
2 Likes

#26 Square spiral Java mode

Logic

Create a square, create a new square inside of it and multiplying the side of it by m and turning by x radians. It results

Code
float r = 600, d = 0, turn = 0.1, m = 0.9;
void setup() { 
  size(600, 600);
  background(0);
  stroke(255);
  display(300,300,r,m,d,turn,50);
}
void draw() {
}
void display(float x, float y, float r, float m, float d, float trn, int rep) {
  for (int i = 0; i < rep; i++) {
    for (int j = 0; j < 4; j++) {
      float px = x+cos(d+trn*i+j*TWO_PI/4)*r*pow(m, i), py = y+sin(d+trn*i+j*TWO_PI/4)*r*pow(m, i);
      float ppx = x+cos(d+trn*(i)+(j+1)*TWO_PI/4)*r*pow(m, i), ppy = y+sin(d+trn*(i)+(j+1)*TWO_PI/4)*r*pow(m, i);
      line(px, py, ppx, ppy);
    }
  }
}

Puts me in mint of a Nautilus sketch I created in JRubyArt:-

A = 0.8  # pitch constant
B = 1.4 # radius constant
def settings
  size 360, 300
end

def setup
  sketch_title 'Approximate Nautilus'
  translate 230, 120 # offset x and y from origin
  rotate QUARTER_PI + HALF_PI # initial rotation
  smooth
  background 0
  stroke_weight 1
  stroke 255
  (8..40).each do |z| # draw the radial lines first (it looks nicer)
    line(get_x(z * A), get_y(z * A), get_x((z - 8) * A), get_y((z - 8) * A))
  end
  no_fill
  begin_shape # begin spiral 'shell' shape
  stroke_weight 4
  stroke 255, 0, 0
  42.times do |i|
    curve_vertex(get_x(i * A), get_y(i * A))
  end
  end_shape
  save_frame(data_path('nautilus.png'))
end

def get_x(theta)
  A * cos(theta) * exp((theta / tan(B)))
end

def get_y(theta)
  A * sin(theta) * exp((theta / tan(B)))
end

nautilus

2 Likes

Interesting. It looks far more organic. Altho it is natural since Spiral of theodorus is only used to get the square root of a number through geometry.

I created the original in vanilla processing, in 2009, or possibly earlier for a book on processing (for the Open University), that only ever got self published. At that time I was also exploring Context Free Art and MtnViewMark showed me how to create curved divider lines. I’ve not pursued it in processing, but it looked even more natural.

#27 Rectangle - Circle interception Java mode
(source: Collision Detection)
I made it into a short function. Feel free to use it! I will be using it for Arkanoid game)

Code

ONLY AVAILABLE FOR rectMode(CENTER). Otherwise it won’t work.
(using calculations based on centered rectangle. If you can’t figure it out yourself and really need it, I can make a rectMode(CORNER) version.)

Original
int w = 200, h = 300, x = 300, y = 300, r = 25;

void setup() {
  size(600,600);
  rectMode(CENTER);
}
void draw() {
  background(0);
  fill( ((overlap(x,y,w,h,mouseX,mouseY,r))? color(0,0,255) : color(255,0,0))  );
  rect(x,y,w,h);
  fill(255);
  circle(mouseX,mouseY,r*2);
}

boolean overlap(float x, float y, float w, float h, float x2, float y2, float r) {
  //if(x2 > x - w/2 && x2 < x + w/2 && y2 > y - h/2 && y2 < y + h/2 || dist(x - w/2, y - h/2, x2,y2) < r || dist(x + w/2, y - h/2, x2,y2) < r || dist(x - w/2, y + h/2, x2,y2) < r || dist(x + w/2, y + h/2, x2,y2) < r)  return true;
  //if(y2 > y - h/2 && y2 < y + h/2 && x - w/2 - r < x2 && x + w/2 + r > x2) return true;
  //if(x2 > x - w/2 && x2 < x + w/2 && y - h/2 - r < y2 && y + h/2 + r > y2) return true;
  return (x2 > x - w/2 && x2 < x + w/2 && y2 > y - h/2 && y2 < y + h/2 || dist(x - w/2, y - h/2, x2,y2) < r || dist(x + w/2, y - h/2, x2,y2) < r || dist(x - w/2, y + h/2, x2,y2) < r || dist(x + w/2, y + h/2, x2,y2) < r || y2 > y - h/2 && y2 < y + h/2 && x - w/2 - r < x2 && x + w/2 + r > x2 ||x2 > x - w/2 && x2 < x + w/2 && y - h/2 - r < y2 && y + h/2 + r > y2);
}
Function only
boolean overlap(float x, float y, float w, float h, float x2, float y2, float r) {
  return (x2 > x - w/2 && x2 < x + w/2 && y2 > y - h/2 && y2 < y + h/2 || dist(x - w/2, y - h/2, x2,y2) < r || dist(x + w/2, y - h/2, x2,y2) < r || dist(x - w/2, y + h/2, x2,y2) < r || dist(x + w/2, y + h/2, x2,y2) < r || y2 > y - h/2 && y2 < y + h/2 && x - w/2 - r < x2 && x + w/2 + r > x2 ||x2 > x - w/2 && x2 < x + w/2 && y - h/2 - r < y2 && y + h/2 + r > y2);
}
1 Like

#28 Micro spirograph Java mode
(based on CodeGuppy Playground)

Code
Original
ArrayList<PVector> arm = new ArrayList<PVector>(); //PVector(angle,speed,len);
ArrayList<PVector> pos = new ArrayList<PVector>();
int maxPoints = 650;
//1,   5,  -10 (speed)
//100, 50, 100 (length)
float m = 0.01;
void addArm(PVector... arms) {
  for (int i = 0; i < arms.length; i++) arm.add(arms[i]);
}
void setup() {
  size(600, 600);
  addArm(new PVector[]{new PVector(0, 1, 100), new PVector(0, 5, 50), new PVector(0, -10, 100)});
}
void draw() {
  background(0);
  stroke(255);
  noFill();
  translate(width/2, height/2);
  float x = 0, y = 0;
  //updating the arms
  for (int i = 0; i < arm.size(); i++) {
    float nx = x + cos(arm.get(i).x)*arm.get(i).z;
    float ny = y + sin(arm.get(i).x)*arm.get(i).z;
    line(x, y, nx, ny);
    circle(nx, ny, 5);
    x = nx;
    y = ny;
    arm.get(i).x+=arm.get(i).y*m;
  }
  //adding trail
  pos.add(new PVector(x, y));
  if (pos.size() > maxPoints && maxPoints != -1) pos.remove(0);
  //drawing trail
  beginShape();
  for (int i = 0; i < pos.size(); i++) {
    vertex(pos.get(i).x, pos.get(i).y);
  }
  endShape();
}

Shorter
ArrayList<PVector> arm = new ArrayList<PVector>(), pos = new ArrayList<PVector>();
float m = 0.01, maxPoints = 650, cx = 300, cy = 300;
void addArm(PVector... arms) {
  for (int i = 0; i < arms.length; i++) arm.add(arms[i]);
}
void setup() {
  size(600, 600);
  addArm(new PVector[]{new PVector(0, 1, 100), new PVector(0, 5, 50), new PVector(0, -10, 100)});
  stroke(255);
  noFill();
}
void draw() {
  background(0);
  float x = cx, y = cy;
  for (int i = 0; i < arm.size(); i++) {
    float nx = x + cos(arm.get(i).x)*arm.get(i).z,ny = y + sin(arm.get(i).x)*arm.get(i).z;
    line(x, y, nx, ny);
    circle(nx, ny, 5);
    x = nx;
    y = ny;
    arm.get(i).x+=arm.get(i).y*m;
  }
  pos.add(new PVector(x, y));
  if (pos.size() > maxPoints && maxPoints != -1) pos.remove(0);
  beginShape();
  for (int i = 0; i < pos.size(); i++) vertex(pos.get(i).x, pos.get(i).y);
  endShape();
}

#29 Triangle fractal Java mode


Koch curve

Code
Original
ArrayList<segment> seg = new ArrayList<segment>();
void setup() {
  size(600, 600);
  for (float i = 0, cx = 300, cy = 300, a = TWO_PI/3, a2 = a/4, r2 = 200; i < 3; i++) addSeg(cx+cos(a*i+a2)*r2, cy+sin(a*i+a2)*r2, cx+cos(a*(i+1)+a2)*r2, cy+sin(a*(i+1)+a2)*r2);
}
void draw() {
  background(0);
  for(int i = 0; i < seg.size(); i++) seg.get(i).display();
}
void keyPressed() {
  if (key == ' ') for (int i = 0, mm = seg.size(); i < mm; i++) seg.get(i).it();
}
void addSeg(float x1, float y1, float x2, float y2) {
  float dir = atan2(y2-y1, x2-x1), r = dist(x1, y1, x2, y2);
  seg.add(new segment(x1, y1, dir, r));
}
class segment {
  float x1, y1, dir, r;
  segment(float x1_, float y1_, float dir_, float r_) {
    for (int i = 0; i < 1; i++, x1 = x1_, y1 = y1_, dir = dir_, r = r_);
  }
  void display() {
    stroke(255, 50);
    line(x1, y1, x1 + cos(dir)*r, y1 + sin(dir)*r);
  }
  void it() {
    float bx = x1 + cos(dir)*r/3, by = y1 + sin(dir)*r/3, bdir = dir - PI/3, br = r/3, bx2 = bx + cos(bdir)*br, by2 = by + sin(bdir)*br;
    seg.add(new segment(bx, by, bdir, br));
    seg.add(new segment(bx2, by2, dir+PI/3, br));
    seg.add(new segment(x1 + cos(dir)*r/3*2, y1 + sin(dir)*r/3*2, dir, r/3));
    r = r/3;
  }
}

Explained
ArrayList<segment> seg = new ArrayList<segment>(); //array of segments (lines)
void setup() {
  size(600, 600);
  //creating the 3 starting segments (triangle)
  for (float i = 0, cx = 300, cy = 300, a = TWO_PI/3, a2 = a/4, r2 = 200; i < 3; i++) addSeg(cx+cos(a*i+a2)*r2, cy+sin(a*i+a2)*r2, cx+cos(a*(i+1)+a2)*r2, cy+sin(a*(i+1)+a2)*r2);
}
void draw() {
  background(0);
  //displaying the segments
  for(int i = 0; i < seg.size(); i++) seg.get(i).display();
}
void keyPressed() {
  //if key == space => trigger .it() method of all current segments (using mm to prevent infinite duplication) 
  if (key == ' ') for (int i = 0, mm = seg.size(); i < mm; i++) seg.get(i).it();
}
void addSeg(float x1, float y1, float x2, float y2) { //transforming x1,y1,x2,y2 format into x1,y1,dir,r
  float dir = atan2(y2-y1, x2-x1), r = dist(x1, y1, x2, y2);
  seg.add(new segment(x1, y1, dir, r));
}
class segment {
  float x1, y1, dir, r;
  segment(float x1_, float y1_, float dir_, float r_) {
    for (int i = 0; i < 1; i++, x1 = x1_, y1 = y1_, dir = dir_, r = r_); //using for-loop trick to save on the lines of setting varraibles
  }
  void display() {
    stroke(255, 50);
    line(x1, y1, x1 + cos(dir)*r, y1 + sin(dir)*r); //displaying the line in the format x,y,dir,r
  }
  void it() {
    //calculating the next segment varriables
    float bx = x1 + cos(dir)*r/3, by = y1 + sin(dir)*r/3, bdir = dir - PI/3, br = r/3, bx2 = bx + cos(bdir)*br, by2 = by + sin(bdir)*br;
    seg.add(new segment(bx, by, bdir, br));
    seg.add(new segment(bx2, by2, dir+PI/3, br));
    seg.add(new segment(x1 + cos(dir)*r/3*2, y1 + sin(dir)*r/3*2, dir, r/3));
    r = r/3;
  }
}

#30 Sin wave sum Java mode


this is just a beta version. In the near future I plan to add a way to create infinite waves (these are hardcoded). So yea, keep an eye out if you are interested.

(btw, the sin waves move and the purple wave changes with time)

Code
float m = 50, m1 = 50, m2 = 25;
float globalOffset = 0;
void setup() {
  size(600,600);
}
void draw() {
  background(0);
  translate(0,height/2);
  noFill();
  stroke(255,0,0,50);
  strokeWeight(3);
  beginShape();
  for(float i = 0; i < width; i++) vertex(i,sin(i/m1+globalOffset)*m);
  endShape();
  stroke(0,0,255,50);
  beginShape();
  for(float i = 0; i < width; i++) vertex(i,sin(i/m2+globalOffset)*m);
  endShape();
  stroke(255,0,255);
  beginShape();
  for(float i = 0; i < width; i++) vertex(i,getAvg(sin(i/m1+globalOffset)*m,sin(i/m2+globalOffset)*m));
  endShape();
  globalOffset += 0.01;
}
float getAvg(float... v) {
  float sum = 0;
  for(int i = 0; i < v.length; i++) sum+=v[i];
  return sum/v.length;
}

here is version 2; It took way less time than expected

V2
float globalM = 50;
ArrayList<wave> waves = new ArrayList<wave>();
void setup() {
  size(600,600);
  //wave(float localM_, float mm_, float offSet_, color clr_, float cy_, float speed_)
  waves.add(new wave(50,1,0,color(255,0,0,50),300,0.01));
  waves.add(new wave(25,1,0,color(0,0,255,50),300,0.005));
  waves.add(new wave(100,0.3,0.5,color(0,255,0,50),300,0.001));
}
void draw() {
  background(0);
  for(int i = 0; i < waves.size(); i++) waves.get(i).update(); //moving the waves
  for(int i = 0; i < waves.size(); i++) waves.get(i).display();
  displaySum(color(255,0,255),200,1,0,1);
}
void displaySum(color clr, float cy, float mm, int... id) {
  stroke(clr);
  strokeWeight(3);
  noFill();
  beginShape();
  for(int i = 0; i < width; i++) {
    float sum = 0, it = 0;
    for(int j = 0; j < id.length; j++) {
      sum += waves.get(id[j]).getValue(i);
      it++;
    }
    float avg = sum/it;
    vertex(i,avg*mm+cy);
  }
  endShape();
}
float getAvg(float... v) {
  float sum = 0;
  for(int i = 0; i < v.length; i++) sum+= v[i];
  return sum/v.length;
}
class wave {
  float localM, mm, offSet,cy,speed;
  color clr;
  wave(float localM_, float mm_, float offSet_, color clr_, float cy_, float speed_) {
    localM = localM_;
    mm = mm_;
    offSet = offSet_;
    clr = clr_;
    cy = cy_;
    speed = speed_;
  }
  void display() {
    noFill();
    stroke(clr);
    strokeWeight(3);
    beginShape();
    for(float i = 0; i < width; i++) {
      vertex(i,cy + sin(offSet + i/localM)*globalM*mm);
    }
    endShape();
  }
  void update() {
    offSet += speed;
    offSet = offSet % TWO_PI;
  }
  float getValue(float x) {
    return(sin(offSet + x/localM)*globalM*mm);
  }
}
1 Like

#31 Darts in higher dimensions Java mode
Numberphile video


Instructions:

  • on click, set the radius to the length of the blue line
  • red line is to show the current radius
  • press outside the circle to expand it.
Code
float cx = 300, cy = 300, r = 300;
float dir = 0, dst = 0,r2=0;
void setup() {
  size(600,600);
}
void draw() {
  background(0);
  noFill();
  dir = atan2(mouseY-cy,mouseX-cx);
  dst = dist(cx,cy,mouseX,mouseY);
  stroke(255,150);
  line(cx,cy,cx+cos(dir)*dst,cy+sin(dir)*dst);
  circle(cx,cy,r*2);
  r2 = sqrt(abs(r*r-dst*dst));
  stroke(0,0,255,150);
  line(mouseX-cos(dir+PI/2)*r2, mouseY-sin(dir+PI/2)*r2,mouseX,mouseY);
  stroke(255,0,0,150);
  line(mouseX,mouseY,mouseX+cos(dir+PI/2)*r, mouseY+sin(dir+PI/2)*r);
  text(r,20,20);
}
void mousePressed() {
  if(dst > r) {r = dst;}
  else {r = r2;}
}

#32 Elliptical pattern Java mode

Code
PGraphics bg;
float r = 500, r2m = 0.6, rm = 0.95;
float dir = 0, rot = PI*0.1;
void setup() {
  size(600,600);
  bg = createGraphics(width,height);
  bg.beginDraw();
  bg.background(0);
  bg.endDraw();
}
void draw() {
  background(0);
  bg.beginDraw();
  bg.stroke(255);
  bg.noFill();
  bg.push();
  bg.translate(width/2,height/2);
  bg.rotate(dir);
  bg.ellipse(0,0,r,r*r2m);
  bg.pop();
  bg.endDraw();
  background(bg);
  dir+=rot;
  r*=rm;
}

#33 Angular drawer Java mode

Features:

  • draw - left mouse button
  • int n - set the number of copies (examples have n = 12)
  • guide lines - toggle with middle mouse button
  • clear - right mouse button


Logic

Create a simple drawing program line(pmouseX,pmouseY,mouseX,mouseY), but turn it into cartesian coordinates. After it, create a similar thing for the n other lines and arrange them into a circle

Code
PGraphics bg;
int n = 12;
float cx = 300, cy = 300;
boolean displayLines = true;
void setup() { 
  size(600, 600);
  bg = createGraphics(width, height);
}
void draw() {
  background(0);
  stroke(255, 50);
  float rot = atan2(mouseY-cy, mouseX-cx), prot = atan2(pmouseY-cy, pmouseX-cx), a = TWO_PI/n, r=dist(cx, cy, mouseX, mouseY), pr=dist(cx, cy, pmouseX, pmouseY);
  bg.beginDraw();
  bg.stroke(255);
  if (mousePressed && mouseButton == LEFT) for (int i = 0; i < n; i++) bg.line(cx+cos(prot+a*i)*pr, cy+sin(prot+a*i)*pr, cx+cos(rot+a*i)*r, cy+sin(rot+a*i)*r);
  bg.endDraw();
  image(bg, 0, 0);
  if (displayLines) for (int i = 0; i < n; i++) line(cx, cy, cx+cos(rot+a*i)*r, cy+sin(rot+a*i)*r);
}
void mousePressed() { 
  if (mouseButton == RIGHT) bg.clear(); 
  if (mouseButton == CENTER) displayLines = !displayLines;
}

1 Like