A good map can have many features.
If you don't want to build one using advanced programming language then you can use this website.
You can use this with an online map with Unity, JavaScript, iOS and Android.
You can also build your indoor map and visualize any building in 3D.
All of these features let you optimize building management, resources, and planning.
The map can have many features like time of day, weather and seasons and heat map.
The next example is an outdoor map of my location.
duminică, 24 noiembrie 2019
The wrld for custom maps.
Labels:
2019,
codepen,
design,
graphics,
javascript,
js,
source code,
tutorial,
tutorials,
web development,
website,
wrld
joi, 21 noiembrie 2019
Shadertoy: The flag of Romania - 002.
This is another step about learning shaders.
The old example can be updated with this source code.
I commented on the source code to see step by step how this working.
One way to understand how this working to the final result is to going back on the shader structures that generate output to the basic elements of the shader.
If we apply this case to solve the problem then from the display a color like a vec4 color for fragColor adding a sin function to wave the result, and so on.
Right, this code can be optimized in many ways depending on the result.
The old example can be updated with this source code.
I commented on the source code to see step by step how this working.
One way to understand how this working to the final result is to going back on the shader structures that generate output to the basic elements of the shader.
If we apply this case to solve the problem then from the display a color like a vec4 color for fragColor adding a sin function to wave the result, and so on.
Right, this code can be optimized in many ways depending on the result.
// learning process area step by step
// the gl_FragColor is a vec4 type of float values in the range 0 to 1.
// because the values are from 0 to 1 this can used in many ways with for domain and range
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
// Normalized pixel coordinates (from 0 to 1)
vec2 uv = fragCoord/iResolution.xy;
// define a vec2 and uv can be divide to create waves
// use this to see the difference
// vec2 valul = vec2(0.01,1.0);
vec2 valul = vec2(0.5,1.0);
// define a vec2 this vector will be the vector of shadow
vec2 unghi_valul = vec2(0.5,1.0);
// this float will speed the animation with iTime
float viteza = 3.0;
// with the dot we can calculate the dot product of two vectors and result can be a shadow
// the result of unghi can be changed when change the vectors and vectors math rules
float unghi = dot(uv/valul, unghi_valul) - iTime * viteza;
// the output can be used with sin to create a shadow wave
// fill the screen with red
fragColor = vec4(1,0,0,0) * sin(unghi);
// fill the 2/3 of size with yellow color
if(uv.x<(1.0/1.5))
fragColor = vec4(1,1,0,0) * sin(unghi);
// fill the last 1/3 with the blue color
if(uv.x<1.0/3.0)
fragColor = vec4(0,0,1,0) * sin(unghi);
}miercuri, 20 noiembrie 2019
Shadertoy: The flag of Romania - 001.
Today I make the flag of Romania.
About this flag you can read at Wikipedia.
The goal of this simple tutorial is to learn the link between iResolution and the fill areas.
First, you need to normalized pixel coordinates from 0 to 1.
The gl_FragColor is a vec4 type of float values in the range 0 to 1.
We can use this property by fill the areas of the screen.
The example can be changed to use the RGBA.
The source code is this:
About this flag you can read at Wikipedia.
The goal of this simple tutorial is to learn the link between iResolution and the fill areas.
First, you need to normalized pixel coordinates from 0 to 1.
The gl_FragColor is a vec4 type of float values in the range 0 to 1.
We can use this property by fill the areas of the screen.
The example can be changed to use the RGBA.
The source code is this:
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
// Normalized pixel coordinates (from 0 to 1)
vec2 uv = fragCoord/iResolution.xy;
// Output to screen
// fill the screen with red
fragColor = vec4(1,0,0,0);
// fill the 2/3 of size with yellow color
if(uv.x<(1.0/1.5))
fragColor = vec4(1,1,0,0);
// fill the last 1/3 with the blue color
if(uv.x<1 .0="" code="" fragcolor="vec4(0,0,1,0);">vineri, 15 noiembrie 2019
The neon effect with javascript P5 JavaScript library.
The P5.js is a JavaScript library for creative coding.
You can use by adding this link on your HTML area using the script tag:
You have two functions: setup and a draw for setup and drawing.
You can see a neon effect with two bezier functions.
The example uses the mouse movement to change the bezier lines.
You can see many examples created by me at codepen website.
You can use by adding this link on your HTML area using the script tag:
https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.jsYou have two functions: setup and a draw for setup and drawing.
function setup() {
createCanvas(window.innerWidth, window.innerHeight);
}
function draw() {
ellipse(50, 50, 80, 80);
}You can see a neon effect with two bezier functions.
The example uses the mouse movement to change the bezier lines.
You can see many examples created by me at codepen website.
Labels:
2019,
codepen,
design,
graphics,
javascript,
p5.js,
source code,
tutorial,
tutorials,
web development,
website
duminică, 10 noiembrie 2019
Steam on Linux distro Fedora 31 .
You can easily install the Steam tool on Fedora 31.
From these funny games like Hibiscus Red, Gatlin' Demo to the last Counter-Strike.
These two screenshots show you how work's this tool game:
[root@desk my_bash_scripts]# dnf install steam -y
Last metadata expiration check: 0:20:14 ago on Sun 10 Nov 2019 07:29:46 PM EET.
Dependencies resolved.
...
pcre-8.43-2.fc31.1.i686
pixman-0.38.4-1.fc31.i686
pulseaudio-libs-13.0-1.fc31.i686
rest-0.8.1-6.fc31.i686
systemd-libs-243-4.gitef67743.fc31.i686
xz-libs-5.2.4-6.fc31.i686
Complete![mythcat@desk ~]$ steam
Running Steam on fedora 31 64-bit
STEAM_RUNTIME is enabled automatically
Pins potentially out-of-date, rebuilding...
...
Initializing engine controller
Post-initializing framework
-------------------------------------------------------------------------------
Connected to server (registration)
Disconnecting from server
Disconnected from server
Connected to server (game)
Preparing engine controller for exit
Disconnecting from server
-------------------------------------------------------------------------------
Game removed: AppID 488440 "", ProcID 152924
Uploaded AppInterfaceStats to Steam
Exiting app 488440
No cached sticky mapping in ActivateActionSet.From these funny games like Hibiscus Red, Gatlin' Demo to the last Counter-Strike.
These two screenshots show you how work's this tool game:
miercuri, 6 noiembrie 2019
Shadertoy: Simple sky with shadertoy tool.
Today I create a simple sky with the online tool shadertoy.
I used Fedora 30 distro Linux and my old video card:
I used Fedora 30 distro Linux and my old video card:
VGA compatible controller: NVIDIA Corporation GT218 [GeForce 210] (rev a2)Easy install of GIMP with Flatpak.
GIMP is a free and open-source raster graphics editor used for image retouching and editing, free-form drawing, converting between different image formats, and more specialized tasks. GIMP is released under GPLv3+ licenses and is available for Linux, macOS, and Microsoft Windows, see Wikipedia.
Flatpak is a software utility for software deployment and package management for Linux. It is advertised as offering a sandbox environment in which users can run application software in isolation from the rest of the system. see Wikipedia.
Flatpak builds available in i386, x86-64, ARM and AArch64.
Flatpak is a software utility for software deployment and package management for Linux. It is advertised as offering a sandbox environment in which users can run application software in isolation from the rest of the system. see Wikipedia.
Flatpak builds available in i386, x86-64, ARM and AArch64.
[root@desk mythcat]# dnf install flatpak.x86_64
Last metadata expiration check: 0:27:27 ago on Fri 01 Nov 2019 11:27:47 PM EET.
Dependencies resolved.
...
Installed:
flatpak-1.4.3-1.fc30.x86_64
p11-kit-server-0.23.16.1-1.fc30.x86_64
xdg-desktop-portal-1.4.2-1.fc30.x86_64
xdg-desktop-portal-gtk-1.4.0-1.fc30.x86_64
flatpak-selinux-1.4.3-1.fc30.x86_64
flatpak-session-helper-1.4.3-1.fc30.x86_64
ostree-libs-2019.4-3.fc30.x86_64
Complete![mythcat@desk ~]$ flatpak install https://flathub.org/repo/appstream/org.gimp.GIMP.flatpakref
Note that the directories
'/var/lib/flatpak/exports/share'
'/home/mythcat/.local/share/flatpak/exports/share'
are not in the search path set by the XDG_DATA_DIRS environment variable, so applications installed by
Flatpak may not appear on your desktop until the session is restarted.
Required runtime for org.gimp.GIMP/x86_64/stable (runtime/org.gnome.Platform/x86_64/3.32) found in remote
flathub
Do you want to install it? [Y/n]: Y
org.gimp.GIMP permissions:
ipc network x11 file access [1]
dbus access [2] tags [3]
[1] /tmp, host, xdg-config/GIMP, xdg-config/gtk-3.0
[2] org.freedesktop.FileManager1, org.gtk.vfs, org.gtk.vfs.*
[3] stable
ID Arch Branch Remote Download
ID Arch Branch Remote Download
1. [✓] org.gnome.Platform x86_64 3.32 flathub 360.0 MB / 374.0 MB
2. [✓] org.gnome.Platform.Locale x86_64 3.32 flathub 17.4 kB / 320.0 MB
3. [✓] org.freedesktop.Platform.VAAPI.Intel x86_64 18.08 flathub 1.8 MB / 1.8 MB
4. [✓] org.freedesktop.Platform.html5-codecs x86_64 18.08 flathub 3.2 MB / 3.3 MB
5. [✓] org.gimp.GIMP x86_64 stable flathub 106.5 MB / 108.9 MB
Installation complete.
[mythcat@desk ~]$ flatpak update
Note that the directories
'/var/lib/flatpak/exports/share'
'/home/mythcat/.local/share/flatpak/exports/share'
are not in the search path set by the XDG_DATA_DIRS environment variable, so
applications installed by Flatpak may not appear on your desktop until the session is restarted.
Looking for updates…
Nothing to do.
[mythcat@desk ~]$ flatpak run org.gimp.GIMP//stable
Note that the directories
'/var/lib/flatpak/exports/share'
'/home/mythcat/.local/share/flatpak/exports/share'
are not in the search path set by the XDG_DATA_DIRS environment variable, so
applications installed by Flatpak may not appear on your desktop until the session is restarted.
GIMP-Error: Skipping '/home/mythcat/.var/app/org.gimp.GIMP/config/GIMP/2.10/pluginrc
wrong GIMP protocol version.
...
marți, 22 octombrie 2019
NVIDIA video cards and CUDA feature.
Today I search on web information about video cards for processing, neural networks, and rendering.
If you use it with Blender 3D software or Neural networks then you need a GPU with CUDA feature.
My destop works with an old NVIDIA Corporation GT218 [GeForce 210] (rev a2) video card and this not help me very much.
The CUDA platform is a software layer that gives direct access to the GPU's virtual instruction set and parallel computational elements, for the execution of compute kernels. see Wikipedia.
This software uses the CUDA feature. Let's see all of these informations about desktop Nvidia GPUS ordered by CUDA core count.
If you use it with Blender 3D software or Neural networks then you need a GPU with CUDA feature.
My destop works with an old NVIDIA Corporation GT218 [GeForce 210] (rev a2) video card and this not help me very much.
The CUDA platform is a software layer that gives direct access to the GPU's virtual instruction set and parallel computational elements, for the execution of compute kernels. see Wikipedia.
This software uses the CUDA feature. Let's see all of these informations about desktop Nvidia GPUS ordered by CUDA core count.
| GPU | CUDA cores | Memory | Processor frequency |
|---|---|---|---|
| GeForce GTX TITAN Z | 5760 | 12 GB | 705 / 876 |
| NVIDIA TITAN Xp | 3840 | 12 GB | 1582 |
| GeForce GTX 1080 Ti | 3584 | 11 GB | 1582 |
| GeForce GTX TITAN X | 3072 | 12 GB | 1000 / 1075 |
| GeForce GTX 690 | 3072 | 4 GB | 915 / 1019 |
| GeForce GTX TITAN Black | 2880 | 6 GB | 889 / 980 |
| GeForce GTX 780 Ti | 2880 | 3 GB | 875 / 928 |
| GeForce GTX 980 Ti | 2816 | 6 GB | 1000 / 1075 |
| GeForce GTX TITAN | 2688 | 6 GB | 837 / 876 |
| GeForce GTX 1080 | 2560 | 8 GB | 1607 / 1733 |
| GeForce GTX 780 | 2304 | 3 GB | 863 / 900 |
| GeForce GTX 980 | 2048 | 4 GB | 1126 / 1216 |
| GeForce GTX 1070 | 1920 | 8 GB | 1506 / 1683 |
| GeForce GTX 970 | 1664 | 4 GB | 1050 / 1178 |
| GeForce GTX 770 | 1536 | 2 GB | 1046 / 1085 |
| GeForce GTX 680 | 1536 | 2 GB | 1006 / 1058 |
| GeForce GTX 760 Ti (OEM) | 1344 | 2 GB | 960 |
| GeForce GTX 670 | 1344 | 2 GB | 915 / 980 |
| GeForce GTX 660 Ti | 1344 | 2 GB | 915 / 980 |
| GeForce GTX 1060 (6GB) | 1280 | 6 GB | 1506 / 1708 |
| GeForce GTX 960 (OEM) | 1280 | 3 GB | 924 / 980 |
| GeForce GTX 760 192-bit(OEM) | 1152 | 1.5 GB / 3 GB | 980 / 1033 |
| GeForce GTX 760 | 1152 | 2 GB | 980 / 1033 |
| GeForce GTX 1060 (3GB) | 1152 | 3 GB | 1506 / 1708 |
| GeForce GTX 660 (OEM) | 1152 | 1.5 GB / 3 GB | 823 / 888 |
| GeForce GTX 960 | 1024 | 2 GB | 1127 / 1178 |
| GeForce GTX 950 (OEM) | 1024 | 2 GB | 935 / 980 |
| GeForce GTX 590 | 1024 | 3 GB | 630 |
| GeForce GTX 660 | 960 | 2 GB | 980 / 1033 |
| GeForce GTX 1050 Ti | 768 | 4 GB | 1290 / 1392 |
| GeForce GTX 950 | 768 | 2 GB | 1024 / 1188 |
| GeForce GTX 650 Ti BOOST | 768 | 2 GB | 980 / 1033 |
| GeForce GTX 650 Ti | 768 | Wikipedia1 GB | 928 |
| GeForce GTX 1050 | 640 | 2 GB | 1354 / 1455 |
| GeForce GTX 750 Ti | 640 | 2 GB | 1020 / 1075 |
| GeForce GTX 645 (OEM) | 576 | 1 GB | 823 |
| GeForce GTX 750 | 512 | 1 GB | 1020 / 1085 |
| GeForce GTX 580 | 512 | 1536 MB | |
| GeForce GTX 480 | 480 | 1536 MB | |
| GeForce GTX 570 | 480 | 1280 MB | |
| GeForce GTX 295 | 480 | 1792 MB | |
| GeForce GTX 470 | 448 | 1280 MB | |
| GeForce GTX 745 (OEM) | 384 | 4 GB | |
| GeForce GT 740 | 384 | 1 GB / 2 GB | |
| GeForce GT 730 | 96-384 | 1 GB / 2 GB | 700 / 902 |
| GeForce GT 635 (OEM) | 384 | 2 GB | |
| GeForce GTX 650 | 384 | 1 GB | |
| GeForce GTX 560 Ti | 384 | 1 GB | |
| GeForce GTX 560 (OEM) | 384 | 1280 MB / 2560 MB | |
| GeForce GT 640 | 384 | 2 GB | |
| GeForce GTX 465 | 352 | 1 GB | |
| GeForce GTX 560 Ti (OEM) | 352 | 1280 GB / 2560 GB | |
| GeForce GTX 460 | 336 | 1 GB | |
| GeForce GTX 560 | 336 | 1 GB | |
| GeForce GTX 460 SE | 288 | 1 GB | |
| GeForce GTX 555 (OEM) | 288 | 1 GB | |
| GeForce GTX 285 for Mac | 240 | Wikipedia1 GB | |
| GeForce GTX 285 | 240 | 1 GB | |
| GeForce GTX 280 | 240 | 1 GB | |
| GeForce GT 720 | 192 | 1 GB / 2 GB | |
| GeForce GT 710 | 192 | 2 GB | 954 |
| GeForce GTS 450 | 192 | 1 GB | |
| GeForce GTX 550 Ti | 192 | 1 GB | |
| GeForce GT 630 (OEM) | 192 | 1 GB / 2 GB | |
| GeForce GT 640 (OEM) | 144 / 384 | 1 GB / 2 GB | |
| GeForce GT 545 GDDR5 (OEM) | 144 | 1 GB | |
| GeForce GT 545 DDR3 | 144 | 1.5 GB / 3 GB | |
| GeForce GTS 250 | 128 | 1 GB | |
| GeForce GTS 150 | 128 | 1 GB | |
| GeForce GTS 240 (OEM Product) | 112 | 1 GB | |
| GeForce GT 630 | 96 | 1 GB | 700~902 |
| GeForce GT 620 | 96 | 1 GB | 700 |
| GeForce GT 440 | 96 | 1 GB | 810 |
| GeForce GT 430 | 96 | 1 GB | 700 |
| GeForce GT 530 (OEM) | 96 | 1 GB / 2GB | |
| GeForce GT 340 (OEM) | 96 | 1 GB | |
| GeForce GT 330 (OEM) | 96-112 | 1 GB / 2GB | |
| GeForce GT 240 | 96 | 1GB | |
| GeForce GT 320 (OEM Product) | 72 | 1 GB | |
| GeForce GT 705 (OEM) | 48 | 1 GB | |
| GeForce GT 620 (OEM) | 48 | 1 GB | |
| GeForce GT 610 | 48 | 1 GB | |
| GeForce GT 520 (OEM) | 48 | 1 GB / 2 GB | |
| GeForce GT 520 | 48 | 1 GB | |
| GeForce GT 220 | 48 | 1 GB | |
| GeForce 605 (OEM) | 48 | 1 GB | |
| GeForce 510 (OEM) | 48 | 1 GB / 2 GB | |
| GeForce 405 (OEM) | 16 | 1 GB | |
| GeForce 310 (OEM) | 16 | 1 GB |
Labels:
2019,
3D,
blender,
Blender 3D,
nvidia,
tool,
tutorial,
tutorials,
video card
duminică, 13 octombrie 2019
News: The new release of Marvelous Designer 9.
Read more at the official webpage.
You have a good intro on youtube channel:
You have a good intro on youtube channel:
miercuri, 18 septembrie 2019
CodePen: Include shadertoy example in the webpage.
This issue can be solve it easy.
You need to get the iframe share from you shadertoy example.
Then use my example HTML and CSS from my codepen example.
You can remove the javascript code from example.
This javascript code is used to show the formula of sphere. I used my shadertoy example named Ray Marching - 001.
You need to get the iframe share from you shadertoy example.
Then use my example HTML and CSS from my codepen example.
You can remove the javascript code from example.
This javascript code is used to show the formula of sphere. I used my shadertoy example named Ray Marching - 001.
duminică, 25 august 2019
Blockly for young programmers.
Blockly is an open source library that makes it easy to add block based visual programming to an app, see the official webpage.
This tool has a good graphics and one great design to understand the flow of programming issue.
This project is good for kids and teenagers to start programming and see the source code into programming languages.
For example, the program build with this tool can be convert into programming language like: Java Script, Python, PHP, Lua and Dart.
You can see a simple video tutorial from the official Google Developers Youtube channel:
This tool has a good graphics and one great design to understand the flow of programming issue.
This project is good for kids and teenagers to start programming and see the source code into programming languages.
For example, the program build with this tool can be convert into programming language like: Java Script, Python, PHP, Lua and Dart.
You can see a simple video tutorial from the official Google Developers Youtube channel:
Labels:
2019,
2D,
blockly,
design,
google,
graphics,
programming,
tutorial,
tutorials,
video tutorial
vineri, 23 august 2019
Chrome App : Marmoset tool.
The Marmoset is a Chrome App which lets you create gorgeous code snapshots.
This video tutorial let you see how can be used:
This video tutorial let you see how can be used:
Labels:
2019,
2D,
3D,
Chrome App,
design,
google,
graphics,
online tool,
tutorial,
tutorials,
video,
video tutorial,
website
marți, 20 august 2019
The YouiDraw online tool.
This online tool named YouiDraw is a good tool for graphics and design artists.
You can be found at the official website.
You can use 240 most popular Google Fonts were added into YouiDraw web apps with they all styles.
This tool comes with: Drawing, Logo Creator and Painter online tool.
I like the YouiDraw Logo Creator tool.
You can use it free or you can pay for extra features, like export SVG format :
Many tutorials can be found at YouTube channel.
You can be found at the official website.
You can use 240 most popular Google Fonts were added into YouiDraw web apps with they all styles.
This tool comes with: Drawing, Logo Creator and Painter online tool.
I like the YouiDraw Logo Creator tool.
You can use it free or you can pay for extra features, like export SVG format :
- Free Start Trial for free ;
- Monthly Plan $9.99/mo;
- Yearly Plan $99.99/yr
Many tutorials can be found at YouTube channel.
Labels:
2019,
2D,
drawing,
graphics,
online tool,
tutorial,
tutorials,
video tutorial,
website
Abonați-vă la:
Postări (Atom)