Created a nice software using SpiderBasic ? Post you link here !
User avatar
eddy
 
Posts: 124
Joined: Thu Mar 27, 2014 8:34 am

Image Processing (Caman JS)

by eddy Sun May 11, 2014 9:54 pm

:arrow: doc/Demo : http://camanjs.com/

  • Blends
  • Filters
  • Layers
Code: Select all
Procedure.i StartLayeredDrawing(DrawingOutput, *DrawFunction, *OnRenderEndFunction=0)
  !return Caman(v_DrawingOutput.canvas, function(){
  !   v_DrawingOutput.caman=this;
  !   p_DrawFunction(v_DrawingOutput);
  !   this.render(function(){ p_OnRenderEndFunction && p_OnRenderEndFunction.call(this); });
  !});
EndProcedure

Procedure AddDrawingLayer(DrawingOutput, Opacity=100, BlendMode.s="normal", LayerDrawingOutput=0, AppliedFilters.s="")
  !v_DrawingOutput.caman.newLayer(function () { 
  !   if (v_LayerDrawingOutput){
  !     this.imageData = v_LayerDrawingOutput.context.getImageData(0, 0, this.canvas.width, this.canvas.height);
  !     this.pixelData = this.imageData.data;
  !   }
  !   this.setBlendingMode(v_BlendMode);
  !   this.opacity=v_Opacity;
  !}); 
EndProcedure

Procedure DrawingFilter(DrawingOutput,Filter.s,Value)
  !v_DrawingOutput.caman[v_Filter](v_Value);
EndProcedure




CompilerIf #PB_Compiler_IsMainFile
  ; ****************************
  ; EXAMPLE 
  ; ****************************
 
  ;{ Utils
  Procedure UsePlugin(Plugin.s, Path.s, *FunctionUsingPlugin, EnforceDefine=#False)
  !cfg={ enforceDefine: v_EnforceDefine, paths: {} };
  !cfg.paths[v_Plugin]=v_Path;
  !requirejs.config(cfg);
 
  !require([v_Plugin], function(plug) {
  !   p_FunctionUsingPlugin(plug); 
  !});
EndProcedure
  ;}
 
  Enumeration
    #WIN=100
    #IMAGE
    #BUTTON
    #CANVAS
  EndEnumeration
  #Drawing_Blend_Normal$="normal"
  #Drawing_Blend_Multiply$="multiply"
  #Drawing_Blend_Screen$="screen"
  #Drawing_Blend_Overlay$="overlay"
  #Drawing_Blend_Difference$="difference"
  #Drawing_Blend_Addition$="addition"
  #Drawing_Blend_Exclusion$="exclusion"
  #Drawing_Blend_SoftLight$="softLight"
  #Drawing_Blend_Lighten$="lighten"
  #Drawing_Blend_Darken$="darken"
 
  Procedure DrawingLayeredImage(DrawingOutput)
    layer1_ImageOutput=ImageOutput(CreateImage(#PB_Any,300,300,32,RGB(0,100,0)))
    If StartDrawing(layer1_ImageOutput)
      Box(50,50,20,20,RGB(255,100,255))
      Box(150,110,80,50,RGB(100,0,255))
      StopDrawing()
    EndIf
    layer2_ImageOutput=ImageOutput(CreateImage(#PB_Any,300,300,32,RGB(0,100,0)))
    If StartDrawing(layer2_ImageOutput)
      Box(20,250,20,20,RGB(255,100,255))
      Box(50,10,70,50,RGB(100,0,255))
      StopDrawing()
    EndIf
   
   
    AddDrawingLayer(DrawingOutput, 10, #Drawing_Blend_Exclusion$, layer1_ImageOutput)   
    DrawingFilter(DrawingOutput,"hue",50)
   
    AddDrawingLayer(DrawingOutput, 60, #Drawing_Blend_Addition$, layer2_ImageOutput)   
    DrawingFilter(DrawingOutput,"hue",50)
   

  EndProcedure
 
  Procedure TestCamanAPI()   
    If OpenWindow(#WIN, 0, 0, 640, 480, "Image Processing - CamanJS", #PB_Window_Background) 
      CanvasGadget(#CANVAS,5,30,300,300)
     
      StartDrawing(CanvasOutput(#CANVAS))
      Box(0,0,300,150,RGB(50,100,200))
      Box(0,150,300,150,RGB(150,200,60))
      StopDrawing()
     
      StartLayeredDrawing(CanvasOutput(#CANVAS), @DrawingLayeredImage())           
    EndIf
  EndProcedure
 
  UsePlugin("Caman","//cdnjs.cloudflare.com/ajax/libs/camanjs/4.1.2/caman.full.min",@TestCamanAPI());
 
CompilerEndIf
User avatar
eddy
 
Posts: 124
Joined: Thu Mar 27, 2014 8:34 am

Re: Image Processing (Caman JS)

by eddy Wed Apr 01, 2015 6:57 pm

updated
- fix plugin loading
Return to Showcase

Who is online

Users browsing this forum: No registered users and 1 guest