Beginner needs help

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

1 Like

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:

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.

2 Likes

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! :slight_smile:

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

https://editor.p5js.org/dxvibe@gmail.com/sketches/Q5aUqkvUr

2 Likes

Hey! It’s warm here in Sweden :hot_face:

Here’s my latest version of the tunnel, it gets kind of silly after a while :stuck_out_tongue: :
https://editor.p5js.org/dxvibe@gmail.com/sketches/CoxvXWdv_

1 Like