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

**URL:** <https://discourse.processing.org/t/how-to-make-an-drawing-sketch-of-the-godzilla-heat-beam-without-leaving-a-trace-of-the-beam-line/41681>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [April 11, 2023, 9:03am UTC](https://discourse.processing.org/t/how-to-make-an-drawing-sketch-of-the-godzilla-heat-beam-without-leaving-a-trace-of-the-beam-line/41681 "2023-04-11T09:03:25Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Gittoo](https://avatars.discourse-cdn.com/v4/letter/g/c37758/32.png) [@Gittoo](https://discourse.processing.org/u/Gittoo)\
**Post date:** [April 11, 2023, 9:03am UTC](https://discourse.processing.org/t/how-to-make-an-drawing-sketch-of-the-godzilla-heat-beam-without-leaving-a-trace-of-the-beam-line/41681/1 "2023-04-11T09:03:25Z")

</div>

```auto
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);
  }
}

```

> **[p5.js Web Editor](https://editor.p5js.org/106p01013/sketches/dgE9njGLj)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

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?

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [April 11, 2023, 11:41am UTC](https://discourse.processing.org/t/how-to-make-an-drawing-sketch-of-the-godzilla-heat-beam-without-leaving-a-trace-of-the-beam-line/41681/2 "2023-04-11T11:41:56Z")

</div>

Hello @Gittoo,

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

Consider using _createGraphics_:

> **[reference | p5.js](https://p5js.org/reference/#/p5/createGraphics)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

Painting circles and no beam:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/d/b/dbfa772ce06e075853aae43f8df96ccee3a84102.jpeg)

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:

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

```

And have to show the image in _draw()_:

```auto
image(pg, 0, 0);

```

I managed to achieve this:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/d/f/dffe09aa8a339bc520ebd58ebd1ebd86caf9fa4e.jpeg)

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

Start simple and build on that.

`:)`

---

<div class="post-metadata">

**Author:** ![Gittoo](https://avatars.discourse-cdn.com/v4/letter/g/c37758/32.png) [@Gittoo](https://discourse.processing.org/u/Gittoo)\
**Post date:** [April 13, 2023, 6:26am UTC](https://discourse.processing.org/t/how-to-make-an-drawing-sketch-of-the-godzilla-heat-beam-without-leaving-a-trace-of-the-beam-line/41681/3 "2023-04-13T06:26:15Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [April 13, 2023, 12:33pm UTC](https://discourse.processing.org/t/how-to-make-an-drawing-sketch-of-the-godzilla-heat-beam-without-leaving-a-trace-of-the-beam-line/41681/4 "2023-04-13T12:33:50Z")

</div>

> [@Gittoo](#):
>
> Can you share your code link with me?

No.

Please read:  
[https://discourse.processing.org/faq#homework](https://discourse.processing.org/faq#homework)

> [@Gittoo](#):
>
> I don’t understand it very well

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.

`:)`

---

<div class="post-metadata">

**Author:** ![Gittoo](https://avatars.discourse-cdn.com/v4/letter/g/c37758/32.png) [@Gittoo](https://discourse.processing.org/u/Gittoo)\
**Post date:** [April 14, 2023, 7:33am UTC](https://discourse.processing.org/t/how-to-make-an-drawing-sketch-of-the-godzilla-heat-beam-without-leaving-a-trace-of-the-beam-line/41681/5 "2023-04-14T07:33:44Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [April 14, 2023, 10:26am UTC](https://discourse.processing.org/t/how-to-make-an-drawing-sketch-of-the-godzilla-heat-beam-without-leaving-a-trace-of-the-beam-line/41681/6 "2023-04-14T10:26:02Z")

</div>

Hello @Gittoo,

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

[![](https://img.youtube.com/vi/TaluaAD9MKA/maxresdefault.jpg "2.6: createGraphics() - p5.js Tutorial") ](https://www.youtube.com/watch?v=TaluaAD9MKA)

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

`:)`