Category: processing / p5.js

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);
  }

}

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;
  
}

/*
*/

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;
}

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;
  }
}