Pages

Se afișează postările cu eticheta javascript. Afișați toate postările
Se afișează postările cu eticheta javascript. Afișați toate postările

sâmbătă, 9 martie 2024

News : Online tool for JavaScript and TypeScript

Using this online tool you can create a JavaScript/TypeScript project that runs natively on all your users' devices: web, android, iOS.
You can find more details and the documentation on the official page with the documentation.
An very old video example from 7 years ago, see the official youtube.
Here is a screenshot of this online tool I tested today:

marți, 4 ianuarie 2022

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:

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.

sâmbătă, 18 septembrie 2021

CodePen: Webcam with RGB color shader and the three.js javascript library.

Three.js is a cross-browser JavaScript library and application programming interface used to create and display animated 3D computer graphics in a web browser using WebGL.
This library is not really used in website development. It has some great real-time information display capabilities.
Today I show you a combined example of a webcam with a simple shader set with an RGBA color.

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.

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.

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);
    
  }
}

sâmbătă, 3 octombrie 2020

About Phaser Editor 2D game editor.

Today I install Phaser Editor 2D on Fedora 32, you can download it from the official website. Phaser Editor 2D is a commercial IDE to develop video-games. It is delivered as an offline product and users can run it for free (with certain limitations) or can purchase a license key to unlock all features. Phaser Editor 2D version 3, the latest, is a complete new software based on web technologies. So we created Play Phaser Editor 2D, a small service to allow Phaser Editor 2D license owners, to run the editor and create small projects in the cloud. However, in the future, we will provide a different cloud service with options for storage, collaboration, publishing, integration with other services and payment. These are the Play Phaser Editor 2D available plans: Free Plan and Premium Plan About Free Plan: Running the FREE PLAN 0B/50MB of storage is used 59 days before expiration date The Premium Plan comes with these options:
  • One Year License - 30$ Valid for one year after the purchase. Phaser Editor 2D Team email support. Write to developers@phasereditor2d.com. The option to refund in the first month after the purchase.
  • Two Years License - 45$ Valid for two years after the purchase. Phaser Editor 2D Team email support. Write to developers@phasereditor2d.com. The option to refund in the first month after the purchase.
  • Lifetime License - 75$ Never expires. Phaser Editor 2D Team email support. Write to developers@phasereditor2d.com. The option to refund in the first month after the purchase.
  • Two Years Team License - 125$ 5 developers allowed. Valid for two years. Phaser Editor 2D Team email support. Write to developers@phasereditor2d.com. The option to refund in the first month after the purchase.
This is a video tutorial from official youtube channel:

sâmbătă, 2 mai 2020

Testing the ACE embeddable code editor.

Topday I try to use the ACE editor.
This is an embeddable code editor written in JavaScript with many features:
  • Syntax highlighting for over 110 languages (TextMate/Sublime Text.tmlanguage files can be imported)
  • Over 20 themes (TextMate/Sublime Text .tmtheme files can be imported)
  • Automatic indent and outdent
  • An optional command line
  • Handles huge documents (four million lines seems to be the limit!)
  • Fully customizable key bindings including vim and Emacs modes
  • Search and replace with regular expressions
  • Highlight matching parentheses
  • Toggle between soft tabs and real tabs
  • Displays hidden characters
  • Drag and drop text using the mouse
  • Line wrapping
  • Code folding
  • Multiple cursors and selections
  • Live syntax checker (currently JavaScript/CoffeeScript/CSS/XQuery)
  • Cut, copy, and paste functionality

You can read more at the official website.

See the Pen ace_editor_001 by Cătălin George Feștilă (@catafest) on CodePen.

marți, 21 aprilie 2020

Another Ct.js game engine.

This is a game engine build and run with javascrip.
You can used on these operating systems: Windows, Linux and Mac OS.
Download the archive for your operating system and unarchive.
Start the ctjs application.
Into the main window you have some editbox for Name, Author name, Homepage and Version.
This window comes with buttons for play, stop ... many tabs: Settings, Rooms, UI, Sound ...
First, you need to fill the Settings with your Name and all data, and add Actions.
This engine game comes with examples to see how good is.
Let's see a video tutorial from Gamefromscratch user:

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.

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

marți, 28 mai 2019

Using blotter.js with channels.

This javascript library comes with this intro:
A JavaScript API for drawing unconventional text effects on the web. Blotter.js requires Three.js and Underscore.js. If you're already including these files in your project, view the information on custom builds to get the file size significantly smaller.
See more here.
The HTML5 is simple with an empty div tag.
The CSS is just for design an is not affected by the script.
I used this:
https://cdnjs.cloudflare.com/ajax/libs/Blotter/0.1.0/blotter.min.js
https://cdnjs.cloudflare.com/ajax/libs/Blotter/0.1.0/materials/channelSplitMaterial.min.js
If you want a distortion effect you need to use this:
https://cdnjs.cloudflare.com/ajax/libs/Blotter/0.1.0/materials/channelSplitMaterial.min.js
The javascript takes the div tag and used it:
//
let text = new Blotter.Text("28:08:2019", {
  family : "sans-serif",
  size : 128,
  fill : "#000"
});

let material = new Blotter.ChannelSplitMaterial();
material.uniforms.uOffset.value = 0.05;
material.uniforms.uAnimateNoise.value = 1;


let blotter = new Blotter(material, {
  texts : text
});

