The code to create this impact could be very easy:
[Lines 4-6]: arrange the HTML5 Canvas
[7-9]: put together to attract the grey strains
[10-12]: draw the strains going South-West
[13-16]: draw the strains going South-East
[18-24]: draw the white circles. In each iteration of the y loop we draw two circles – the second is to shifted down and proper, in order that we cowl every intersection.
| <html> |
| <physique fashion=’background–coloration:black‘> |
| <canvas id=”myCanvas” width=”800” top=”340“></canvas> |
| <script> |
| let canvas = doc.getElementById(‘myCanvas‘); |
| let context = canvas.getContext(‘second’); |
| context.lineWidth = 5; |
| context.strokeStyle = ‘grey‘ |
| context.beginPath(); |
| for(let x=0;x<28;x++){ |
| context.moveTo(x*40–304,0); |
| context.lineTo(x*40+20,340); |
| context.moveTo(x*40,0); |
| context.lineTo(x*40–324,340); |
| } |
| context.stroke(); |
| context.fillStyle = ‘white‘; |
| for(let x=0;x<20;x++) |
| for(let y=0;y<9;y++){ |
| context.beginPath(); |
| context.arc(8+x*40, y*42–9, 3, 0, 2 * Math.PI); |
| context.arc(28+x*40, y*42–29, 3, 0, 2 * Math.PI); |
| context.fill(); |
| } |
| </script> |
| </physique> |
| </html> |
Altering the scale and decreasing the variety of circles result in fascinating results. Get pleasure from fooling your mind!
Take a look at these programming tutorials:
JavaScript:
Oldschool hearth impact (20 strains)
8-bit sine scroll (30 strains)
Yin Yang with a twist (4 circles and 20 strains)
Tutorial – interactive, animated sprites
Your first program in JavaScript: you want 5 minutes and a notepad
Python in Blender 3d:
Domino impact (10 strains)
Wrecking ball impact (14 strains)
