javascript 如何使一个积极的绘图草图哥斯拉射线，不留一丝的射线

lf3rwulv 于 2023-04-10 发布在 Java

关注(0)|答案(1)|浏览(96)

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
我想用鼠标控制哥斯拉的射线，烧毁城市进行绘画。然而，每次我试图做一个油漆标记，光束线的效果都留在画布上。
我如何使用喷枪效果进行绘制而不让光束线有痕迹？

JavaScript

来源：https://stackoverflow.com/questions/75969650/how-to-make-an-active-drawing-sketch-of-the-godzilla-ray-without-leaving-a-trac

1条答案

按热度按时间

anauzrmj1#

要在使用鼠标控制Godzilla的光线时使用喷枪效果进行绘制，您可以尝试使用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函数用于在用于喷涂图像的加法混合模式和用于绘制的圆的正常混合模式之间切换。（）函数首先将混合模式设置为ADD，在当前鼠标位置绘制喷雾图像，然后将混合模式设置回NORMAL。然后它循环通过绘图阵列中的每个点，并在该点周围10像素半径内的随机位置绘制随机色调的圆。
这将允许您在使用鼠标控制哥斯拉的光线时使用喷枪效果进行绘制，而不会在画布上留下光线的痕迹。

赞(0）回复(0）举报 2023-04-10

我来回答

javascript 如何使一个积极的绘图草图哥斯拉射线，不留一丝的射线

1条答案

相关问题

热门标签

最新问答