In game dev, generative art, and creative coding, sine is a ubiquitous function that is often used as a spring-like oscillator for a given parameter.

Overview

Background

In game dev, generative art, and creative coding, sine is a ubiquitous function that is often used as a spring-like oscillator for a given parameter.

On its own, sine has some undesirable qualities which most developers will encounter and adjust in isolated situations. The purpose of Bounded Sine is to solve these issues up-front in a reusable way:

Sine Bounded Sine Benefits
Period = 2 * PI Period = period, which defaults to 1. No longer need to work in radians. Period can be any value.
Is bounded by [-1, 1] Is bounded by [yMin, yMax] Bounds can now match the desired min/max value of a parameter.
fx(0) = 0 fx(0) = yStart where yMin <= yStart <= yMax Starting value can be set rather than it being fixed.

Here's an example:

const fn = boundedSine({ yStart: 2, yMax: 3, yMin: 0 });

bounded-sine-1

Bounded Sine also takes period and invert parameters. Note that when invert is true, f(0) does not always equal yStart because the function is reflected across its average y-value.

const fn = boundedSine({ yStart: 2, yMax: 3, yMin: 0, period: 10, invert: true });

bounded-sine-2

API

Parameter Default Description
options {} boundedSine takes a single options object.
options.yStart 0 The value of fx(0) before translations.
options.yMin -1 The minimum y-value before translations.
options.yMax 1 The maximum y-value before translations.
options.period 1 The length of one cycle of the curve.
options.translateX 0 Translation applied in the x-direction.
options.translateY 0 Translation applied in the y-direction.
options.invert false Reflects the functions around the average y-value.

Installation and Usage

yarn add bounded-sine

import { boundedSine } from "bounded-sine";
const fn = boundedSine({ yStart: 2, yMax: 3, yMin: 0 });
const yStart = fn(0)
You might also like...

Amelia is an open-source creative-coding toolkit for modern JavaScript

amelia Amelia is an open-source creative-coding toolkit for modern JavaScript. Amelia is a collection of APIs meant to make it easy to create sketches

Jun 10, 2022

A (very) minimalist creative coding playground. Make animations using only 64 HTML sliders!

Sliderland A (very) minimalist creative coding playground. Make animations using only 64 HTML sliders! Credits The recording feature uses ffmpeg.wasm

Dec 30, 2022

MidJourney is an AI text-to-image service that generates images based on textual prompts. It is often used to create artistic or imaginative images, and is available on Discord and through a web interface here.

MidJourney is an AI text-to-image service that generates images based on textual prompts. It is often used to create artistic or imaginative images, and is available on Discord and through a web interface here.

Midjourney MidJourney is an AI text-to-image service that generates images based on textual prompts. It is often used to create artistic or imaginativ

May 1, 2023

BookStore is a website that allows a given user to view a list of books, to add a new book and remove a given book.

BookStore is a website that allows a given user to view a list of books, to add a new book and remove a given book.

Project Name : BookStore CMS BookStore is a website that allows a given user to view a list of books, to add a new book and remove a given book. In or

Aug 22, 2022

Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

May 18, 2022

Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

May 3, 2022

Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

Jan 3, 2023

The most often-used OOP design patterns in TypeScript

The most often-used OOP design patterns in TypeScript

The most often-used OOP design patterns Generating patterns Factory method Abstract factory Builder Prototype Singleton Structural patterns Adapter Br

Mar 11, 2022

Export AWS SSM Parameter Store values in bulk to .env files

aws-parameter-bulk Utility to read parameters from AWS Systems Manager (SSM) Parameter Store in bulk and output them in environment-file or json forma

Oct 18, 2022
Owner
Mark Racette
Mark Racette
How often do you get asked about the gadgets or software that you use? If the answer is quite often, you should be trying show off out. Curate the list of gadgets and software and share it with your fans and followers.

Show Off - Showcase your setup! How often do you get asked about the gadgets or software that you use? If the answer is quite often, you should be try

Adithya Sreyaj 15 Nov 24, 2022
This project displays the art collection using the Metropolitan Museum of Art API. For this project we used HTML, CSS, Javascript, Webpack and Jest.

Metropolitan Museum of Art This project displays the art collection using the Metropolitan Museum of Art API. For this project we used HTML, CSS, Java

David Vera Castillo 11 Dec 24, 2022
RenderIf is a function that receives a validation as a parameter, and if that validation is true, the content passed as children will be displayed. Try it!

RenderIf RenderIf is a function that receives a validation as a parameter, and if that validation is true, the content passed as children will be disp

Oscar Cornejo Aguila 6 Jul 12, 2022
Some process handle JavaScript function parameter.

Function parameter handle or paremeter error control Example 1: Just checking if all arguments were passed / defined. const required = (name) => {

Md. Nazmul Islam 4 Mar 14, 2022
Data structures & algorithms implementations and coding problem solutions. Written in Typescript and tested with Jest. Coding problems are pulled from LeetCode and Daily Coding Problem.

technical-interview-prep Data structures & algorithms implementations and coding problem solutions. Written in Typescript and tested with Jest. Coding

Lesley Chang 7 Aug 5, 2022
Build your own generative art NFT collection with 21 lines of JavaScript

Avatar Collection Build your own Generative Art NFT Collection in 1 minute. Quickstart Just run the following to get started: git clone https://github

rarepress 79 Dec 16, 2022
Project template repo for generative art projects on the fx(hash) platform

fx(hash) x thi.ng project template About This template repo provides a compact, ready-to-go scaffolding for generative art projects aimed at the fx(ha

thi.ng 38 Dec 21, 2022
spartacus是一个基于Spring Boot 2.3.x、Spring Cloud Hoxton.SR5、Spring Security 2.3.x、OAuth2.0、Python3等开源框架构建的分布式系统

spartacus是一个基于Spring Boot 2.3.x、Spring Cloud Hoxton.SR5、Spring Security 2.3.x、OAuth2.0、Python3等开源框架构建的分布式系统,亦是一个功能完备的微服务脚手架。

xlvchao 108 Dec 24, 2022
NFT Art Generator made to create random unique art and their metadeta for NFTS.

Welcome to HashLips ?? All the code in these repos was created and explained by HashLips on the main YouTube channel. To find out more please visit: ?

Haadi Raja 2 Dec 11, 2022
A set of utilities and additional features for my creative coding class aiming to help students while introducing the algorithmic thinking.

p5.utils A set of utilities and additional features for my creative coding class aiming to help students while introducing the algorithmic thinking. T

alp tuğan 15 Dec 25, 2022