如何在不留下射线痕迹的情况下制作哥斯拉射线的主动素描

Question

let drawing = [];
let city;


function preload() {

  city = loadImage("city.jpg");
}



function setup() {

  createCanvas(city.width, city.height);
}



function mouseDragged() {
  drawing.push({
  mouseX: mouseX,
  mouseY: mouseY,
  });
}



function draw() {

  colorMode(HSB);

  // clear previous frame
  background(city);


  if (mouseIsPressed) {

    // set line color to a range from light yellow to dark red
    // using HSB color mode with hue from 40 to 0 and saturation and brightness at 100
    stroke(random(0, 40), 100, 100);

    // draw line from top right corner to mouse y-5 and y+5
    line(width - 1, 0, mouseX, mouseY - 5);
    line(width - 1, 0, mouseX, mouseY + 5);

    line(width-1,0,mouseX+random(-5,5), mouseY+random(-5,5))

    // set fill color to random
    fill(random(0, 40), 100, 100);

    // generate a random position within a radius of 10 of the mouse position
    let x = mouseX + random(-20, 20);
    let y = mouseY + random(-20, 20);

    // draw a circle of radius 1 at the random position
    circle(x, y, 2);

  }
}

https://editor.p5js.org/106p01013/sketches/dgE9njGLj

我想用鼠标控制哥斯拉的射线，烧毁城市作画。 然而，每次我尝试制作油漆标记时，光线的效果都会留在画布中。

如何在不让光线留下痕迹的情况下使用喷枪效果进行绘画？

Answer 1

要在使用鼠标控制哥斯拉射线的同时绘制喷枪效果，您可以尝试使用 p5.js 中的 blendMode() 函数来调整绘图像素与背景图像之间的混合模式。这是应该完成此操作的代码的更新版本：

    let drawing = [];
let city;
let spray;

function preload() {
  city = loadImage("city.jpg");
  spray = loadImage("spray.png");
}

function setup() {
  createCanvas(city.width, city.height);
  background(city);
}

function mouseDragged() {
  drawing.push({
    mouseX: mouseX,
    mouseY: mouseY,
  });
}

function draw() {
  colorMode(HSB);

  // set blending mode to ADD
  blendMode(ADD);

  // draw the spray image at the mouse position
  image(spray, mouseX, mouseY, 50, 50);

  // set blending mode back to NORMAL
  blendMode(NORMAL);

  // loop through each point in the drawing array
  for (let i = 0; i < drawing.length; i++) {

    // get the current point
    let point = drawing[i];

    // set the fill color to a random hue
    fill(random(0, 40), 100, 100);

    // generate a random position within a radius of 10 of the point
    let x = point.mouseX + random(-10, 10);
    let y = point.mouseY + random(-10, 10);

    // draw a circle of radius 1 at the random position
    circle(x, y, 1);
  }
}

在这个版本的代码中，喷涂图像在preload()函数中加载，blendMode()函数用于在喷涂图像的附加混合模式和绘制圆圈的正常混合模式之间切换。 draw() 函数首先将混合模式设置为 ADD，在当前鼠标位置绘制喷射图像，然后将混合模式设置回 NORMAL。然后它循环遍历绘图数组中的每个点，并在该点周围 10 像素半径内的随机位置绘制一个随机色调的圆。

这应该允许您在使用鼠标控制哥斯拉的光线时使用喷枪效果进行绘画，而不会在画布上留下光线的痕迹。