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

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

It’s online here:
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:

1 Like

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

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

Hello,

Manual cleaning or software solution?

:)

Hello there. It is very interesting. I would like to try programming graphical effects as well. Keep sharing with us what you’ve got :thinking:

Manual cleaning. As in I tidied it up myself.