Processing Classとanimation

int num = 500;
Point[] points = new Point[num];

void setup() {
  size(640, 360, P3D);
  pixelDensity(displayDensity());

  for (int i = 0; i < num; i++) {
    points[i] = new Point();
  }
}

void draw() {
  background(255);
  translate(width/2, height/2, 0);
  rotateY(frameCount * 0.01);

  for (int i = 0; i < num; i++) {
    points[i].update();
    points[i].display();
  }

  for (int i = 0; i < num; i++) {
    for (int j = i + 1; j < num; j++) {
      float d = dist(
        points[i].x, 
        points[i].y, 
        points[i].z, 
        points[j].x, 
        points[j].y, 
        points[j].z
        );
      if (d < 40) {
        stroke((int) map(d, 0, 40, 0, 255));
        strokeWeight(1);
        line(
          points[i].x, 
          points[i].y, 
          points[i].z, 
          points[j].x, 
          points[j].y, 
          points[j].z
          );
      }
    }
  }
}

Point.java

class Point {
  float x;
  float y;
  float z;
  float targetX;
  float targetY;
  float targetZ;
  float radius;
  
  Point() {
    setTarget();
    x = targetX;
    y = targetY;
    z = targetZ;
  }
  
  void update(){
    if (frameCount % 120 == 0){
      setTarget();
    }
    x += (targetX - x) * 0.05;
    y += (targetY - y) * 0.05;
    z += (targetZ - z) * 0.05;
  }
  
  void setTarget(){
    if (random(2) < 1){
      radius = 150;
    } else {
      radius = 75;
    }
    float phi = random(TWO_PI);
    float unitZ = random(-1, 1);
    targetX = radius * sqrt(1 - unitZ * unitZ) * cos(phi);
    targetY = radius * sqrt(1 - unitZ * unitZ) * sin(phi);
    targetZ = radius * unitZ;
  }
  
  void display() {
    stroke(0);
    strokeWeight(3);
    point(x, y, z);
  }

}

Processingで球体の描画

for文でdThetaを増やしながら、rotateYをframeCountで増やして回転させています。

float radius = 150;
float dPhiStep = 0;
float dPhiStepVelocity = 0.05;

void setup(){
  size(640, 360, P3D);
  pixelDensity(displayDensity());
}

void draw(){
  background(255);
  translate(width/2, height/2, 0);
  rotateY(frameCount * 0.02);
  
  float lastX = 0;
  float lastY = 0;
  float lastZ = 0;
  
  for(float dTheta = 0, dPhi = 0; dTheta <= 180; dTheta++, dPhi += dPhiStep){
    float theta = radians(dTheta);
    float phi = radians(dPhi);
    
    float x = radius * sin(theta) * cos(phi);
    float y = radius * sin(theta) * sin(phi);
    float z = radius * cos(theta);
    
    
    
    stroke(0);
    if (lastX != 0){
    strokeWeight(1);
    line(lastX, lastY, lastZ, x, y, z);
    }
    strokeWeight(8);
    point(x, y, z);
    
    lastX = x;
    lastY = y;
    lastZ = z;
  }
  dPhiStep += dPhiStepVelocity;
  
}

p5.js random()


ランダム関数で座標軸や円の半径を決めていきます。。

/*
*/

var x, y, r;

function setup(){
    createCanvas(480, 240);
    background(255, 0, 0, 10);
    noStroke();
    background('skyblue')

}

function draw(){
  x = random(width);
  y = random(height);
  if (random()> 0.9) {
    r = random (50, 60);
  } else {
    r = random(10, 30);
  }
  fill(255, 255, 255, random(30, 250));
  ellipse(x, y, r, r);
}

sin(),cos()

var angle = 0;
var r = 50;

function setup(){
    createCanvas(480, 240);
    noStroke();

      background('skyblue')

    slider = createSlider(0, 100, 30)
    slider.position(10, 20);

    button = createButton("clear!");
    button.position(10, 40);
    button.mousePressed(function(){
      background('skyblue');
    });
}

