Pixel Cityscape

[Enrique Vasquez]

Pixelplace i build using Blender and Aseprite. My idea is to promete my band gemini (where i play bass) with this artWork and to practise my texturing. Everything in the scene is texture with a 256x256 image except for the geminis poster that is an other image of 64x84 pixels. Really is this a very optimized scene, really dreaming to make a mobile game with this style.

r110801080 388 KB

QolorPIX Pixel Controlled LED Tape is designed for the most demanding professional applications, with 48 individually controlled LED lights per meter. Each reel of tape includes a soldered-on four-pin XLR connector on one end, creating a plug and play connection to the QolorPIX Tape Controller to create thousands of effects, including chases, fades, scrolls, bursts, and more, with the option of using onboard Multiverse wireless DMX/RDM technology.

QolorPIX Pixel Controlled LED Tape runs on low voltage (5VDC) and is sold in five-metre reels, with a maximum cable connection length (between controller and tape) of 10 metres. QolorPIX Pixel Tape is available in both water resistant (IP67 rated, jacketed in clear rectangular silicone) or indoor use only (IP20 rated, not jacketed) versions.

Our three-minute QolorPIX Effects video demonstrates different kinds of pixel effects that are available as plug and play options when using the QolorPIX Tape Controller. Click to view our top 11 plug and play pixel effects: Paparazzi, Comet, Jockey, Checkers, Colour Merge, Wave, Sweep, Wipe, VU Manual, Strobe, and Knight Rider.

SPECS:

Q1. How much tape is on each reel of QolorPIX Pixel Controlled LED Tape?

A1. 5 Meters (16.4 feet)

Q2. What are the cutting increments of QolorPIX Pixel Controlled LED Tape?

A2. You can cut the tape between each LED, or 21mm.

Q3. What is the voltage of QolorPIX Pixel Controlled LED Tape?

A3. QolorPIX tape operates at 5 volts.

Q4. How many LEDs per meter are on QolorPIX Pixel Controlled LED Tape? How many LEDs per reel?

A4. There are 48 LEDs per meter and 240 LEDs per reel.

Q6. What is the chipset for QolorPIX Pixel Controlled LED Tape?

A6. QolorPIX tape uses standard chipset WS2812B.

Q7. What is the part number for QolorPIX Pixel Controlled LED Tape?

A7. QolorPIX Pixel Controlled LED Tape for outdoor installations is: Q5050-5-RGB-48-5-67-2. QolorPIX for indoor installations (unjacketed) is: Q5050-5-RGB-48-5-20-2.

SET UP:

Q8. How can I mount QolorPIX Pixel Controlled LED Tape?

A8. Plastic mounting clips are included with each reel of tape.

Q9. Can I play media on QolorPIX Pixel Controlled LED Tape?

A9. Yes, since the tape uses a standard chipset, you can use it with a media server to play video or media.

Q10. What length are the extrusions for QolorPIX Pixel Controlled LED Tape?

A10. City Theatrical sells two different aluminum extrusions, Part# 6691 and Part #6692, which both fit QolorPIX tape. Part#6691 is 9mm high and Part# 6692 is 14mm high. They are both sold in 2 meter lengths.

Q11. Can QolorPIX Pixel Controlled LED Tape be diffused?