let el = document.getElementById("blotter-channels");
let scope = blotter.forText(text);

scope.appendTo(el);
The result is this:
See the Pen blotter-channels by Cătălin George Feștilă (@catafest) on CodePen.

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:
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:
See the Pen animejs_001 by Cătălin George Feștilă (@catafest) on CodePen.

luni, 29 octombrie 2018

OpenProcessing website.

You can create an account on this website to test your skills with processing programming language.
About OpenProcessing then this programming language uses some awesome Licensed and Open Source components.
You can see my working sketches here.

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.

duminică, 25 martie 2018

Using processing.js to create a progressbar .

Today I tested the processing version 3.3.7 .
The example I make is a progressbar with a blue color and some text to show info.
The source code is very simple and result is this:

This is the source code:
// example progressbar 
// default variables for progressbar
// start the time for progressbar
int startTime; 
// counter progressbar 
int counter;
// maximum time progressbar
int maxTime; 
// boolean for the end progressbar 
boolean done; 
// settings for this example
void setup() { 
// set title of window
frame.setTitle("Example progressbar | free-tutorials.org");
// window size and background color
size(640,130);
background(255); 
// set variables of progressbar
counter = 0; 
startTime= millis(); 
maxTime=int(random(1000,1976)); 
done=false; 
//end settings
} 
// draw all text and progressbar
void draw() { 
  // set same background color
  background(255); 
  // check end of progressbar fill
  if (counter-startTime < maxTime) {
  counter=millis();
  }  else { done=true;  }
  // create the color for fill progressbar
  fill(110,110,255);
  // no stroke for draw
  noStroke();
  // show all text variables and progressbar
  text("Progress bar blue - size 620", 230, 20); 
  rect(10,30,map(counter-startTime,0,maxTime,0,620), 30 );
  text("counter- startTime "+int(counter- startTime)+" ",10,80);
  text("maxTime "+ int(maxTime) +  " ", 10,100);
  text("map converted counter-startTime"+ int ( map(counter-startTime,0,maxTime,0,200)), 10,120);
  noFill();
  }
// reload the draw of progress bar 
void mousePressed () { if (done) { counter = 0; startTime= millis();
  maxTime=int(random(1000,1976)); done=false; }
}

luni, 12 februarie 2018

The particles editor from Pixi.js .


The Pixi.js Creator Engine is known by users and java script developers to create digital content with the 2D WebGL renderer.
Today I will show you a publisher created by developers to solve the particle issue.
The parameters specific to each particle system are chosen, the result is viewed and then saved to an output file.
You can test this online tool here.
The result of snow particles is a file created into json style and is this:
{
        "alpha": {
                "start": 0.73,
                "end": 0.46
        },
        "scale": {
                "start": 0.15,
                "end": 0.2,
                "minimumScaleMultiplier": 0.5
        },
        "color": {
                "start": "#ffffff",
                "end": "#ffffff"
        },
        "speed": {
                "start": 200,
                "end": 200,
                "minimumSpeedMultiplier": 1
        },
        "acceleration": {
                "x": 0,
                "y": 0
        },
        "maxSpeed": 0,
        "startRotation": {
                "min": 50,
                "max": 70
        },
        "noRotation": false,
        "rotationSpeed": {
                "min": 0,
                "max": 200
        },
        "lifetime": {
                "min": 4,
                "max": 4
        },
        "blendMode": "normal",
        "ease": [
                {
                        "s": 0,
                        "cp": 0.379,
                        "e": 0.548
                },
                {
                        "s": 0.548,
                        "cp": 0.717,
                        "e": 0.676
                },
                {
                        "s": 0.676,
                        "cp": 0.635,
                        "e": 1
                }
        ],
        "frequency": 0.004,
        "emitterLifetime": -1,
        "maxParticles": 1000,
        "pos": {
                "x": 0,
                "y": 0
        },
        "addAtBack": false,
        "spawnType": "rect",
        "spawnRect": {
                "x": -500,
                "y": -300,
                "w": 900,
                "h": 20
        }
}   

sâmbătă, 16 decembrie 2017

The Matter javascript for 2D collider.

The Matter.js is created with javascript and can be used like a 2D physics engine for the web development and game engine.
This javascript for web and mobile can be found on official website.
The development team tell us about the features of this tool:
  • Rigid bodies
  • Compound bodies
  • Composite bodies
  • Concave and convex hulls
  • Physical properties (mass, area, density etc.)
  • Restitution (elastic and inelastic collisions)
  • Collisions (broad-phase, mid-phase and narrow-phase)
  • Stable stacking and resting
  • Conservation of momentum
  • Friction and resistance
  • Events
  • Constraints
  • Gravity
  • Sleeping and static bodies
  • Plugins
  • Rounded corners (chamfering)
  • Views (translate, zoom)
  • Collision queries (raycasting, region tests)
  • Time scaling (slow-mo, speed-up)
  • Canvas renderer (supports vectors and textures)
  • MatterTools for creating, testing and debugging worlds
  • World state serialisation (requires resurrect.js)
  • Cross-browser and Node.js support (Chrome, Firefox, Safari, IE8+)
  • Mobile-compatible (touch, responsive)
  • An original JavaScript physics implementation (not a port)
You can see one good example here.
How can be used ?
First, get a stable release and include the script in your web page and add the matter engine objects and features, see this example: