// Code! Programming with p5.js

// The Coding Train / Daniel Shiffman

// https://thecodingtrain.com/beginners/p5js/beginners/p5js/2.6-create-graphics.html

// https://youtu.be/TaluaAD9MKA

​

// Main Sketch: https://editor.p5js.org/codingtrain/sketches/7RN7GFD-Y

// Stars Sketch: https://editor.p5js.org/codingtrain/sketches/0kQ9v-bhM

​

// If you find "let" confusing, you can learn more in this video: https://www.youtu.be/q8SHaDQdul0

​

let x = 200;

let y = 200;

let extraCanvas;

​

function setup() {

  createCanvas(400, 400);

  //创建虚拟canvas

  extraCanvas = createGraphics(400, 400);

  extraCanvas.clear();

  background(0);

}

​

function draw() {

  // No trails!

  background(0);

  x += random(-5, 5);

  y += random(-5, 5);

  // trails

  if (mouseIsPressed) {

    extraCanvas.fill(255, 150);

    extraCanvas.noStroke();

    extraCanvas.ellipse(mouseX, mouseY, 60, 60);

  }

  image(extraCanvas, 0, 0);

    fill(255, 0, 0);

  stroke(255);

  rectMode(CENTER);

  rect(x, y, 20, 20);

​

}