# Any idea how to make this in processing p5.js?

**URL:** <https://discourse.processing.org/t/any-idea-how-to-make-this-in-processing-p5-js/4838>\
**Category:** Coding Questions\
**Created:** [October 24, 2018, 8:08pm UTC](https://discourse.processing.org/t/any-idea-how-to-make-this-in-processing-p5-js/4838 "2018-10-24T20:08:39Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jarin7](https://avatars.discourse-cdn.com/v4/letter/j/b2d939/32.png) [@Jarin7](https://discourse.processing.org/u/Jarin7)\
**Post date:** [October 24, 2018, 8:08pm UTC](https://discourse.processing.org/t/any-idea-how-to-make-this-in-processing-p5-js/4838/1 "2018-10-24T20:08:39Z")

</div>

![](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/0b79ef5e126f1ef621653ff70f547c1c28a4de3b.jpeg)

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [October 24, 2018, 8:10pm UTC](https://discourse.processing.org/t/any-idea-how-to-make-this-in-processing-p5-js/4838/2 "2018-10-24T20:10:03Z")

</div>

Hi Jarin7,

You can use `abs(cos())` function to get something similar.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [October 24, 2018, 8:11pm UTC](https://discourse.processing.org/t/any-idea-how-to-make-this-in-processing-p5-js/4838/3 "2018-10-24T20:11:01Z")

</div>

Do you mean, draw that exact shape with bars, or should it be based on something – like a particular curve / wave, or probability distribution?

Or hooked up to something, like audio?

Or visualizing a list of data entries like a bar graph…?

---

<div class="post-metadata">

**Author:** ![Jarin7](https://avatars.discourse-cdn.com/v4/letter/j/b2d939/32.png) [@Jarin7](https://discourse.processing.org/u/Jarin7)\
**Post date:** [October 24, 2018, 9:04pm UTC](https://discourse.processing.org/t/any-idea-how-to-make-this-in-processing-p5-js/4838/5 "2018-10-24T21:04:28Z")

</div>

Yeah, it should look “something” like this. It’s 1 period of two-way regulated sinusoid. y = 0 at (0,0),(50,0)(100,0) Lines should be 1 pixel big and between lines there should be 1 pixel gap. It has nothing to do with audio. Sorry for not specifing closer earlier, thanks for any idea.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [October 24, 2018, 10:32pm UTC](https://discourse.processing.org/t/any-idea-how-to-make-this-in-processing-p5-js/4838/6 "2018-10-24T22:32:42Z")

</div>

> [@Jarin7](#):
>
> sinusoid

It sounds like you want to draw a series of rectangles, starting rom 0 and going to x – use a `for` loop for that, and `rect()`.

- [for / Reference / Processing.org](https://processing.org/reference/for.html)
- [rect() / Reference / Processing.org](https://processing.org/reference/rect_.html)

Then, you want to change the height of each rectangle according to a sine wave function. Use `sin()` for that.

- [sin() / Reference / Processing.org](https://processing.org/reference/sin_.html)

…in fact… you might want to take a look at the Processing short example for using `sin` …

![](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/6/639c3c9b0a968ecb0d754d147445a68cf34740ab.png)

---

<div class="post-metadata">

**Author:** ![Eeyorelife](https://avatars.discourse-cdn.com/v4/letter/e/439d5e/32.png) [@Eeyorelife](https://discourse.processing.org/u/Eeyorelife)\
**Post date:** [October 25, 2018, 12:34am UTC](https://discourse.processing.org/t/any-idea-how-to-make-this-in-processing-p5-js/4838/7 "2018-10-25T00:34:25Z")

</div>

That is if you want to use Processing. If you want to use p5.js, you can go to [https://p5js.org/reference/](https://p5js.org/reference/) to find the equivalent functions.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [October 25, 2018, 3:55am UTC](https://discourse.processing.org/t/any-idea-how-to-make-this-in-processing-p5-js/4838/8 "2018-10-25T03:55:00Z")

</div>

Oops! That’s right – I missed that it was p5.js.

[https://p5js.org/reference/#/p5/sin](https://p5js.org/reference/#/p5/sin)

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [October 25, 2018, 5:03am UTC](https://discourse.processing.org/t/any-idea-how-to-make-this-in-processing-p5-js/4838/9 "2018-10-25T05:03:24Z")

</div>

A guide on how to sin, you say? 😈

---

<div class="post-metadata">

**Author:** ![Jarin7](https://avatars.discourse-cdn.com/v4/letter/j/b2d939/32.png) [@Jarin7](https://discourse.processing.org/u/Jarin7)\
**Post date:** [October 25, 2018, 12:06pm UTC](https://discourse.processing.org/t/any-idea-how-to-make-this-in-processing-p5-js/4838/10 "2018-10-25T12:06:04Z")

</div>

Thanks! That helped me a lot but don’t you know how to make it look exactly like in the picture?

 ![](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/0b79ef5e126f1ef621653ff70f547c1c28a4de3b.jpeg)

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [October 25, 2018, 12:34pm UTC](https://discourse.processing.org/t/any-idea-how-to-make-this-in-processing-p5-js/4838/11 "2018-10-25T12:34:37Z")

</div>

[https://editor.p5js.org/kll/sketches/ByamrNy3m](https://editor.p5js.org/kll/sketches/ByamrNy3m)

---

<div class="post-metadata">

**Author:** ![Jarin7](https://avatars.discourse-cdn.com/v4/letter/j/b2d939/32.png) [@Jarin7](https://discourse.processing.org/u/Jarin7)\
**Post date:** [October 25, 2018, 12:57pm UTC](https://discourse.processing.org/t/any-idea-how-to-make-this-in-processing-p5-js/4838/12 "2018-10-25T12:57:35Z")

</div>

Thanks a lot! I really appreciate it.