How to make an drawing sketch of the Godzilla heat beam, without leaving a trace of the beam line?

p5.js Coding Questions
1 
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);

    // godzilla heat beam
    //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);
  }
}

I want to use the mouse to control Godzilla’s heat beam and burn down the city for painting. However, every time I try to make a paint mark, the effects of the beam line are left in the canvas.

How can I paint with airbrush effects without letting the beam line have a trace?

2

Hello @Gittoo,

Please format your code as a courtesy to the community:
https://discourse.processing.org/faq#format-your-code

Consider using createGraphics:

Painting circles and no beam:

image
image1315×434 91.9 KB

The updated pg.image() has a transparent background and draws over the city.

You will have to integrate the concepts with your code.

It is an off screen graphics buffer so you also need:

pg.colorMode(HSB, 360, 100, 100);

And have to show the image in draw():

image(pg, 0, 0);

I managed to achieve this:

image
image908×471 62.7 KB

It has nice beams but the screen grab did not capture it.

Start simple and build on that.

:)

3

Can you share your code link with me? I don’t understand it very well

4

No.

Please read:
https://discourse.processing.org/faq#homework

Please be more specific.

I suggest you work with CreateGraphics separately to understand that first.
I was able to integrate that into your code.

Post a minimal example only with questions if you have any.
I do not need to see your entire homework code.

Are you permitted to post your homework code here? I suggest you ask your instructors first.

:)

5

Yes, he allows me, and this isn’t even a homework, It’s a tag that I can only choose for a general question.
And I have no clue how your code works, and how it helps my problem.

6

Hello @Gittoo,

You want to paint some elements and animate others and this video discusses that:

A search for createGraphics may help find something that suits your needs.

:)

1 Like