A11. Yes, you can diffuse QolorPIX tape. When diffused, the effects take on a completely different look. City Theatrical sells two different diffusers (Part# 6696 and Part# 6697) that fit perfectly with the extrusion Part# 6691 and Part# 6692. The diffusers are sold in 2 meter lengths.

Q12. Are there 12V and 24V versions of QolorPIX Pixel Controlled LED Tape?

A12. No, we currently only offer 5V tape.

Q13. Can I control every pixel on QolorPIX Pixel Controlled LED Tape?

A13. Yes, you can control every pixel up to one universe (512 slots). Although this is possible, it is quite limiting. Each pixel requires 3 slots (red, green, blue). This means an entire universe can only control 170 pixels, not a full roll.

Q14. Can I use QolorPIX Pixel Controlled LED Tape that I have cut?

A14. Yes, the cut pieces of the tape can be used by soldering leads onto the copper pads.

Q15. Does City Theatrical offer different types of pixel tape?

A15. Yes. QolorPIX Pixel Controlled LED Tape (with silicone jacket) P/N Q5050-5-RGB-48-5-67-2 is encapsulated in clear rectangular silicone tubing making it IP67 rated, for oudoor installations.

Working under an exceptionally tight timeline, the RMRKcreative production agency was looking for a turn-key pixeltape and controller solution to add dynamic lighting to theiconic Vince Lombardi Trophy replica, an outdoor 25-footstatue which was the backdrop for Super Bowl LIII eventsbefore and after the game in Atlanta, Georgia.

Falls Baptist Church was looking for a way to enhance thelighting of their annual Christmas Spectacular event, withperformances that attract and inspire thousands of peoplefrom the surrounding communities. With the help of a newprofessional lighting designer as part of their creative team,they developed ideas to illuminate the stage and over 100performers with dynamic lighting effects.

The lighting designer looked for a foundational lightingelement that could be used throughout the entire show.Since the scenic design was minimal, there were limitedoptions when it came to building in lighting fixtures that couldsupport each musical movement. Pixel tape seemed to be apractical solution, but the team needed tape that was easy toinstall and use, and could play throughout the show withoutrepeating an effect.

Six reels of QolorPIX Pixel Controlled LED Tape, drivenby an ETC ION console to the QolorPIX Tape Controller,worked as the unique lighting solution to dynamicallylight three Christmas Trees with color and dimension,with plug and play effects ranging from one and two colorpaparazzi, comets, and beyond.

This amazing program uses many different concepts in a very small space, understanding it is kind of like solving a puzzle. There are several main pieces including the html code, frame update loop, rendering system, raycasting engine, and the city itself.

You might think that it would require some advanced math to unravel this mystery, but actually no, the code is fairly simple and only uses basic algebra, not even any trig functions are used. Though there are a few tricks that allow everything to come together with an impressive result.

It is just a canvas element with an onclick event. I splurged by setting the CSS width to 99%, though it still works fine without so there is some extra space to play around with for future remixes. The canvas id is set to c which gives us a way to access it from JavaScript.

To do that we will fire a ray from the camera using the position of this pixel to control the angle of the ray. Then if something is hit, it will send the ray towards the sun to check if it is in shadow. It sounds more complicated then it actually is!

The horizontal component of the camera vector is stored in a. We can calculate it from i by first moding i by the width which is 99. Then we divide by 50 to get a value between 0 and 2, and subtract 1 to normalize it between -1 and 1. Thankfully no parenthesis were needed which helps to save space.

The vertical component of the camera vector is stored in b. So it is a similar calculation to a. The correct way to calculate the vertical percentage is to first divide i by the width, then take the floor of that, then divide that by the height.

However by accepting a nearly imperceptible slant, we can simplify and just divide i by half the number of pixels and subtracting 1 to normalize between -1 and 1. The value 4e3 was chosen to move the horizon below center. You can play around with these values to see how it effects the result.

Also, notice that s is being set to the same value as b to create a vertical linear fade in the background if nothing in the scene is hit. The value of s will eventually be used to control the shading of the scene.

The condition part of the for loop does a lot of heavy lifting here so we will split it up into several lines for clarity. The first part just moves Z forwards one step until it goes too far, which for us will be reusing the variable w that is equal to 99. The X and Y variables will be updated inside the loop.

The result of everything in the parentheses ends up getting multiplied by 8 and moded by 46 which is the maximum height. These values were chosen after experimentation to produce an interesting variety of building heights.

The first part d is to check if we are firing the ray from the camera or casting the ray towards the light to check for a shadow. We had already set d to 1 before the loop began, and end of this line it will be set to a value less that 1 which combined with the bitwise or will evaluate to false. This allows the loop to run a second time, moving towards the light to check for shadow. So if it is in shadow the next time this code is hit, it will exit the for loop and draw the pixel.

The grayscale texture value is stored in s and generated by using the & operator with X, Y, and Z and modding that by 3. This creates and effect that looks something like different types of windows. The result is also divided by Z to fade off the texturing in the distance.

A fog value is stored in d by dividing the current Z value by w (99) which will is used to brighten the buildings in the distance. This same value of d is now guaranteed to be less than 1 signifying that we are testing for shadow as mentioned earlier.

Each component is updated to move the ray end point. The X and Y part is controlled by a and b respectively. The Z part always moves forward by 1, since the directional light is also in the direction of the camera it never needs to change.

Each pixel is finally drawn using a simple calculation of i to get the X and Y coordinates. The brightness is controlled by reducing the size of the pixel which is a very small way to create grayscale images one pixel at a time.

The fog value d gets multiplied by the current distance Z/w, which is how the shadows are created. If the ray is not in shadow, than it must have traveled the maximum distance of w so Z/w will be 1. Conversely if it is in shadow, than Z will be less that w causing that area to be darker. This actually creates a type of ambient occlusion because the closer the light blocking object, the darker the shadow.

3a8082e126