[JAVA] Getting Started with Processing and p5.js (for those who have done other languages) 01

What is Processing?

Languages and IDEs that are good at interactive art and works and are often used for media art

Feature

――You can make works that move very easily --Good at prototypes ――It's so easy to build an environment

A very fun language, I fell into a programming swamp in this language. For example, what can be made (there is also a library called gifExport, but the behavior is strange, so I capture the screen)

The surrounding circle rotates as the mouse moves. It doesn't look pretty at all because of the frame rate shit.

Source code

The source code is simple like this. (It's dirty because the person who writes the code is shit) Write in draw what you want to repeat the event that occurs only once at the beginning in setup. It's java based so you can get used to it right away void setup() When void draw()

Global variables tend to increase due to the nature of the function being divided into.

kurukuru.pde

float[] x, y, pX, pY;
float[] distance;
float[] gapTheata;
color[] c;

final int n = 200;

void setup(){
  size(1000, 1000);
  background(255);
  colorMode(HSB);
  
  x = new float[n];
  y = new float[n];
  pX = new float[n];
  pY = new float[n];
  distance = new float[n];
  gapTheata = new float[n];
  c = new color[n];
  
  for(int i = 0; i < n; i++){
    x[i] = y[i] = pX[i] = pY[i] = 30;
    distance[i] = random(15, 150);
    gapTheata[i] = random(-PI, PI);
    c[i] = color(random(255), 255, 255, random(255));
  }
  
}

void draw(){
  background(255);
  noStroke();
  colorMode(HSB);
  
  for(int i = 0; i < n; i++){
    fill(c[i]);
    float theata = radians(frameCount*5.0) + gapTheata[i];
    float dist =distance[i] + 90.0*noise(theata/1.0, frameCount/100.0, i);
    x[i] = (mouseX + dist*cos(theata) + pX[i])/2.0;
    y[i] = (mouseY + dist*sin(theata) + pY[i])/2.0;
    pushMatrix();
    translate(x[i], y[i]);
    ellipse(0, 0, 20, 20);
    popMatrix();
    pX[i] = x[i]; pY[i] = y[i];
  }

  colorMode(RGB);
  fill(0);
  ellipse(mouseX, mouseY, 40, 40);
}

I will omit the detailed explanation.

Interesting things

• noise(w, x, y, z) --Returns a value between 0 and 1. --Anything other than w. ――I think it's okay to think that noise expressions like waves are added while maintaining continuity (random is discontinuous, noise is continuous). --If you give a fixed value, a fixed value will be returned. ――If you change the value at once, the value will be completely different from the previous frame.

• pushMatrix() popMatrix() --Save or restore the current coordinate state

• colorMode() --You can switch between HSB and RGB (I've never seen anything else in use). You can also give other arguments to change the upper limit of the value.

• color --A type that holds colors, you can use the colors declared in the above color mode. You can also add an alpha channel

• frameCount ――It will have the current number of frames. It can be used when you want to make something that changes continuously. You can also substitute for some reason.

I want to port to the web

Then when I wanted to port this to the web ** You can use p5.js **

Let's port this to the web. (In the next article)