[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)

kurukuru.gif

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






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)

Recommended Posts

Getting Started with Processing and p5.js (for those who have done other languages) 02
Getting Started with Processing and p5.js (for those who have done other languages) 01
For those who have done pip uninstall setuptools
For those who want to learn Excel VBA and get started with Python
5 Reasons Processing is Useful for Those Who Want to Get Started with Python
[For those who have mastered other programming languages] 10 points to catch up on Python points
Getting Started with Python for PHPer-Classes
Getting Started with Julia for Pythonista
Getting Started with Python for PHPer-Functions
Getting Started with Python for PHPer-Super Basics
Getting Started with Lisp for Pythonista: Supplement
Join Azure Using Go ~ For those who want to start and know Azure with Go ~
[Solved] I have a question for those who are familiar with Python mechanize.
Getting started with Python with 100 knocks on language processing
[Translation] Getting Started with Rust for Python Programmers
Settings for getting started with MongoDB in python
❤️ Bloggers ❤️ "Beloved BI" ❤️ Let's get started ❤️ (For those who can make charts with Python)
For those who are new to programming but have decided to analyze data with Python
For those who should have installed janome properly with Python but get an error
Getting Started with python3 # 2 Learn about types and variables
Getting Started with Google App Engine for Python & PHP
Getting Started with Tensorflow-About Linear Regression Hypothesis and Cost
For those who want to write Python with vim
For those who get Getting Key Error:'length_seconds' on pytube
Getting Started with Yocto Project with Raspberry Pi 4 and WSL2
Getting started with Android!
1.1 Getting Started with Python
Getting started with apache2
Getting Started with Golang 1
Getting Started with Python
Getting Started with Django 1
Getting Started with Optimization
Getting Started with Golang 3
Getting Started with Numpy
Getting started with Spark
Getting Started with Python
Getting Started with Pydantic
Getting Started with Golang 4
Getting Started with Jython
Getting Started with Django 2
For those who want to start machine learning with TensorFlow2
A modern environment building procedure for those who want to get started with Python right away