function draw(){
  r = slider.value();
  push();
  translate(width/2, height/2);
  x = sin(radians(angle)) * r;
  y = cos(radians(angle)) * r;
  ellipse(x, y, 10, 10);
  pop();
  angle += 2;
  r += 0.1;
}

p5.js


p5.jsはprocessingのJavaScriptです。CSSの表記をそのまま使用することもできます。

rectMode(coner),rectMode(coners),rectMode(center)などあります。

function setup(){
  createCanvas(480, 240);
    background(255, 0, 0, 10);

    rect(50, 50, 150, 100)
}

function draw(){

}

楕円 ellipse, point, arc, line

    var c = color('pink')
    fill(c);
    stroke(c);
    ellipse(width/2, height/2, 100, 100)
    text("hello world", 100, 100);

座標軸による操作

function setup(){
    createCanvas(480, 240);
    background(255, 0, 0, 10);
    noStroke();

    fill(255, 0, 0, 127);
    rect(0, 0, 100, 100);

    r = 30;
    push();
    translate(10, 10);
    rotate(radians(r));
    scale(1.2, 1.2)
    fill(0, 0, 255, 127);
    rect(0, 0, 100, 100);
    pop();
}

マウスの操作

function draw(){
   noStroke();
   background('skyblue');
   ellipse(mouseX, mouseY, 34, 34);
}

入力による動作

r = 50;

function setup(){
    createCanvas(480, 240);
    background(255, 0, 0, 10);
   

}

function draw(){
   noStroke();
   background('skyblue');

   if (keyIsPressed === true){
    fill('pink');
   } else {
    fill('white');
   }
   ellipse(mouseX,mouseY, r, r)

}

function keyTyped(){
  if (key === 'u'){
    r += 10;
  }
}

Processing


Processing is a flexible software sketchbook and a language for learning how to code within the context of the visual arts.

プロセッシングはjavaで、主にアーティスト・デザイナー向けです。
processing

size(200, 200);
smooth();
background(255);
rect(50, 50, 80, 30);

%e7%84%a1%e9%a1%8c

角丸

rect(50, 50, 80, 30, 10);

rectMode()

rectMode(CORNER);
rect(50, 50, 30, 30);
rectMode(RADIUS);
rect(50, 50, 30, 40);
fill(255, 0, 0, 127);
rect(50, 50, 30, 40);

枠線

stroke(#ff0000);
strokeWeight(3);
fill(127);
rect(50, 50, 100, 100);

円、線

stroke(#ff0000);
fill(#999999);

line(50, 50, 100, 100);
ellipse(50, 50, 80, 80);
arc(50, 50, 80, 80, 0, radians(180));

矢印

stroke(#ff0000);
fill(#999999);

beginShape();
vertex(100, 20);
vertex(120, 100);
vertex(100, 80);
vertex(80, 100);
endShape(CLOSE);

画像の表示

PImage img;
img = loadImage("a.jpg");
image(img,10, 10);

テキスト描画

PFont f;
f = createFont("Helvetica", 16, true);

textFont(f, 12);
fill(#ff0000);

text("hello world", 100, 100);

座標空間の変更

fill(#ff0000, 127);
noStroke();
rect(10, 10, 50, 50);

fill(#0000ff, 127);
noStroke();
pushMatrix();
translate(10, 10);
rect(10, 10, 50, 50);
popMatrix();

立体

size(200, 200, P3D);
smooth();
background(255);
lights();

pushMatrix();
translate(50, 50, 0);
rotateX(radians(30));
rotateY(radians(40));
rotateZ(radians(10));
box(40);
popMatrix();

setup()

void setup(){
  size(200, 200, P3D);
smooth();
background(255);

 noStroke();
 fill(#ff0000);
 
 frameRate(30);
}

int x = 0;
int y = 0;
void draw(){
  rect(x, y, 100, 100);
  x++;
  y++;
  println(frameCount);
}

マウス情報

int r = 100;
void draw(){
  ellipse(mouseX, mouseY, r, r);
}

ライブラリ
https://processing.org/reference/