2D, 3D, game, games, online game, game development, game engine, programming, OpenGL, Open AI, math, graphics, design, graphic, graphics, game development, game engine, programming, web development, web art, web graphic, arts, tutorial, tutorials,
Se afișează postările cu eticheta source code. Afișați toate postările
Se afișează postările cu eticheta source code. Afișați toate postările
marți, 6 februarie 2024
News : Shader Editor source code.
If you follow my blogger, you've seen some shaders I made for my background phone.
These shaders are created with this Android app called Shader Editor.
You can find the source code of this application on this GitHub project.
Posted by
Cătălin George Feștilă
Labels:
2024,
2024 news,
github,
news,
open source,
Shader Editor,
source code
vineri, 12 ianuarie 2024
CodePen: CodePen Home WebGL Flower Pattern (Voronoi diagram GLSL)
You can find good web development with a great graphics on Ksenia Kondrashova codepen account.
See this example named: CodePen Home WebGL Flower Pattern (Voronoi diagram GLSL):
Posted by
Cătălin George Feștilă
Labels:
2024,
2D,
3D,
codepen,
programming,
source code,
web,
web development
luni, 22 mai 2023
GitHub webgpu samples.
These examples can be found at GitHub samples.
Posted by
Cătălin George Feștilă
Labels:
2023,
2D,
3D,
graphic,
graphics,
open source,
source code,
web development,
WebGPU
miercuri, 14 septembrie 2022
CodePen: Simple example with css-doodle web component.
This is a simple example with css-doodle javascript web component for drawing patterns with CSS.
luni, 18 aprilie 2022
BVH and three.js meshes implementation.
This article is about the BVH implementation to speed up raycasting and enable spatial queries against three.js meshes.
The full source code can be found on this GitHub project.
You can see a good example on this demo page with this Tyrannosaurus rex
Posted by
Cătălin George Feștilă
Labels:
2022,
3D,
BVH,
design,
github,
software 3D,
source code,
three.js,
tutorial,
tutorials
sâmbătă, 5 martie 2022
CodePen: Google visualization with GeoChart.
In this exameple I used visualization with GeoChart.
See the Pen Untitled by Cătălin George Feștilă (@catafest) on CodePen.
marți, 4 ianuarie 2022
CodePen: The pantone color of the year 2022.
The pantone color of the year 2022 is this.
See the Pen the Pantone Color of year 2022 by Cătălin George Feștilă (@catafest) on CodePen.
Posted by
Cătălin George Feștilă
Labels:
2022,
codepen,
javascript,
pantone color,
source code,
tutorial,
tutorials
miercuri, 24 noiembrie 2021
CodePen: ... challenges every time.
This website comes with challenges all the time, see this week example:
THIS WEEK’S CHALLENGE,Book Text ...Your challenge: Give this book excerpt some tasteful text styles.
Here's what I managed to do for this week:
Posted by
Cătălin George Feștilă
Labels:
2021,
codepen,
javascript,
source code,
tutorial,
tutorials
marți, 23 noiembrie 2021
CodePen: How can share sketchfab 3D models.
The Viewer API lets you build web apps on top of Sketchfab’s 3D viewer. With the API, you can control the viewer in JavaScript. It provides functions for starting, stopping the viewer, moving the camera, taking screenshots and more.
See the official webpage.
Posted by
Cătălin George Feștilă
Labels:
2021,
codepen,
javascript,
Sketchfab,
source code,
tutorial,
tutorials
miercuri, 18 august 2021
News : Unity comes with LookDev Studio.
... most people love this game engine, today a new feature comes to show us how good is this game engine.
you can see also another character named FIA.
Artists – no matter their expertise – need a place to quickly import, iterate on, and refine their art.
You can find a source code with this project on the GitHub website.
Posted by
Cătălin George Feștilă
Labels:
2021,
2021 news,
3D,
design,
free,
graphic,
graphics,
source code,
tutorial,
tutorials,
Unity,
video tutorial
duminică, 1 august 2021
CodePen: RGB colors.
Example with the javascript programming language presented in my codepen account solves the following issues:
- create HTML tag div for each for iteration;
- create an id for each div tag;
- build an RGB color with red, green, and blue using a random function;
- read that id and used to set the color background of each div;
- print the RGB value for each color and set background color;
Let's see the example:
See the Pen by Cătălin George Feștilă (@catafest) on CodePen.
Posted by
Cătălin George Feștilă
Labels:
2021,
codepen,
javascript,
RGB,
source code,
tutorial,
tutorials
sâmbătă, 17 aprilie 2021
CodePen: Lottie for Web, Android, iOS, React Native, and Windows - 001.
Lottie is a mobile library for Web, and iOS that parses Adobe After Effects animations exported as JSON with Bodymovin and renders them natively on mobile!, see GitHub project.
You can find Lottie files on this website.
This is a simple example with lottie-player.js:
See the Pen lottie-player html 001 by Cătălin George Feștilă (@catafest) on CodePen.
Posted by
Cătălin George Feștilă
Labels:
2021,
codepen,
javascript,
Lottie,
lottie-player.js,
source code,
tutorial,
tutorials
duminică, 4 aprilie 2021
CodePen: A simple progressbar with CSS.
A simple test with CSS about how to create two simple progress bars.
The code source of this example - https://codepen.io/catafest/pen/rNjmdwa show us about the cascading source code in CSS and how this works pe properties in CSS.
This difference of the source code in CSS change the speed of the animation:
animation: animate 6s ease-in-out infinite;
...
animation: animate 1s ease-in-out infinite;
Some changes to the CSS source code are not allowed because they have no effect on the end result or must be used in order to complete the base code and have the end result.
Another good example is flex:
display: flex;
On the parent element also changes how width and height work.
CSS codes defines have no effect on a flex container.
...
I can tell you that it is not very easy to change a project based on CSS, so the steps of designing and building a website are very important.
See the Pen CSS excample 001 by Cătălin George Feștilă (@catafest) on CodePen.
duminică, 14 martie 2021
OpenProcessing - simple tree_001.
This is modified example from this in order to build another good tree using openprocessing website interface.
You can see this example on my account.
Let's see the source code:
/*--based on https://openprocessing.org/sketch/396851--*/
var nbranchs = 73;
function setup() {
createCanvas(640, 400);
background(0, 0, 128);
noFill();
stroke(128);
noLoop();
}
function draw() {
tree(100, 200, 150, 350);
}
function mousePressed() {
background(0, 0, 128);
redraw();
}
function branch(x, y, dx, dy) {
var sign = random(dx+1.0)/(abs(dx)+5.0);
for (var i = 0; i <= x; i += 3) {
var idx = i/x;
var xi = bezierPoint(x, x + dx/2, x + dx, x + dx, idx);
var yi = bezierPoint(y, y, y + dy, y + dy, idx);
line(xi, yi, xi + sign*random(8), yi + random(18));
}
}
function tree(left, right, top, bottom) {
for (var idx = 0; idx < nbranchs; idx += 1) {
// choose a random y position
var y = random(bottom, top);
// choose a random x position inside of a triangle
var dx = map(y, bottom, top, 0.0, (right-left)/2.0);
var x = random(left + dx, right - dx);
var x1 = random(left + dx, right - dx);
// choose the size of the branch according to the position on the tree
var w = map (x, left, right, random(-25) -25, random(25)+25) + 1;
var h = map (y, bottom, top, 5 +random(20), 5);
var w1 = map (x, left, right, random(-35), random(35)) + 3;
var h1 = map (y, bottom, top, random(10), random(10));
// randonize the size
var dw = random(-10, 5);
var dh = random (-5, 5);
var dw1 = random(-5, 1);
var dh1 = random (-1, 1);
// create the new branch
branch(x1, y, w1 + dw1, h1 + dh1);
stroke(random(0),random(128),random(15));
branch(x1, y, w1 + dw1, h1 + dh1);
stroke(random(25),random(255),random(50));
branch(x, y, w + dw, h + dh);
}
}
Posted by
Cătălin George Feștilă
Labels:
2021,
javascript,
openprocessing,
P5js,
programming,
source code,
tutorial,
tutorials
luni, 1 februarie 2021
Shadertoy: Modulo N and shader effects.
You can see easily how the math function modulo n affects the shaders.
These three colors are the result of the function modulo n.
You can see two vectors with two modulo ivec areas with these values: 6 and 3.
You can make changes and you see similar results.
A good math teacher can explain why this is happening.
Let me give you a hint: encryption and decryption theories.
Posted by
Cătălin George Feștilă
Labels:
2021,
2D,
graphic,
graphics,
math,
mathematical functions,
programming,
shader,
shadertoy,
source code,
tutorial,
tutorials
duminică, 24 noiembrie 2019
The wrld for custom maps.
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.
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.
Posted by
Cătălin George Feștilă
Labels:
2019,
codepen,
design,
graphics,
javascript,
js,
source code,
tutorial,
tutorials,
web development,
website,
wrld
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.js
You can use it like any JavaScript library.You 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);
}
Then you can fill these functions with any javascript code.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.
Posted by
Cătălin George Feștilă
Labels:
2019,
codepen,
design,
graphics,
javascript,
p5.js,
source code,
tutorial,
tutorials,
web development,
website
marți, 21 mai 2019
Show SVG with the anime javascript library.
First of all the anime javascript library can be found at the official webpage.
Start with the empty project on codepen.io website.
You need to add the javascript library into the editor by using the wheel icon of JS area:
The CSS code is used to stylize the output.
For example, the size of the path can be used like this:
See the result of this source code:
Start with the empty project on codepen.io website.
You need to add the javascript library into the editor by using the wheel icon of JS area:
https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js
You can add the SVG source code with the path and then this will be parsed by javascript script.The CSS code is used to stylize the output.
For example, the size of the path can be used like this:
.anim path {
stroke-width: 3;
}
Then use the source code from my example.See the result of this source code:
Posted by
Cătălin George Feștilă
Labels:
2019,
2D,
3D,
design,
javascript,
open source,
programming,
source code,
tutorial,
tutorials
duminică, 2 septembrie 2018
New codepen example - modal window.
In user interface design for computer applications, a modal window is a graphical control element subordinate to an application's main window. It creates a mode that disables the main window, but keeps it visible with the modal window as a child window in front of it.
This is my example with a modal window created on codepen website.
The example is very simple.
The html5 source code is created with classes and id's.
The css file make all style for this tags.
The javascript use all of this to open the modal window, use click to close the window.
The Cancel and Add buttons not work with the java script.
This is my example with a modal window created on codepen website.
The example is very simple.
The html5 source code is created with classes and id's.
The css file make all style for this tags.
The javascript use all of this to open the modal window, use click to close the window.
The Cancel and Add buttons not work with the java script.
Posted by
Cătălin George Feștilă
Labels:
2018,
codepen,
CSS,
graphics,
html5,
javascript,
source code,
tutorial
luni, 9 iulie 2018
The ThreeNodes tool .
The ThreeNodes.js tool is a good example to see how the three.js libs can be used.
Is a good tool to create and use it, see online tool:
Is a good tool to create and use it, see online tool:
Abonați-vă la:
Postări (Atom)