soleil Posted September 7, 2020 Share Posted September 7, 2020 In this showcase https://experiments.p5aholic.me/day/019/ we see cloudshapes, permanently changin, with colors and acting like optic filters to change the appearance of the background and the word "DIVISION". I could extract few functions (below) the developer is using, but I would like to have more hints about how to achieve such result. There are many things, however I would like to go to the essential: - clouds (SVG) everchanging shapes - clouds as optic filter with its color and effect There is an effect of double cloud (we see the border twice), which is nice but I'm not interested by this. Do someone give me few clues or an approximate explanantion of how to achieve this, with which packages ? EDIT After some investigation it seems it's not so much relying on greensock but Three/webgl. I might miss something though. Quote divide length setHex setRGB setHSL getHex getHSL equals toJSON enable toggle lookAt rotate remove negate random update isEdge device resize recast height fadeIn project reflect angleTo lerpHSL toArray reorder compose getArea radians inverse isEmpty getSize disable connect onEnded getLoop setLoop startAt fadeOut getClip getRoot _update multiply lengthSq setStyle getStyle getPlane identity isMobile isSafari syncWith getMixer distance addScalar subScalar unproject normalize setLength setScalar fromArray enableAll makeBasis transpose makeScale makeShear decompose translate addOnMove getNormal randomInt constrain addUpdate conjugate _onChange slerpFlat makeEmpty getCenter intersect isDesktop isAndroid setConfig toVector3 offsetHSL addColors getOutput setBuffer setDetune getDetune getFilter setFilter getVolume setVolume isRunning addVectors subVectors applyEuler distanceTo getInverse clampPoint disableAll getBasisAt disconnect getFilters setFilters setLoopEnd stopFading distanceSq lerpVectors clampScalar clampLength premultiply determinant setPosition onMouseMove getInstance getMidpoint containsBox resizeScene createTweak changeColor roundToZero addScaledSH isScheduled crossFadeTo setDuration stopWarping _updateTime _setEndings applyMatrix3 applyMatrix4 crossVectors divideScalar setColorName getHexString copyPosition extractBasis getBarycoord fromGeometry projectPoint setFromEuler setFromArray getParameter intersectBox setComponent getComponent rotateAround setLoopStart makeRotationX makeRotationY makeRotationZ containsPoint isFrontFacing intersectsBox computeGroups setComponents intersectLine coplanarPoint rotateTowards setFromPoints setFromObject expandByPoint calcDirection createTexture setNodeSource crossFadeFrom _updateWeight multiplyScalar applyAxisAngle projectOnPlane setFromVector3 setFromMatrix4 setUvTransform intersectsLine expandByVector expandByScalar expandByObject getBoundingBox intersectPlane addScaledVector multiplyVectors applyQuaternion manhattanLength projectOnVector extractRotation makeTranslation makePerspective getNormalMatrix distanceToPoint calcViewportFov intersectsPlane intersectSphere distanceToPlane getIrradianceAt setPlaybackRate getPlaybackRate _scheduleFading setFromSpherical copySRGBToLinear copyLinearToSRGB multiplyMatrices makeRotationAxis makeOrthographic distanceToSphere intersectsSphere setFromAxisAngle intersectsObject intersectsSprite setCurrentCanvas getFrequencyData _updateTimeScale applyNormalMatrix distanceToSquared copyGammaToLinear copyLinearToGamma setFromQuaternion getMaxScaleOnAxis _onChangeCallback getBoundingSphere distanceSqToPoint intersectTriangle updateMatrixWorld transformDirection setFromCylindrical setFromMatrixScale transposeIntoArray setFromUnitVectors intersectsTriangle this.routerViewKey setEffectiveWeight getEffectiveWeight manhattanDistanceTo setFromMatrixColumn fromBufferAttribute convertSRGBToLinear convertLinearToSRGB closestPointToPoint multiplyQuaternions deleteCurrentCanvas distanceSqToSegment getAverageFrequency setFromMatrix3Column convertGammaToLinear convertLinearToGamma setFromCenterAndSize setMediaStreamSource setFromMatrixPosition setFromRotationMatrix makeRotationFromEuler setFromCoplanarPoints setMediaElementSource setEffectiveTimeScale getEffectiveTimeScale setFromSphericalCoords setFromBufferAttribute setFromPointsAndIndices multiplyQuaternionsFlat setFromProjectionMatrix setFromCylindricalCoords makeRotationFromQuaternion setAxisAngleFromQuaternion closestPointToPointParameter setFromNormalAndCoplanarPoint setAxisAngleFromRotationMatrix Link to comment Share on other sites More sharing options...
OSUblake Posted September 7, 2020 Share Posted September 7, 2020 GSAP just animates stuff. To render stuff like that, you need to use WebGL. It looks like they are using three.js. https://threejs.org/ 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now