# Beginner needs help

**URL:** <https://discourse.processing.org/t/beginner-needs-help/11589>\
**Category:** Coding Questions\
**Created:** [May 25, 2019, 3:04pm UTC](https://discourse.processing.org/t/beginner-needs-help/11589 "2019-05-25T15:04:23Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![d\_vibe](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/d_vibe/32/5360_2.png) [@d\_vibe](https://discourse.processing.org/u/d_vibe)\
**Post date:** [May 25, 2019, 3:04pm UTC](https://discourse.processing.org/t/beginner-needs-help/11589/1 "2019-05-25T15:04:23Z")

</div>

Hi! I’m fairly new to programming graphical effects, and I thought, as a starter, it would be a fun thing to try to imitate some of the early demoscene effects that was seen on computers, such as the Commodore Amiga, back in late 80’s and early ninetees.

I’m trying to do a dot tunnel, but I can’t seem to be able to “restart” with a circle at zero again when the tunnel moves against the screen. Anyone who could point me in the right direction?

Here’s the source code:  
[https://editor.p5js.org/dxvibe@gmail.com/sketches/CXHRZklkx](https://editor.p5js.org/dxvibe@gmail.com/sketches/CXHRZklkx)

---

<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:** [May 25, 2019, 3:48pm UTC](https://discourse.processing.org/t/beginner-needs-help/11589/2 "2019-05-25T15:48:06Z")

</div>

Good question. It’s not easy to get to there from where you were. I ran your code through the cleaners and fixed it to do the thing:

```auto
let dots = 360 // Number of dots
let circles = 20 // number of circles
let circlesize
let x = []
let y = []
let distance = 10 // distance between circles
let offset = 0
let baseSize = 100

function setup() {
  createCanvas(800, 800);
}

function draw() {
  background(220);
  offset++
  offset%=distance
  translate(width / 2, height / 2)
  for (i = 0; i < circles; i++) { // Loop to create the number of circle
    circlesize = baseSize + i*distance + offset // to create more circles than one
    for (o = 0; o < dots; o++) { // loop to create the circles with dots
      x[i] = circlesize * cos(radians(o)) // calculates dot position in x direction
      y[i] = circlesize * sin(radians(o)) // calculates dot position in y direction 
      point(x[i], y[i]) // displays the dots
    }
  }
}

```

Notice that there is an offset variable. This controls how “far” away from being the next-outer circle a circle is. At the start, offset is 0, so the rings have radii of 100, 110, 120, etc. Each frame, offset increases by 1, so the next frame they have 101, 111, 121, etc, then 102, 112, 122, etc… And so on up to offset == 9 (109, 119, 129…). When they hit offset == 10, the modulus operation (offset %= distance) sets the offset back to 0, and the process starts over.

This achieves the desired effect… just run the code. It’s easier to see it working than to explain it.

---

<div class="post-metadata">

**Author:** ![d\_vibe](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/d_vibe/32/5360_2.png) [@d\_vibe](https://discourse.processing.org/u/d_vibe)\
**Post date:** [May 25, 2019, 4:32pm UTC](https://discourse.processing.org/t/beginner-needs-help/11589/3 "2019-05-25T16:32:08Z")

</div>

Thank you so much! I was thinking about modulus operator that it might solve the problem but got caught in trying to reset the array instead. This achieved what I wanted! 🙂

---

<div class="post-metadata">

**Author:** ![d\_vibe](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/d_vibe/32/5360_2.png) [@d\_vibe](https://discourse.processing.org/u/d_vibe)\
**Post date:** [June 3, 2019, 8:59am UTC](https://discourse.processing.org/t/beginner-needs-help/11589/4 "2019-06-03T08:59:09Z")

</div>

Hi! I’ve been working a bit with my tunnel effect, and this is what I got so far 🙂

[https://editor.p5js.org/dxvibe@gmail.com/sketches/Q5aUqkvUr](https://editor.p5js.org/dxvibe@gmail.com/sketches/Q5aUqkvUr)

---

<div class="post-metadata">

**Author:** ![d\_vibe](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/d_vibe/32/5360_2.png) [@d\_vibe](https://discourse.processing.org/u/d_vibe)\
**Post date:** [June 6, 2019, 4:18pm UTC](https://discourse.processing.org/t/beginner-needs-help/11589/5 "2019-06-06T16:18:32Z")

</div>

Hey! It’s warm here in Sweden 🥵

Here’s my latest version of the tunnel, it gets kind of silly after a while 😛 :  
[https://editor.p5js.org/dxvibe@gmail.com/sketches/CoxvXWdv\_](https://editor.p5js.org/dxvibe@gmail.com/sketches/CoxvXWdv_)

---

<div class="post-metadata">

**Author:** ![d\_vibe](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/d_vibe/32/5360_2.png) [@d\_vibe](https://discourse.processing.org/u/d_vibe)\
**Post date:** [February 19, 2020, 5:25pm UTC](https://discourse.processing.org/t/beginner-needs-help/11589/6 "2020-02-19T17:25:10Z")

</div>

Hey, just wanted to share a little demonstration I made with p5.js, featuring, amongst some other effects, the dottunnel I got help with in this topic 🙂

It’s online here:  
[http://dvibe.se/demos/ram/](http://dvibe.se/demos/ram/)

Needs kind of fast computer (a phone will probably not do it that good), so I’ve also published a video capture of it on Youtube:

[![](https://img.youtube.com/vi/_qCLheUqO1o/maxresdefault.jpg "R.A.M. (Javascript/p5.js demo, with music made in Caustic 3)") ](https://www.youtube.com/watch?v=_qCLheUqO1o)

---

<div class="post-metadata">

**Author:** ![d\_vibe](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/d_vibe/32/5360_2.png) [@d\_vibe](https://discourse.processing.org/u/d_vibe)\
**Post date:** [February 19, 2020, 5:25pm UTC](https://discourse.processing.org/t/beginner-needs-help/11589/7 "2020-02-19T17:25:45Z")

</div>

If you want to check out my kind of messy (and to a big extent uncommented) source code, you can download it here:  
[http://dvibe.se/demos/dvibenat\_ram.zip](http://dvibe.se/demos/dvibenat_ram.zip)

I released it at Gerp demoparty this month.  
[https://www.pouet.net/party.php?which=1655&when=2020](https://www.pouet.net/party.php?which=1655&when=2020)

---

<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:** [February 20, 2020, 1:04pm UTC](https://discourse.processing.org/t/beginner-needs-help/11589/8 "2020-02-20T13:04:17Z")

</div>

> [@TfGuy44](#):
>
> I ran your code through the cleaners and fixed it to do the thing

Hello,

Manual cleaning or software solution?

`:)`

---

<div class="post-metadata">

**Author:** ![thompsonmax](https://avatars.discourse-cdn.com/v4/letter/t/13edae/32.png) [@thompsonmax](https://discourse.processing.org/u/thompsonmax)\
**Post date:** [February 20, 2020, 1:42pm UTC](https://discourse.processing.org/t/beginner-needs-help/11589/9 "2020-02-20T13:42:43Z")

</div>

> [@d\_vibe](#):
>
> Hi! I’m fairly new to programming graphical effects, and I thought, as a starter, it would be a fun thing to try to imitate some of the early demoscene effects that was seen on computers, such as the Commodore Amiga, back in late 80’s and early ninetees.

Hello there. It is very interesting. I would like to try programming graphical effects as well. Keep sharing with us what you’ve got [🤔](https://www.essayunion.com/buy-custom-research-paper-writing-service.html)

---

<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:** [February 21, 2020, 2:23am UTC](https://discourse.processing.org/t/beginner-needs-help/11589/10 "2020-02-21T02:23:50Z")

</div>

> [@glv](#):
>
> Manual cleaning or software solution?

Manual cleaning. As in I tidied it up myself.