Jitterクラスを作成し、オブジェクトをインスタンス化して、画面内を移動させます。Casey ReasとBen Fryによる「Getting Started with Processing」からの翻案。
class object instantiation
Objects Class
View Source Code
/*
* @name Objects
* @arialabel Small white circle on dark navy background that moves in small amounts in various directions by a small amount by itself like it is jittering
* @description Create a Jitter class, instantiate an object,
* and move it around the screen. Adapted from Getting Started with
* Processing by Casey Reas and Ben Fry.
*/
let bug; // Declare object
function setup() {
// createCanvas(710, 400);
createCanvas(windowWidth, windowHeight);
// Create object
bug = new Jitter();
}
function draw() {
background(50, 89, 100);
bug.move();
bug.display();
}
// Jitter class
class Jitter {
constructor() {
this.x = random(width);
this.y = random(height);
this.diameter = random(10, 30);
this.speed = 1;
}
move() {
this.x += random(-this.speed, this.speed);
this.y += random(-this.speed, this.speed);
}
display() {
ellipse(this.x, this.y, this.diameter, this.diameter);
}
}
License
Source code is available on GitHub p5.js website legacy.
All examples are licensed under CC BY-NC-SA 4.0.